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

时间:2018-03-23 21:56:32

标签: javascript three.js

我正在开发一些用于生成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可能认为网格不在镜头的平截头体内。

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

1 个答案:

答案 0 :(得分:1)

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

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

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

geometry.computeBoundingSphere();

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

mesh.frustumCulled = false;

three.js.r.91