Three.js 在场景的左右两侧移动相机

Question

我正在开发 three.js 原型，其中将火车的 3d 模型添加到场景中。我的要求是将相机移动到场景的左侧/右侧以查看完整的火车。

我尝试使用下面的代码 -

function onKeyDown(){
     var zdelta = 20;
     switch( event.keyCode ) {
         case 65: // look left
        camera.position.z = camera.position.z + zdelta;
        }
     }

但是场景在左侧旋转而不是平移。

所以，如果有人对此分享他们的想法，那将是很大的帮助:)

谢谢， Satheesh K

Answer 1

使用 keydown 事件侦听器绝对是正确的方法。使用此代码试试：

var scene, camera, renderer, cubeObj;

init();
animate();


function init() {

 scene = new THREE.Scene();

 camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 camera.position.z = 400;
 camera.position.y = - 10;
 camera.position.x = 10;

 var cubeGeo = new THREE.BoxGeometry( 200, 150, 100 );

 var cubeGeoMaterial = new THREE.MeshPhongMaterial( { color: 0x808080 } );

 cubeObj = new THREE.Mesh( cubeGeo, cubeGeoMaterial );

 cubeObj.position.x = - 70;
 cubeObj.position.y = - 50;
 cubeObj.position.z = 0;
 cubeObj.rotation.x = 0.5;
 scene.add( cubeObj );

 var cubeGeo2 = new THREE.BoxGeometry( 200, 150, 100 );

 var cubeGeoMaterial2 = new THREE.MeshPhongMaterial( { color: 0x808080 } );

 var cubeObj2 = new THREE.Mesh( cubeGeo2, cubeGeoMaterial2 );

 cubeObj2.position.x = 160;
 cubeObj2.position.y = - 50;
 cubeObj2.position.z = - 5;

 cubeObj2.rotation.x = 0.5;

 scene.add( cubeObj2 );

 var cubeGeo3 = new THREE.BoxGeometry( 200, 150, 100 );

 var cubeGeoMaterial3 = new THREE.MeshPhongMaterial( { color: 0x808080 } );

 var cubeObj3 = new THREE.Mesh( cubeGeo3, cubeGeoMaterial3 );

 cubeObj3.position.x = 440;
 cubeObj3.position.y = - 50;
 cubeObj3.position.z = 0;

 cubeObj3.rotation.x = 0.5;

 scene.add( cubeObj3 );

 renderer = new THREE.WebGLRenderer( {
  antialias: true
 } );

 var spotLight = new THREE.SpotLight( 0xffffff );
 spotLight.position.set( 100, 1000, 100 );

 spotLight.castShadow = true;

 spotLight.shadow.mapSize.width = 1024;
 spotLight.shadow.mapSize.height = 1024;

 spotLight.shadow.camera.near = 500;
 spotLight.shadow.camera.far = 4000;
 spotLight.shadow.camera.fov = 30;

 //scene.add( spotLight );

 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
 scene.add( directionalLight );

 renderer.setSize( window.innerWidth, window.innerHeight );
 renderer.setClearColor( 0xcce0ff );
 document.body.appendChild( renderer.domElement );

 document.addEventListener( 'keydown', onKeyDown, false );

}

function onKeyDown( event ) {

 const step = 5; // world units

 switch ( event.keyCode ) {

  case 37:
   camera.position.x -= step;
   break;

  case 39:
   camera.position.x += step;
   break;

 }

}

function animate() {

 renderer.render( scene, camera );
 requestAnimationFrame( animate );

}

body {
 margin: 0;
}
canvas {
 display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.114/build/three.js"></script>

Three.js 在场景的左右两侧移动相机

Three.js moving the camera left and right side of the scene

camera

move

three.js