跳到主要内容

三维空间中的点

本章你可以学习到
  • Five 事件系统（tapGesture 等）在 Vue 中的使用方式。
  • 从 tapGesture 获取三维坐标，并投影到屏幕坐标。

事件系统概览​

  • tapGesture：点击/触摸，默认行为为点位移动。
  • 可通过 wantsTapGesture 回调返回 false 阻止默认行为。

Vue 示例：点击拾取三维点​

<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 ? '关闭拾取' : '开启拾取' }}</button></div>
    <div style="position: fixed; bottom: 16px; left: 16px; background: #fff; padding: 8px; border-radius: 4px">已拾取：{{ 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>