将useHitTest("@react-three/xr"："^5.0.1")与较新版本的XR一起使用

Question

我看到了一些使用useHitTest的例子，其中@react three/xr的版本低于v5，但我不太确定如何使用较新版本转换语法。。(以及将useRef与Typescript一起使用，这可能是一个单独的问题(。

下面是一个旧语法的例子：

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

和

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

但我不确定(基于这个react three/xr文档(：

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

b。是否仍需要hit.decompose。

c。是否需要mesh.applyMatrix4(hitMatrix)，或者是否仍然需要类似ref={hitPoint}的

d。如果将ref与Typescript一起使用，如何解决添加到网格时出现的Type 'MutableRefObject<undefined>' is not assignable错误。根据这个答案，也许我需要强制安装组件或其他什么。。

感谢任何帮助或例子。感谢

Answer 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;