threejs 缓冲几何和线框答案

【问题标题】：threejs buffergeometry and wireframethreejs 缓冲几何和线框
【发布时间】：2016-07-13 23:17:10
【问题描述】：

是否可以为THREE.BufferGeometry 绘制线框？我不认为threejs支持这个，你可以在threejs源中将_gl.TRIANGLES更改为_gl.LINES（或LINES_STRIP），结果会很奇怪。

http://oi40.tinypic.com/15tsux.jpg （缓冲几何在底部）

github上还有一个老问题，没有提供解决方案 https://github.com/mrdoob/three.js/issues/1275

需要做什么才能启用对带有THREE.BufferGeometry 的线框的支持？我想尝试一下实现它，但我不确定需要做什么。

【问题讨论】：

很遗憾我没有足够的积分来添加“threejs”标签，很抱歉。

标签： three.js webgl buffer-geometry

【解决方案1】：

基本上需要一个用于将网格格式的缓冲几何转换为线格式的缓冲几何的实用程序。

【讨论】：

计划做某种WireframeGeometyHelper。

【解决方案2】：

我花了一些时间在上面（目前用于未索引的三角形列表），这很容易。

var wireframe_pos = new Float32Array( positionArray.length * 2 );
for( var ii = 0; ii < positionArray.length; ii += 9 ) {
  wireframe_pos[ ii * 2 ] = positionArray[ ii ];
  wireframe_pos[ ii * 2 + 1 ] = positionArray[ ii + 1 ];
  wireframe_pos[ ii * 2 + 2 ] = positionArray[ ii + 2 ];

  wireframe_pos[ ii * 2 + 3 ] = positionArray[ ii + 3 ];
  wireframe_pos[ ii * 2 + 4 ] = positionArray[ ii + 4 ];
  wireframe_pos[ ii * 2 + 5 ] = positionArray[ ii + 5 ];

  wireframe_pos[ ii * 2 + 6 ] = positionArray[ ii + 3 ];
  wireframe_pos[ ii * 2 + 7 ] = positionArray[ ii + 4 ];
  wireframe_pos[ ii * 2 + 8 ] = positionArray[ ii + 5 ];

  wireframe_pos[ ii * 2 + 9 ] = positionArray[ ii + 6 ];
  wireframe_pos[ ii * 2 + 10 ] = positionArray[ ii + 7 ];
  wireframe_pos[ ii * 2 + 11 ] = positionArray[ ii + 8 ];

  wireframe_pos[ ii * 2 + 12 ] = positionArray[ ii + 6 ];
  wireframe_pos[ ii * 2 + 13 ] = positionArray[ ii + 7 ];
  wireframe_pos[ ii * 2 + 14 ] = positionArray[ ii + 8 ];

  wireframe_pos[ ii * 2 + 15 ] = positionArray[ ii ];
  wireframe_pos[ ii * 2 + 16 ] = positionArray[ ii + 1 ];
  wireframe_pos[ ii * 2 + 17 ] = positionArray[ ii + 2 ];
}

attributes[ "position" ] = { itemSize: 3, array: wireframe_pos, numItems: wireframe_pos.length };

说实话，我对这个解决方案并不完全满意，因为位置数组的大小是原始数组的两倍。感觉太重了。有什么更好的方法建议吗？

【讨论】：