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

问题描述

我有一个简单的矩形，放在我的相机预览上。我想模拟一个 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();

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

解决方法

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

renderer.xr.enabled = true;

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