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
The document says you can't resize the buffer of BufferGeometry, I'm using Geometry. Are you suggesting switching to BufferGeometry? — JSideris
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 WestLangley · Accepted Answer · 2018-03-26T18:56:55

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

Dynamically adding faces to a three.js geometry

1 Answers