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

Question

我在next.js项目中使用react three/xr和react three.drei。这段代码将三维模型i放置在一个静态位置。

const Test: NextPage = () => {
return (
<div className="testar">
<ARCanvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Suspense fallback={<Loader />}>
<Model scale={0.01} />
</Suspense>
</ARCanvas>
</div>
);

}；

并且工作正常。现在如何检测平面来放置对象？

Answer 1

将sessionInit={{ requiredFeatures: ['hit-test'] }添加到您的AR画布，然后使用命中测试来获取它的位置，并将其添加为对模型的引用

https://www.npmjs.com/package/@react three/xr

export default function App(){

let hitPoint = useRef()
useHitTest((hitMatrix, hit) => {
hitMatrix.decompose(
hitPoint.current.position, 
hitPoint.current.rotation, 
hitPoint.current.scale,
)
})
return(     
<ARCanvas sessionInit={{ requiredFeatures: ['hit-test'] }}>
<Model ref={hitPoint} />
</ARCanvas>
);
}

Answer 2

我使用这里的线索在codesandbox中构建了一个简单的模型。(代码如下(

在我手机上的体验是，这个模型显示得很好。当我点击Start AR按钮时，盒子会出现在我站的地方，离地大约一米。

但是，我不能拖动来放置方框，而且我看不到标线。

是否需要显式处理命中结果

这不是一个答案，但这段代码可能会为某些人提供信息。

import { useRef } from "react";
import { ARCanvas, useHitTest } from "@react-three/xr";
import { OrbitControls } from "@react-three/drei";
export default function App() {
// wrap to avoid error: React-three-fiber hooks can only be used within the Canvas
function Model() {
let hitPoint = useRef();
useHitTest((hitMatrix, hit) => {
hitMatrix.decompose(
hitPoint.current.position,
hitPoint.current.rotation,
hitPoint.current.scale
);
});
return <boxGeometry ref={hitPoint} args={[1, 1, 1]} />;
}
return (
<div style={{ backgroundColor: "lightblue", height: "100vh" }}>
<ARCanvas sessionInit={{ requiredFeatures: ["hit-test"] }}>
<mesh>
<ambientLight intensity={0.5} />
<directionalLight position={[-10, -10, -10]} />
<Model />
<meshStandardMaterial color="orange" />
</mesh>
<OrbitControls />
</ARCanvas>
</div>
);
}