问题描述
我正在使用 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.
当我将一个场景加载到另一个场景时,我想做某种从一个场景到另一个场景的移动过渡.如何通过编程实现向前、向后、左右两侧方式的相机移动过渡.
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:移动过渡和序列动作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!