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

Question

我想实现一个动画。

动画应该是一行移动到另一行。走线的过程中会有一些变形

两条直线的点有对应关系

如何用three.js实现？

我尝试使用tween.js.It作品。

    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()

Answer 1

我建议你用变形目标实现绿线的动画。这意味着绿线代表您的默认几何体，而蓝线代表变形目标（也称为混合变形）。然后，您可以通过将 morphTargetInfluences 参数从 0 调制为 1.

来动画化从绿色到蓝色的转换

变形目标是几何数据的一部分，在 BufferGeometry.morphAttributes property. Since multiple meshes can share the same geometry, the morphTargetInfluences 中定义属性属于像网格这样的 3D 对象。

建议你研究下官方例子webgl_morphtargets是如何实现的。您可以在线条上应用相同的原则。

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

Animate every point of a line to another line with three.js

animation

three.js