three.js 使用tween.js 实现完整飞线动画

是的，three.js和tween.js可以一起使用，实现复杂的动画效果，包括飞线动画。以下是一个简单的例子，演示了如何使用three.js和tween.js创建一条飞线动画：

// 创建three.js场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建飞线路径
var curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(-5, 5, 0),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(5, -5, 0),
    new THREE.Vector3(10, 0, 0)
]);

// 创建飞线材质
var material = new THREE.LineBasicMaterial({ color: 0xffffff });

// 将飞线路径转换为几何体
var geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints(50);

// 创建飞线网格
var line = new THREE.Line(geometry, material);
scene.add(line);

// 创建飞线动画
var tween = new TWEEN.Tween({t:0})
    .to({t:1}, 5000) // 5秒钟
    .onUpdate(function() {
        // 根据tween的进度计算飞线的位置
        var position = curve.getPoint(this.t);
        // 更新飞线网格的位置
        line.position.copy(position);
    })
    .start();

// 渲染场景
function render() {
    requestAnimationFrame(render);
    TWEEN.update(); // 更新tween动画
    renderer.render(scene, camera);
}
render();

在这段代码中，我们首先创建了一个three.js场景、相机和渲染器。然后，我们创建了一个CatmullRomCurve3曲线，用于定义飞线路径，并将其转换为three.js几何体。接下来，我们创建了一个TWEEN.Tween对象，将其起始值设置为0，结束值设置为1，表示飞线动画的进度。在Tween对象的 onUpdate 回调函数中，我们根据飞线路径计算当前进度对应的位置，并将飞线网格的位置更新为该位置。最后，我们创建了一个渲染函数，用于在每帧更新Tween动画和渲染场景。

希望这个例子可以帮助你了解如何使用three.js和tween.js创建飞线动画。