我正在做一个学校项目，在使用react和webXR时遇到了一些问题。我从来没有使用过react和webXR，所以这对我来说是一种新的体验。我试图添加两个按钮，可以覆盖在XR场景之上，每个按钮都有功能。一个按钮可以重定向用户，另一个按钮可以打开弹出菜单。
出于某种原因，当我添加onClick和只是一个简单的控制台日志按钮，什么也没有发生。请建议。
ARView.jsx
import { Html, OrbitControls } from "@react-three/drei";
import { useThree } from "@react-three/fiber";
import { Interactive, useHitTest, useXR } from "@react-three/xr";
import { useRef, useState } from "react";
import Cube from "./Cube";
import './ARView.css';
import { FaArrowAltCircleLeft, FaInfoCircle } from 'react-icons/fa';
const ARView = () => {
const reticleRef = useRef();
const [cubes, setCubes] = useState([]);
const { isPresenting } = useXR();
useThree(({ camera }) => {
if (!isPresenting) {
camera.position.z = 3;
}
});
useHitTest((hitMatrix, hit) => {
hitMatrix.decompose(
reticleRef.current.position,
reticleRef.current.quaternion,
reticleRef.current.scale
);
reticleRef.current.rotation.set(-Math.PI / 2, 0, 0);
});
const placeCube = (e) => {
let position = e.intersection.object.position.clone();
let id = Date.now();
setCubes([...cubes, { position, id }]);
};
return (
<>
<OrbitControls />
<ambientLight />
{isPresenting &&
cubes.map(({ position, id }) => {
return <Cube key={id} position={position} />;
})}
{isPresenting && (
<Interactive onSelect={placeCube}>
<mesh ref={reticleRef} rotation-x={-Math.PI / 2}>
<ringGeometry args={[0.1, 0.25, 32]} />
<meshStandardMaterial color={"white"} />
</mesh>
</Interactive>
)}
{isPresenting && (
<Html>
<div className="nav-container">
<button className="nav-button"><FaArrowAltCircleLeft /></button>
<button className="nav-button"><FaInfoCircle /></button>
</div>
</Html>
)}
{!isPresenting && <Cube />}
</>
);
};
export default ARView;字符串
ARViewContainer.jsx
import { Canvas } from "@react-three/fiber";
import { ARButton, XR } from "@react-three/xr";
import ARView from "./ARView";
const ARViewContainer = () => {
return (
<>
<ARButton
sessionInit={{
requiredFeatures: ["hit-test"],
}}
/>
<Canvas>
<XR>
<ARView />
</XR>
</Canvas>
</>
);
};
export default ARViewContainer;型
之后，它就被导入到App.jsx中
1条答案
按热度按时间t1rydlwq1#
你可以这样做：
字符串
如果你能弄清楚如何将'root'改为像
document.body.querySelector(".xrOverlay")这样的东西，我很有兴趣知道。