Three.js:移动过渡和序列动作 [英] Three.js: Move transition and Sequence action

问题描述

我正在使用 Three.JS 库开发 WebGL 应用程序.

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

我正在尝试将 Blender 3d 模型加载到我的 Three.js 应用程序中的场景中，并尝试在一个场景和另一个场景之间导航.我能够成功地将 Blender 3d 模型 js 文件加载到场景中，并且它在我基于 Three.js 的项目中正确显示了模型.我现在有以下要求，无法完成.

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. 当我将一个场景加载到另一个场景时，我想做某种从一个场景到另一个场景的移动过渡.如何通过编程实现向前、向后、左右两侧方式的相机移动过渡.

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.

如何实现序列动作"，例如当相机向前移动并到达某个位置时，它将加载并显示下一个场景.我认为，我们可以使用opengl 中的序列操作".

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.

推荐答案

@zz85 创建了一个优秀的 Director 类，它支持如下链接模式:

@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();
});

演示:http://jabtunes.com/labs/boidsnbuildings/

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

这个演示使用了three.js.r.54dev，但我希望它适用于当前版本，three.js r.58.

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

另一种选择是使用 Tween.js，但根据您的要求，我希望Director 将是您的首选.

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

示例:http://threejs.org/examples/canvas_interactive_cubes_tween.html

three.js r.58

three.js r.58

这篇关于Three.js:移动过渡和序列动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！