CODEWITHSUNDEEP
three.js
Stella
Stella

Reputation: 1868

Three.js: Move transition and Sequence action

I am working on a WebGL application using Three.JS library.

I am trying to load Blender 3d model into my Three.js application in a Scene and try to navigate between one scene to another. I am able to successfully load blender 3d model js file into the scene and it shows the model properly in my Three.js based project. I am having the following requirements now, and unable to get it done.

  1. When i'm loading one scene to another scene, i want to do some kind of move transition from one scene to another. How to achieve camera move transition like frontwards, backwards, right and left side ways through programmatically.

  2. How to achieve 'Sequence actions' like when camera moving frontwards and reaching a place, it will load and show the next scene. I think, we can achieve this using 'Sequence actions' in opengl.

Upvotes: 1

Views: 1957

Answers (1)

WestLangley
WestLangley

Reputation: 104763

@zz85 has created an excellent Director class that enables chaining patterns like the following:

director = new THREE.Director();

director
.addAction( 0, function() {
    camera.position.set( 750, 850, 750 );
})
.addAction( 10, function() {
    // do something
    doSomething();
})
.addAction( 10, function() {
    // top view
    camera.position.set( 0, 1000, 0 );
})
// cross the terrain
.addTween( 18, 4, camera.position, {}, { x:300 , y: 80, z: -2000 }, 'cubicInOut' )
.addTween( 18, 4, camera, { lens: 35 }, { lens: 100 }, 'cubicInOut', function( k ) {
    camera.setLens( camera.lens );
})
.addTween( 18, 4, lookAt, {}, { x:300 , y: 80, z: 2000 }, 'linear' )

})
.addAction( 80, function() {
    stop();
});

Demo: http://jabtunes.com/labs/boidsnbuildings/

Blog post: http://www.lab4games.net/zz85/blog/2012/11/19/making-of-boids-and-buildings/

This demo uses three.js. r.54dev, but I expect it will work with the current version, three.js r.58.

Another option is to use Tween.js, but based on your requirements, I expect Director would be your preference.

Example: http://threejs.org/examples/canvas_interactive_cubes_tween.html

three.js r.58

Upvotes: 3

Related Questions