question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Updating mesh of TubeGeometry object

See original GitHub issue

Hi, I’m trying to create an animated tube, like a line that’s being drawn live. This involves adding new points to an existing path and then redrawing the object so that it looks like it’s being drawn.

However, I’ve struck a problem with the tube object I’m using: when I update the path points the mesh object doesn’t update on the screen, so it seems like I can’t modify it after it’s been created.

My 3d object creation is roughly like this:

var curve = new THREE.SplineCurve3([new THREE.Vector3(x, y, z)]);
var geometry = new THREE.TubeGeometry(curve, segments, 2, radiusSegments, closed);
geometry.dynamic = true;
var tubeMesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [new THREE.MeshBasicMaterial({color: 0xffffff, opacity: 1, transparent: true})]);
scene.add(tubeMesh);

And when I want to add to the path I’m doing it like this (but it seems a bit hacky so I’m open to other ways):

tubeMesh.children[0].geometry.path.points.push(new THREE.Vector3(x, y, z));
tubeMesh.children[0].geometry.verticesNeedUpdate = true;

However, when I make changes the object doesn’t seem to update on screen. Is it possible to do this with a Tube?

Issue Analytics

  • State:closed
  • Created 11 years ago
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
zhubenjiecommented, Sep 27, 2016

You are very 6

0reactions
ricardomfcoelhocommented, Oct 24, 2014

@mrdoob Obrigado!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Three.js Updating mesh of TubeGeometry object
And when I want to update the points. I'm doing it like this: tubeMesh.children[0].geometry.path.points[0] = new THREE.Vector3 ...
Read more >
Three.js Updating mesh of TubeGeometry object-three.js
You have only provided code fragments, but you probably need geometry.verticesNeedUpdate = true;. and geometry.dynamic = true;.
Read more >
How to update tubeGeometry geometry based in lineCurve ...
When I replace the mesh.geometry object by a new TubeGeometry instance, the changes are being reflected successfully. But I'd rather like to ...
Read more >
The Curve class and tube geometry in threejs
In can then make use of the copy method of the buffer geometry instance in the mesh object to copy this update geometry...
Read more >
Introduction to Computer Graphics, Section 5.2
A three.js mesh object requires a geometry and a material. ... One thing that you can do with it is create a tube...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found