使用three.js将线的每个点动画到另一条线

Question

我想要实现一种动画效果。

这个动画效果是一条线移动到另一条线上。在线移动的过程中会有一些变形。

这两条线的点是对应的。

如何使用three.js来实现它呢？

我尝试使用tween.js，它可以实现。

    const material = new THREE.LineBasicMaterial({ color: 0x0000ff })
    const geometry = new THREE.BufferGeometry().setAttribute('position',
        new THREE.Float32BufferAttribute([-2, 0, 0, -0.5, 0, -0.5, 0, 0, -2], 3))
    const line = new THREE.Line(geometry, material)

    var position2 = new Float32Array([5, 0, 0, 1, 1, 1, 0, 0, 5])
    setupObjectPositionTween(line, geometry.attributes.position.array, position2,
        10000, 0, TWEEN.Easing.Linear.None)      // duration, delay, easing
    scene.add(line)

    
    function setupObjectPositionTween(object, source, target, duration, delay, easing) {
        new TWEEN.Tween(source)
        .to(target, duration)
        .delay(delay)
        .easing(easing)
        .onUpdate(function () {
            // console.log(object,source,target)
            object.geometry.attributes.position.array = source
            object.geometry.attributes.position.needsUpdate=true
        })
        .start()
    }

and in the render function

    TWEEN.update()

- wtyork

Answer 1

我建议您使用变形目标来实现绿色线条的动画。这意味着绿色线条代表默认几何体，而蓝色线条代表一个变形目标（也称为混合形状）。然后，通过调节morphTargetInfluences参数从0到1，可以将其从绿色转换为蓝色。

变形目标是几何数据的一部分，并在BufferGeometry.morphAttributes属性中定义。由于多个网格可以共享相同的几何体，因此morphTargetInfluences属性属于像网格这样的3D对象。

我建议您学习官方示例webgl_morphtargets的实现方式。您可以将相同的原则应用于线条。

- Mugen87