I’ve been playing around with a JSFiddle that is based on the fat lines three.js example; this fiddle differs from the original example in that the lines are animated. I understand what’s happening in the code, but I’m struggling to understand how I could use the technique for rendering fat lines used in this example to create a trail for a moving object.
I’m currently creating the object trails like this:
getTrail() {
const trailGeometry = new THREE.Geometry();
for (var i = 0; i < this.mass.trailVertices; i++)
trailGeometry.vertices.push(
new THREE.Vector3().copy(this.getObjectByName('Main').position)
);
const trailMaterial = new THREE.LineBasicMaterial({
color: this.mass.color
});
const trail = new THREE.Line(trailGeometry, trailMaterial);
trail.name = 'Trail';
trail.frustumCulled = false;
this.add(trail);
}
To update the trails I run the following code every time the render loop runs:
draw(x, y, z) {
const main = this.getObjectByName('Main');
const trail = this.getObjectByName('Trail');
main.position.set(x, y, z);
if (trail !== undefined) {
trail.geometry.vertices.unshift(new THREE.Vector3().copy(main.position));
trail.geometry.vertices.length = this.mass.trailVertices;
trail.geometry.verticesNeedUpdate = true;
}
}
Is it possible to create motion trails for an object with fat lines and if so how would I go about it?