javascript-关于三个JS多维数据集的Tween JS基础
作者:互联网
我是Tween JS的新手,正在尝试制作一个简单的动画,使用Tween向右移动.
以下是我在init函数中的代码(我正在使用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();
多维数据集在那里,但补间不起作用.我有什么想念的吗?
解决方法:
以下是我对场景所做的操作.
>创建一个单独的render()函数
>将TWEEN代码放入您可以调用的函数中.您要在此功能开始时删除所有TWEEN.我不确定为什么,但是我是从教程代码中学到的.
>在TWEEN函数中,在更新时调用渲染函数.
>通过不间断的动画循环在动画中调用TWEEN.update.注意:每次更新TWEEN时都会调用render().
以下是框架代码.检查这是否适用于您的程序:
//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);
}
希望能帮助到你.
标签:tween,animation,three-js,javascript 来源: https://codeday.me/bug/20191029/1957934.html