使用tween创建动画
松琦
three中，你也可以使用TWEEN这个动画插件来创建动画。（关于TWEEN的基础知识， 你可以浏览这里 ：http://blog.csdn.net/qq408896436/article/details/53866240）
例子 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>THREE + TWEEN DEMO</title>
<style>
body{ margin: 0; padding: 0; overflow: hidden; }
</style>
</head>
<body>
<script src='js/three.js'></script>
<script src='js/Tween.js'></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0,0,10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('#000');
document.body.appendChild(renderer.domElement);
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3), new THREE.MeshBasicMaterial({
color : 'green'
}));
scene.add(cube);
//tween 动画 (下面的写法只能改变cube的某个属性，比如只能改变cube的position)
var tween = new TWEEN.Tween(cube.position)
.to({x : 3, y : 3, z : 3}, 1000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(function(){
})
.repeat(Infinity)
.yoyo(true)
.start();
//tween 动画 (能修改多个属性)
// var config = {x : 0, y : 0, z : 0, scaleX : 1, rotationX : 0}
// var tween = new TWEEN.Tween(config)
// .to({x : 3, y : 2, z : 3, scaleX : 4, rotationX : 20}, 1000)
// .easing(TWEEN.Easing.Elastic.InOut)
// .onUpdate(function(){
// cube.position.set( config.x, config.y, config.z );
// cube.scale.x = config.scaleX;
// cube.rotation.x = config.rotationX;
// })
// .repeat(Infinity)
// .yoyo(true)
// .start();
function updata(){
TWEEN.update();
renderer.render(scene, camera);
requestAnimationFrame(updata);
}
updata();
</script>
</body>
</html>
类似资料：