CODEWITHSUNDEEP
javascriptthree.js
zombierecord
zombierecord

Reputation: 35

Is there a three.js function to simulate camera movement?

I have two models in my scene. I can click a button to teleport the camera to different spaces within the scene with this code:

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

Is there a three.js function to simulate camera movement between points instead?

Upvotes: 1

Views: 278

Answers (1)

Mugen87
Mugen87

Reputation: 31026

As mentioned in the comments, you can use an animation library like tween.js to solve this issue. The internal animation system of three.js could also be used but it's low-level API is more intended for asset loaders.

Check out the following example made with tween.js. Check out how the camera position is animated over two seconds and how the onUpdate() callback is used to focus the camera on the mesh.

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>

Upvotes: 2

Related Questions