Dynamically adding faces to a three.js geometry

Question

I'm working on some webgl software for generating 3D models and am relying on dynamic geometry. I've observed some very bizarre behavior that I've been able to isolate in this jsfiddle.

It seems that any new faces added after a geometry instance has been added to the scene, any new faces added will not be rendered (properly). In wireframe mode (as in the example), the new geometry is not rendered at all. When using textured materials, I also observed that sometimes new geometry is not rendered depending on the angle of the camera.

Here's a video of that in action.

Back to the jsfiddle, I used an existing three.js code sample (misc_exporter_obj.html) as a scaffold but on line 7 I made a generic function to add a triangle to the geometry. The addGeometry function is called on startup, and if you uncomment line 36 you can see what the expected result should have been:

var material = new THREE.MeshBasicMaterial( { wireframe : true} );
	
geometry = new THREE.Geometry();
addTriangle(-50, -50, 50, -50, 50, 50);
//addTriangle(-50, -50, -50, 50, 50, 50); // UNCOMMENT TO TEST WHAT FINAL OUTPUT SHOULD LOOK LIKE.

scene.add( new THREE.Mesh( geometry, material ) );

And as per the threejs guide on how to update things, lines 43-47 attempt to add a new triangle when you click the "transform triangle" button by setting the verticesNeedUpdate and elementsNeedUpdate flags:

function addTriangleFace(){
    addTriangle(-50, -50, -50, 50, 50, 50);
    geometry.verticesNeedUpdate = true;
    geometry.elementsNeedUpdate = true;
}

Am I doing this wrong? Or should I submit a bug report?

Thanks.

Disappearing Mesh Update:

I may have discovered the cause of the weird behavior that was causing my mesh to be erased based on camera orientation. This answer suggests that Three.js may have thought that the mesh was not inside the camera's frustum.

I'm guessing the new vertices were not being considered when trying to determine whether the object was in the frustum, so I just disabled culling since the object being drawn is the main object in the scene.

Read how to update things again. You can't resize buffers. The doc explains how you can use BufferGeometry, instead. — WestLangley
– WestLangley, Commented Mar 23, 2018 at 23:08
The document says you can't resize the buffer of BufferGeometry, I'm using Geometry. Are you suggesting switching to BufferGeometry? — JSideris
– JSideris, Commented Mar 23, 2018 at 23:49
A BufferGeometry is created behind-the-scenes when you use Geometry. You can't resize the Geometry.vertices array either. Switch to BufferGeometry, preallocate sufficiently-sized buffers, and set the drawRange. You can alter the content of any buffers. — WestLangley
– WestLangley, Commented Mar 24, 2018 at 0:39

WestLangley · Accepted Answer · 2018-03-26 18:56:55Z

1

You want to add faces to an existing geometry.

Since buffers can't be resized, the best solution is to switch to BufferGeometry, preallocate sufficiently-sized buffers, and set the drawRange. See this SO answer. This answer, too.

If you add vertices, you will need to recompute the bounding sphere for frustum culling to work correctly.

geometry.computeBoundingSphere();

Or, as you said, you can disable frustum culling:

mesh.frustumCulled = false;

three.js.r.91

answered Mar 26, 2018 at 18:56

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically adding faces to a three.js geometry

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related