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

您已收录 OrbitControls从你的 fiddle 中的相对路径。像这样尝试:

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/three@0.124/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.124/examples/js/controls/OrbitControls.js"></script>