将面动态添加到 three.js 几何体答案

【问题标题】：Dynamically adding faces to a three.js geometry将面动态添加到 three.js 几何体
【发布时间】：2018-03-27 02:56:55
【问题描述】：

我正在开发一些用于生成 3D 模型的 webgl 软件，并且依赖于动态几何。我在this jsfiddle 中发现了一些非常奇怪的行为。

似乎在将几何实例添加到场景后添加的任何新面，都不会（正确地）渲染添加的任何新面。在线框模式下（如示例中），根本不渲染新几何体。在使用纹理材质时，我还观察到有时不会根据相机的角度渲染新的几何图形。

Here's a video of that in action.

回到 jsfiddle，我使用现有的 three.js 代码示例 (misc_exporter_obj.html) 作为支架，但在第 7 行，我创建了一个通用函数来向几何图形添加一个三角形。 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 标志单击“变换三角形”按钮时添加一个新三角形：

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

我做错了吗？还是我应该提交错误报告？

谢谢。

消失的网格更新：

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

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

【问题讨论】：

再次阅读how to update things。您不能调整缓冲区的大小。该文档解释了如何改用BufferGeometry。
文档说不能调整BufferGeometry的缓冲区大小，我用的是Geometry。您是否建议切换到BufferGeometry？
BufferGeometry 是在您使用 Geometry 时在幕后创建的。您也无法调整 Geometry.vertices 数组的大小。切换到BufferGeometry，预分配足够大的缓冲区，并设置drawRange。您可以更改任何缓冲区的内容。
谢谢。这似乎正是我所需要的。

标签： javascript three.js

【解决方案1】：

您想将面添加到现有几何体。

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

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

geometry.computeBoundingSphere();

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

mesh.frustumCulled = false;

三个.js.r.91

【讨论】：