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

Posted 2023-04-14

【中文标题】围绕三个.js 对象移动智能手机摄像头

【英文标题】：Moving Smartphone Camera around three.js Object

【发布时间】：2021-09-23 16:10:19

【问题描述】：

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

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

【参考方案1】：

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

renderer.xr.enabled = true;

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