javascript - 动态添加面到 Three.js 几何体

Question

我正在开发一些用于生成 3D 模型的 webgl 软件，并且依赖于动态几何。我观察到了一些非常奇怪的行为，我已经能够在 this jsfiddle 中隔离这些行为。 .

似乎在将几何体实例添加到场景后添加的任何新面，添加的任何新面都不会(正确)渲染。在线框模式下(如示例所示)，新几何体根本不渲染。当使用纹理 Material 时，我还观察到有时新的几何体不会根据相机的 Angular 而渲染。

Here's a video of that in action .

回到 jsfiddle，我使用现有的 Three.js 代码示例 (misc_exporter_obj.html) 作为支架，但在第 7 行我创建了一个通用函数来向几何图形添加三 Angular 形。 addGeometry 函数在启动时被调用，如果取消第 36 行的注释，您可以看到预期的结果应该是什么:

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 ) );

根据threejs guide on how to update things ，第 43-47 行尝试通过设置 verticesNeedUpdate 和 elementsNeedUpdate 标志来单击“变换三 Angular 形”按钮时添加新三 Angular 形:

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

我这样做错了吗？或者我应该提交错误报告？

谢谢。

消失的网格更新:

我可能已经发现了导致我的网格根据相机方向被删除的奇怪行为的原因。 This answer表明 Three.js 可能认为网格不在相机的视锥体内。

我猜测在尝试确定对象是否位于截锥体中时没有考虑新顶点，因此我只是禁用了剔除，因为正在绘制的对象是场景中的主要对象。

Answer 1

您想要向现有几何体添加面。

由于缓冲区无法调整大小，因此最好的解决方案是切换到 BufferGeometry ，预分配足够大小的缓冲区，并设置drawRange。请参阅this SO answer 。 This answer ，也是。

如果添加顶点，则需要重新计算边界球体才能使视锥体剔除正常工作。

geometry.computeBoundingSphere();

或者，正如您所说，您可以禁用视锥体剔除:

mesh.frustumCulled = false;

三.js.r.91