跳到主要内容

三维空间中的点

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

事件系统概览​

  • tapGesture: 点击/触摸。默认行为为点位移动。
  • panGesture: 拖拽旋转/平移。
  • pinchGesture: 双指缩放。
  • mouseWheel: 滚轮缩放。
  • 可以通过监听 wants* 事件并在回调中返回 false 来阻止默认行为，例如 wantsTapGesture。

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

import { useEffect, useRef, useState } from 'react'
import { Five, Mode, parseWork } from '@realsee/five'

const workURL = 'https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json'

export default function FivePoints() {
  const containerRef = useRef(null)
  const fiveRef = useRef(null)
  const [enabled, setEnabled] = useState(false)
  const [points, setPoints] = useState([])

  useEffect(() => {
    const five = new Five()
    fiveRef.current = five
    if (containerRef.current) five.appendTo(containerRef.current)
    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) return true
      const intersection = five.model.intersectRaycaster(raycaster)
      if (intersection) {
        setPoints((prev) => [...prev, intersection.point])
      }
      return false
    }
    five.on('wantsTapGesture', onWantsTap)

    return () => {
      window.removeEventListener('resize', onResize, false)
      five.off('wantsTapGesture', onWantsTap)
      five.dispose()
    }
  }, [enabled])

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <div ref={containerRef} style={{ width: '100%', height: '100%', overflow: 'hidden' }} />
      <div style={{ position: 'fixed', top: 16, left: 16, display: 'flex', gap: 8 }}>
        <button className="btn btn-primary" onClick={()=>setEnabled(v=>!v)}>{enabled? '关闭拾取':'开启拾取'}</button>
      </div>
      <div style={{ position: 'fixed', bottom: 16, left: 16, background: '#fff', padding: 8, borderRadius: 4, maxWidth: 320 }}>
        <div>已拾取: {points.length}</div>
      </div>
    </div>
  )
}

如需将三维点映射为屏幕坐标，可使用 five.project2d(vector, testModel)，参考下一章“打标签”。