【Three.js】十一、three.js使用Tween.js

tween.js是一个轻量级js库，可用来实现一些动画效果。github地址：https://github.com/tweenjs/tween.js/.

cnpm安装方式：cnpm install @tweenjs/tween.js -S

使用方法：
1.创建补间

let size1 = {width: 10, height: 10, depth: 10};
let tween = new TWEEN.Tween(size1);

2.指定动画的最终状态

tween.to({width: 5, height: 5, depth: 5}, 1000); // 指定动画时间1s

3.指定onUpdate

tween.onUpdate(() => {
	// 给相关变化属性赋值
});

4.开始动画

tween.start();

5.调用Tween.update()

function animate() {
	requestAnimationFrame(animate);
	// [...]
	TWEEN.update();
	// [...]
}

*官方文档：https://github.com/tweenjs/tween.js/blob/master/docs/user_guide_zh-CN.md

示例：

import '../../stylus/index.styl'
import TWEEN from '@tweenjs/tween.js'
import * as THREE from 'three'
import {initStats,initThree,initTrackballControls} from "../../util/util"

function init() {
    let stats = initStats();
    let {camera, renderer, scene} = initThree();
    let trackballControls = initTrackballControls(camera, renderer);

    let light = new THREE.DirectionalLight(0xffffff);
    light.position.set(-20, 40, 30);
    scene.add(light);

    let ambientLight = new THREE.AmbientLight(0xcccccc);
    scene.add(ambientLight);

    let boxGeometry = new THREE.BoxBufferGeometry(10,10,10);
    let boxMaterial = new THREE.MeshStandardMaterial({
        color: 0xaa12233
    });
    let box = new THREE.Mesh(boxGeometry, boxMaterial);
    box.castShadow = true;
    scene.add(box);
    let size1 = {width: 10, height: 10, depth: 10};
    let size2 = {width: 5, height: 5, depth: 5};
    // 缩小
    let tween1 = new TWEEN.Tween(size1).to({width: 5, height: 5, depth: 5}, 1000)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(() => {
            if (size1.width <= 5) {
                tween2.start();
            }
            box.geometry = new THREE.BoxBufferGeometry(size1.width, size1.height, size1.depth);
        });
    // 放大
    let tween2 = new TWEEN.Tween(size2).to({width: 10, height: 10, depth: 10}, 1000)
        .easing(TWEEN.Easing.Quadratic.In)
        .onUpdate(() => {
            box.geometry = new THREE.BoxBufferGeometry(size2.width, size2.height, size2.depth);
            if (size2.width >= 10) {
                tween1.start();
            }
        });
    tween1.start();

    let render = () => {
        stats.update();
        trackballControls.update();
        renderer.render(scene, camera);
        TWEEN.update();
        requestAnimationFrame(render);
    }
    render();
}
init();

完整示例参考(src/pages/three_animation_demo)：https://github.com/MAXLZ1/threejs_demo