Три. js перемещение камеры влево и вправо от сцены - PullRequest
Новая
       21

Три. js перемещение камеры влево и вправо от сцены

1 голос
/ 12 февраля 2020

Я работаю над прототипом 3. js, в котором на сцену добавлена ​​3d модель поезда. Мое требование - переместить камеру влево / вправо от сцены, чтобы увидеть весь поезд.

Я пытался использовать приведенный ниже код - 

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

Но сцена вращалась, а не панорамировала в левой части.

Так что будет очень полезно, если кто-нибудь поделится их идея на это:)

Спасибо, Sathee sh K

1 Ответ

1 голос
/ 06 марта 2020

Использование прослушивателя 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>
...