Three.js rope / cable effect - animating thick lines

Question

With Three.js I want to create the effect of an object swinging from a cable or rope. It doesn't require real physics as the "swinging" object simply follows a fixed animation. The easiest solution is using the THREE.Line, however the problem is that THREE.Line can only be 1px thick and looks kinda awful.

In the three.js examples there is a "fat lines" example :

https://threejs.org/examples/?q=lines#webgl_lines_fat

however the problem is that once I have created the line using LineGeometry() I cannot figure out how to animate it.

The only solution I have found so far is to delete then create a new line every single frame, which works but seems like a really uneconomical, poorly optimized way to do it.

Does anyone know of a better way to either animate Line Geometry without having to delete and replace each frame? Or is there another method within three.js which would allow me to create thicker animated lines?

Thanks!!

Answer 1

I actually have a small project where I animate a bulb swinging along some rope. You can access it here, the functions I'm talking about below are in helperFns.js.

Actually, what I basically do is create my attached object separately :

let geometry = new THREE.SphereGeometry( 1, 32, 32 );
var material = new THREE.MeshStandardMaterial({color:0x000000,emissive:0xffffff,emissiveIntensity:lightIntensity});
bulb = new THREE.Mesh( geometry, material );
light = new THREE.PointLight(0xF5DCAF,lightIntensity,Infinity,2)
light.power = lightIntensity*20000
light.position.set(0,length*Math.sin(theta),z0-length*Math.cos(theta))
light.add(bulb)
light.castShadow = true;
hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.1 );
scene.add(hemiLight)
scene.add(light)

I then add a spline connected to it :

// Create the wire linking the bulb to the roof
var curveObject = drawSpline(light.position,{x:0,y:0,z:z0},0xffffff);
scene.add(curveObject)

Where drawSpline is the following function :

// Build a spline representing the wire between the roof and the bulb. The new middle point is computed as the middle point shifted orthogonally from the lign by shiftRatio
function drawSpline(beginning,end,clr){
    // Compute y sign to know which way to bend the wire
    let ySign = Math.sign((end.y+beginning.y)/2)
    // Compute the bending strength and multiply per Math.abs(beginning.y) to ensure it decreases as the bulb gets closer to the theta = 0 position, and also to ensure
    // that the shift is null if thete is null (no discontinuity in the wire movement)
    let appliedRatio = -shiftRatio*Math.abs(beginning.y)
    // Compute middle line position vector and the direction vector from the roof to the bulb
    let midVector = new THREE.Vector3( 0, (end.y+beginning.y)/2, (end.z+beginning.z)/2 )
    let positionVector = new THREE.Vector3(0,end.y-beginning.y,end.z-beginning.z)
    // Compute the orthogonal vector to the direction vector (opposite sense to the bending shift)
    let orthogVector = new THREE.Vector3(0,positionVector.z,-positionVector.y).normalize() 


    // Compute the curve passing by the three points
    var curve = new THREE.CatmullRomCurve3( [
        new THREE.Vector3( beginning.x, beginning.y, beginning.z ),
        midVector.clone().addScaledVector(orthogVector,ySign*appliedRatio),
        new THREE.Vector3( end.x, end.y, end.z ),
    ]);

    // Build the curve line object
    var points = curve.getPoints( 20 );
    var geometry = new THREE.BufferGeometry().setFromPoints( points );
    var material = new THREE.LineBasicMaterial( { color : clr } );

    // Create the final object to add to the scene
    var curveObject = new THREE.Line( geometry, material );
    return curveObject;
}

It creates the CatmullRomCurve3 interpolating the 3 points (one fix end at (0, 0, 0), one middle point to apply the bend, and the bulb position. You can actually start with a straight line, and then try to compute some curve.
To do so, you want to get the vector orthogonal to the line and shift the line (on the good side) along this vector.

And finally, at each animate() call, I redraw the spline for the new position of the bulb :

scene.children[2] = drawSpline(light.position,{x:0,y:0,z:z0},0xffffff)

Tell me if there is a point you do not get, but it should help for your problem.

Answer 2

Just wanted to post a more detailed version of West Langleys great reply. To animate a THREE Line2 you need to use the commands :

line.geometry.attributes.instanceStart.setXYZ( index, x, y, z ); 
line.geometry.attributes.instanceEnd.setXYZ( index, x, y, z );

What confused me was the index value - rather than thinking about a Line2 as being vertex points (the method used for creating the line) you need to think of a Line2 as being made of separate individual lines between 2 sets of points... so each line has a Start point and and an End point.

A "W" is therefore NOT defined as 5 vertices but by 4 lines. So you can "split" a Line2 by setting a different Start point to the previous lines End point. The index is the number of lines that make up your object. In my case I have two lines forming a V shape... so I set my index to 1 to affect the end of line 0 and the start of line 1, as in West's example :

var index = 1;
line.geometry.attributes.instanceEnd.setXYZ( index - 1, x, y, z );
line.geometry.attributes.instanceStart.setXYZ( index, x, y, z );

And then you just need to update the line using :

line.geometry.attributes.instanceStart.data.needsUpdate = true;

Thanks again to West for this really useful answer. I'd never have guessed this as you cannot see these variables when you look at the Line2 object properties. Very useful info. I hope it helps someone else at some point.