三JS立方体吐温JS基础知识 [英] Tween JS basics on three JS cube
问题描述
我是新来的吐温JS,并试图让使用吐温移动到右侧的一个简单的动画。
I am new to Tween JS, and trying to make a simple animation of moving to the right using Tween.
下面是init函数我的code(我用三JS):
Below is my code in the init function ( I am using Three JS):
var geometry = new THREE.CylinderGeometry( 200,200, 200, 4, 0 );
var material = new THREE.MeshPhongMaterial( { ambient: 0xf0f0f0, color: 0x006699, specular: 0x006699, shininess: 60, shading: THREE.FlatShading } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene.add( mesh );
var tween = new TWEEN.Tween( { x: 0, y: 0 } )
.to( { x: 400 }, 2000 )
.easing( TWEEN.Easing.Elastic.InOut )
.onUpdate( function () {
mesh.position.x = Math.round( this.x );
} ).start();
和我的动画的功能:
requestAnimationFrame(animate);
renderer.render(scene, camera);
TWEEN.update();
update();
立方体是有,但补间不工作。有什么我错过?
The cube is there but the tween is not working. Is there something I miss?
推荐答案
下面是我做我的现场。
The following is what I did to my scene.
-
创建一个单独的渲染()函数
Create a separate render() function
把吐温code为可调用的函数。你想在这个函数的开始删除所有补间。我不完全知道为什么,但我了解到,从教程code。
Put the TWEEN code into a function that you can call. You want to remove all TWEENs at beginning of this function. I am not entirely sure why, but I learned that from tutorial code.
在吐温函数,调用上呈现更新功能。
In TWEEN function, call render function on update.
通过你不停的动画循环动画中的呼叫TWEEN.update。注:渲染()将被调用每次更新时间吐温
Call TWEEN.update in your animation through your non-stop animation loop. Note: render() will be called every time you update the TWEEN.
以下是骨架code。检查是否可以适用于你的程序:
The following is the skeleton code. Check if that could apply to your program:
//TWEEN function
function moveObject( ) {
TWEEN.removeAll();
new TWEEN.Tween( { x: 0, y: 0 } )
.to( { x: 400 }, 2000 )
.easing( TWEEN.Easing.Elastic.InOut )
.onUpdate( render )
.start();
};
//NON-STOP animation loop
function animation(){
requestAnimationFrame(animate);
TWEEN.update();
}
//Render function
function render(){
renderer.render(scene, camera);
}
希望它帮助。
这篇关于三JS立方体吐温JS基础知识的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!