javascript - 在 Threejs 中使用相机导航时出现问题

Question

我正在尝试使用 THREE.OrbitControls 在 Threejs 中开发相机导航功能。尽管我正在遵循指南，但我似乎无法让它发挥作用。

我的 fiddle 代码的链接是:https://jsfiddle.net/Matty1/uc671jbL/18/

位于 JavaScript 的第 18/19 行:

const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.update();

如有任何建议，我们将不胜感激。

Answer 1

您已从 fiddle 的相对路径中包含了OrbitControls。像这样尝试一下:

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x19d7f8);

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0,0,5);

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

window.addEventListener('resize', function(){
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width/height;
    camera.updateProjectionMatrix;
} )

const controls = new THREE.OrbitControls( camera, renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

body {
   margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f7ebf1e6e6c3b3adb2b1b7" rel="noreferrer noopener nofollow">[email protected]</a>/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e09488928585a0d0ced1d2d4" rel="noreferrer noopener nofollow">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>