CODEWITHSUNDEEP
animationthree.js
wtyork
wtyork

Reputation: 132

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

I want to implement an animation.

The animation should be a line move to another line. There will be some deformation in the process of the line moving

There is a correspondence between the points of the two lines.

How to implements it with three.js?

I try to use the tween.js.It works.

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

point to point line to line

Upvotes: 3

Views: 486

Answers (1)

Mugen87
Mugen87

Reputation: 31026

I suggest you implement the animation of the green line with morph targets. Meaning the green line represents your default geometry whereas the blue line represents a morph target (also known as blend shape). You can then animate the transformation from green to blue by modulating the morphTargetInfluences parameter from 0 to 1.

Morph targets are part of the geometry data and defined in the BufferGeometry.morphAttributes property. Since multiple meshes can share the same geometry, the morphTargetInfluences property belongs to 3D objects like a mesh.

I suggest you study how the official example webgl_morphtargets is implemented. You can apply the same principles on lines.

Upvotes: 3

Related Questions