VR模式下的多个场景和不同的摄像机

Pim*_*Web 5 three.js react-three-fiber react-three-drei react-xr

我正在尝试在 XR 环境中实现这个小提琴。

在小提琴中,第二个场景固定在屏幕上,但不使用 oculus/玩家相机...

有没有人有办法使场景或物体始终位于眼的右上角?我想尺寸和相机有错误,但找不到什么......

我不确定,我脑子坏了,这是我迈向 XR 的第一步......

门户第二场景代码:

function Viewcube() {
  const { gl, scene, camera, size } = useThree()
  const virtualScene = useMemo(() => new Scene(), [])
  const virtualCam = useRef()
  const ref = useRef()
  const [hover, set] = useState(null)
  const matrix = new Matrix4()

  useFrame(() => {
    matrix.copy(camera.matrix).invert()
    ref.current.quaternion.setFromRotationMatrix(matrix)
    gl.autoClear = true
    gl.render(scene, camera)
    gl.autoClear = false
    gl.clearDepth()
    gl.render(virtualScene, virtualCam.current)
  }, 1)

  return createPortal(
    <>
      <OrthographicCamera ref={virtualCam} makeDefault={false} position={[0, 0, 100]} />
      <mesh
        ref={ref}
        raycast={useCamera(virtualCam)}
        position={[size.width / 2 - 80, size.height / 2 - 80, 0]}
        onPointerOut={(e) => set(null)}
        onPointerMove={(e) => set(Math.floor(e.faceIndex / 2))}>
        {[...Array(6)].map((_, index) => (
          <meshLambertMaterial attachArray="material" key={index} color={hover === index ? 'hotpink' : 'white'} />
        ))}
        <boxGeometry args={[60, 60, 60]} />
      </mesh>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} intensity={0.5} />
    </>,
    virtualScene
  )
}
Run Code Online (Sandbox Code Playgroud)

总而言之,我想在 oculus 视图的右上角显示固定的东西,即使在移动头部时也是如此,但我被卡住了......