Есть ли функция 3. js для имитации движения камеры? - PullRequest
Новая
       6

Есть ли функция 3. js для имитации движения камеры?

1 голос
/ 19 января 2020

У меня есть две модели в моей сцене. Я могу нажать кнопку, чтобы телепортировать камеру в разные места сцены с этим кодом: 

camera.position.set(0, 100, -350); //sets initial camera orbit rotation
controls.target.set(0, 0, 0); //sets orbit location in world

Существует ли функция 3. js для имитации движения камеры между точками?

1 Ответ

1 голос
/ 19 января 2020

Как уже упоминалось в комментариях, вы можете использовать библиотеку анимации, например tween.js, для решения этой проблемы. Можно также использовать внутреннюю систему анимации three.js, но ее низкоуровневый API больше предназначен для загрузчиков ресурсов.

Посмотрите на следующий пример, сделанный с tween.js. Посмотрите, как положение камеры анимируется в течение двух секунд и как обратный вызов onUpdate() используется для фокусировки камеры на me sh. 

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;
    
    var target = new THREE.Vector3( 1, 0, 1 );
    
    new TWEEN.Tween( camera.position )
      .to( { x: target.x, y: target.y, z: target.z }, 2000 )
      .onUpdate( () => { camera.lookAt( scene.position ); } )
      .start();

    scene = new THREE.Scene();

    geometry = new THREE.BoxBufferGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

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

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.3.5/Tween.js"></script>
...