围绕三个.js 对象移动智能手机摄像头

Question

我有一个简单的矩形放置在我的相机预览中。我想模拟一个 AR 效果。当我的相机移动时，我不希望矩形随之移动，而是保持固定位置。我知道我必须访问智能手机的陀螺仪，但我不知道它是如何工作的，以及我必须如何将这些坐标连接到 3D 相机。我用 Angular 编程。

const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    const renderer = new THREE.WebGLRenderer({ alpha: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;
    const animate = () => {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render( scene, camera );
};
animate();

我知道我的动画搞砸了，但这并不重要。让旋转槽移动相机对我来说很重要。

Answer 1

我认为你必须先在渲染器中启用 XR。

renderer.xr.enabled = true;

我建议您查看Github repository 中名为 webxr_ar_hittest 的示例。