反应-3/xr平面检测

Question

在我的next.js项目中，我正在使用react 3/xr和react 3/drei。这段代码将3d模型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画布中，然后使用命中测试获取it位置，并将其作为模型的参考

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

我利用这里的线索在码箱中构造了一个简单的模型。(代码如下)

在我的手机上的经验是，模型显示得很好。当我点击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>
  );
}