three.js学习笔记用Tween.js做动画

来源：互联网发布：系统网管软件编辑：程序博客网时间：2024/05/29 16:21

Tween.js 可以定义某个属性在两个值之间过渡。我们可以通过Tween.js控制我们的camera(相机)进行漫游或是控制物体或是粒子进行补间动画的操作。

添加补间动画

1.定义要控制的属性

var option = {px: camera.position.x,pz: camera.position.z};

我们这里控制camera(相机)的x,z轴坐标。

2.实例化tween对象

var tween = new TWEEN.Tween(option).to({        px: [-50, -40, -40, -50, -50, -50, -50, -50],pz: [-40, -40, -40, -40, -50, -50, -40, -40]}, 10000).onUpdate(function() {camera.position.x = this.px;camera.position.z = this.pz;}).delay(1000).start();

tween属性：.to 控制属性过渡的中间值 10000表示中间值个数有10000个

.update 控制过渡时候的操作

.delay 控制每次动画开始的时延

.start 开始动画

可以调用chain()函数使动画循环播放或是几个动画连续播放。

3.刷新动画

function render() {TWEEN.update();requestAnimationFrame(render);renderer.render(scene, camera);}

完整代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>three.js</title></head><body><script type="text/javascript" src="js/Three/three.js"></script><script type="text/javascript" src="js/tween/tween.min.js"></script><script>var renderer, scene, camera, light, mesh, cylinder, plane;var spotLight, sphereLightMesh;var invert = 1;var phase = 0;function init() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setClearColor(0xffffff);renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.lookAt(new THREE.Vector3(20, 0, 20));camera.position.set(-50, 20, -50);light = new THREE.AmbientLight(0xDDDDDD);scene.add(light);spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(10, 60, 20);spotLight.castShadow = true;scene.add(spotLight);document.body.appendChild(renderer.domElement);creatCube();render();}function creatCube() {var geometry = new THREE.CubeGeometry(4, 4, 4);var material = new THREE.MeshLambertMaterial({color: 0xff0000});mesh = new THREE.Mesh(geometry, material);mesh.castShadow = true;mesh.position.set(10, 10, 0);mesh.rotation.set(Math.PI / 4, 0, 0);scene.add(mesh);var geometry = new THREE.CylinderGeometry(2, 2, 8);var material = new THREE.MeshLambertMaterial({color: 0xff0000});cylinder = new THREE.Mesh(geometry, material);cylinder.position.set(-5, 10, 10);cylinder.rotation.set(Math.PI / 4, 0, 0);cylinder.castShadow = true;scene.add(cylinder);var plane_geometry = new THREE.CubeGeometry(40, 1, 40);var plane_material = new THREE.MeshLambertMaterial({color: 0xffffff});plane = new THREE.Mesh(plane_geometry, plane_material);plane.receiveShadow = true;plane.position.set(10, 2, 10);scene.add(plane);}function motionLight(light) {if (phase > 2 * Math.PI) {invert = invert * -1;phase -= 2 * Math.PI;} else {phase += 0.03;}light.position.z = +(7 * (Math.sin(phase)));light.position.x = +(14 * (Math.cos(phase)));if (invert < 0) {var pivot = 14;light.position.x = (invert * (light.position.x - pivot)) + pivot;}}function inittween() {var option = {px: camera.position.x,pz: camera.position.z};var tween = new TWEEN.Tween(option).to({px: [-50, -40, -40, -50, -50, -50, -50, -50],pz: [-40, -40, -40, -40, -50, -50, -40, -40]}, 10000).onUpdate(function() {camera.position.x = this.px;camera.position.z = this.pz;}).delay(1000).start();}            function render() {TWEEN.update();requestAnimationFrame(render);renderer.render(scene, camera);motionLight(spotLight);}init();inittween();</script></body></html>

fork me on github blog: https://chenjy1225.github.io/

0 0

three.js学习笔记 用Tween.js做动画

three.js学习笔记用Tween.js做动画