Points in 3D Space

Convert between screen and 3D coordinates with Five SDK in Vue without an additional wrapper.

In this chapter you will learn

How to use the Five SDK event system (tapGesture, etc.) in Vue.
How to obtain 3D coordinates from tapGesture and project them onto screen coordinates.

Event System Overview

tapGesture: tap/touch; the default behavior is to move the viewpoint to that location.
You can return false from the wantsTapGesture callback to prevent the default behavior.

Vue Example: Pick a 3D Point on Tap

<template>
  <div style="width: 100vw; height: 100vh">
    <div ref="container" style="width: 100%; height: 100%; overflow: hidden" />
    <div style="position: fixed; top: 16px; left: 16px"><button class="btn btn-primary" @click="enabled = !enabled">{{ enabled ? 'Disable Picking' : 'Enable Picking' }}</button></div>
    <div style="position: fixed; bottom: 16px; left: 16px; background: #fff; padding: 8px; border-radius: 4px">Picked: {{ points.length }}</div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { Five, parseWork } from '@realsee/five'

const container = ref(null)
let five = null
const enabled = ref(false)
const points = ref([])
const workURL = 'https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json'

onMounted(()=>{
  five = new Five()
  if (container.value) five.appendTo(container.value)
  fetch(workURL).then(r=>r.json()).then(json=>five.load(parseWork(json)))
  const onResize = () => five.refresh()
  window.addEventListener('resize', onResize, false)

  const onWantsTap = (raycaster) => {
    if (!enabled.value) return true
    const intersection = five.model.intersectRaycaster(raycaster)
    if (intersection) points.value.push(...intersection)
    return false
  }
  five.on('wantsTapGesture', onWantsTap)

  onUnmounted(()=>{
    window.removeEventListener('resize', onResize, false)
    five.off('wantsTapGesture', onWantsTap)
    five.dispose()
  })
})
</script>

<template>
  <div style="width: 100vw; height: 100vh">
    <div ref="container" style="width: 100%; height: 100%; overflow: hidden" />
    <div style="position: fixed; top: 16px; left: 16px"><button class="btn btn-primary" @click="enabled = !enabled">{{ enabled ? 'Disable Picking' : 'Enable Picking' }}</button></div>
    <div style="position: fixed; bottom: 16px; left: 16px; background: #fff; padding: 8px; border-radius: 4px">Picked: {{ points.length }}</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { Five, parseWork } from '@realsee/five'
import type { Vector3 } from 'three'

const container = ref<HTMLDivElement | null>(null)
let five: Five | null = null
const enabled = ref(false)
const points = ref<Vector3[]>([])
const workURL = 'https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json'

onMounted(()=>{
  five = new Five()
  if (container.value) five.appendTo(container.value)
  fetch(workURL).then(r=>r.json()).then(json=>five!.load(parseWork(json)))
  const onResize = () => five!.refresh()
  window.addEventListener('resize', onResize, false)

  const onWantsTap = (raycaster: any) => {
    if (!enabled.value) return true
    const intersection = five!.model.intersectRaycaster(raycaster)
    if (intersection) points.value.push(...intersection)
    return false
  }
  five.on('wantsTapGesture', onWantsTap)

  onUnmounted(()=>{
    window.removeEventListener('resize', onResize, false)
    five!.off('wantsTapGesture', onWantsTap)
    five!.dispose()
  })
})
</script>