typescript 使用useHitTest(“@react-three/xr”:“^5.0.1”)与较新版本的XR

icnyk63a  于 2023-01-31  发布在  TypeScript
关注(0)|答案(1)|浏览(107)

我看到过一些将useHitTest与低于v5的@react-three/xr版本一起使用的示例,但我不太确定如何使用较新版本(以及using useRef with Typescript,这可能是一个单独的问题)转换语法。
下面是旧语法的一个示例:
plane detection with react-three/xr
以及
https://codesandbox.io/s/react-xr-usehittest-demo-5iff9?file=/src/App.tsx
但我不确定(based on this react-three/xr documentation):
a.如何将sessionInit={{ requiredFeatures: ['hit-test'] }}添加到CanvasXR标签,发布ARCanvas的弃用版本。
B.是否还需要hit.decompose
c.是否需要mesh.applyMatrix4(hitMatrix),或者是否仍然需要类似ref={hitPoint}的内容
d.如果使用ref与Typescript,如何解决Type 'MutableRefObject<undefined>' is not assignable错误时,添加到一个mesh. As per this answer,也许我需要强制挂载组件或什么。
任何帮助或例子感谢。谢谢

rdrgkggo

rdrgkggo1#

我找到了一个使用“@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.position, ref.quaternion, ref.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;

相关问题