reactjs - 在新版 XR 中使用 useHitTest（"@react-three/xr": "^5.0.1"）

我见过使用低于 v5 版本的 @react-three/xr 与 useHitTest 的一些例子，但我不太确定如何使用新版本来转换语法……（以及在 TypeScript 中使用 useRef，这可能是另一个问题）。

这里是旧语法的一个例子：

使用 react-three/xr 进行平面检测

和

https://codesandbox.io/s/react-xr-usehittest-demo-5iff9?file=/src/App.tsx

但是我不确定（根据这个 react-three/xr 文档）：

a. 在 ARCanvas 弃用后，如何将 sessionInit={{ requiredFeatures: ['hit-test'] }} 添加到 Canvas 或 XR 标签。

b. 是否仍然需要 hit.decompose。

c. 是否需要 mesh.applyMatrix4(hitMatrix)，或者是否仍然需要像 ref={hitPoint} 这样的东西

d. 如果在 Typescript 中使用 ref，在将其添加到 mesh 时如何解决 Type 'MutableRefObject<undefined>' is not assignable 错误。根据这个答案，也许我需要强制挂载组件之类的操作..

任何帮助或示例都将不胜感激。谢谢

答案＃1

好吧，我找到了一个关于 "@react-three/xr": "^5.1.2" 的命中测试示例，也许对你有帮助

import React, { useRef } from "react";
// eslint-disable-next-line
import { XR, Controllers, Hands, ARButton, useHitTest } from "@react-three/xr";
// eslint-disable-next-line
import { Box, OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
// eslint-disable-next-line
import { Matrix4, Mesh } from "three";


const HitTestExample = () => {
  const ref = useRef(null!);

  useHitTest((hitMatrix: Matrix4, hit: XRHitTestResult) => {
    // @ts-ignore
    hitMatrix.decompose(ref.current.position, ref.current.quaternion, ref.current.scale);
  });

  return (
    <Box ref={ref} args={[0.1, 0.1, 0.1]}/>
  );
};

const App = () => {
  return (
    <>
      <ARButton sessionInit={{ requiredFeatures: ["hit-test"] }}/>
      <Canvas>
        <XR>
          <ambientLight />
          <pointLight position={[10, 10, 10]} />
          <HitTestExample />
          <Controllers />
        </XR>
      </Canvas>
    </>
  );
};

export default App;