如何有效地将THREE.Geometry转换为ArrayBuffer，File或Blob？

Question

我想移动一段我的代码，我在其中构建一个THREE.Geometry对象到HTML5 Web Worker 。

因为我不想将它序列化为字符串（出于明显的性能目的），我想将它转换为可传输的对象，如ArrayBuffer，File或Blob，所以我可以“通过引用”传递它。

您是否知道将THREE.Geometry转换为其中一个对象的有效方法？

Answer 1

最有效的方法是使用现有的几何缓冲区，例如：

geometryGroup.__vertexArray
geometryGroup.__normalArray

它们是在WebGLRenderer.initMeshBuffers中创建的。

这个怎么运作：

1. 创建一个Worker并使用importScripts("/js/lib/mrdoob-three.js-35db421/build/three.js");导入three.js importScripts("/js/lib/mrdoob-three.js-35db421/build/three.js");

2. 在工作器中，您将创建要处理的几何体的另一个实例。

3. 在主renderer.render(scene, camera);触发一个初始渲染renderer.render(scene, camera); 现在缓冲区可用了......

4. 将所需的缓冲区从主线程发送到worker

5. 在工作线程上对几何进行艰苦的工作

6. 手动（在threejs中不支持）填充所需的缓冲区（请参阅WebGLRenderer.setMeshBuffers)例如：

    var vertexArray = new Float32Array(vertexBuffer); var normalArray = new Float32Array(normalBuffer); var vertices : Array = geometry.vertices; var obj_faces : Array = geometry.faces; var offset = 0; var offset_normal = 0; for (f in 0...obj_faces.length) { var face = obj_faces[ f ]; var v1 = vertices[ face.a ]; var v2 = vertices[ face.b ]; var v3 = vertices[ face.c ]; var v4 = vertices[ face.d ]; vertexArray[ offset ] = v1.x; vertexArray[ offset + 1 ] = v1.y; vertexArray[ offset + 2 ] = v1.z; vertexArray[ offset + 3 ] = v2.x; vertexArray[ offset + 4 ] = v2.y; vertexArray[ offset + 5 ] = v2.z; vertexArray[ offset + 6 ] = v3.x; vertexArray[ offset + 7 ] = v3.y; vertexArray[ offset + 8 ] = v3.z; vertexArray[ offset + 9 ] = v4.x; vertexArray[ offset + 10 ] = v4.y; vertexArray[ offset + 11 ] = v4.z; offset += 12; } 

7. 将缓冲区发送回主线程并在那里更新几何体：

    var geometryGroup = mesh.geometry.geometryGroupsList[0]; var _gl = renderer.context; _gl.bindBuffer(_gl.ARRAY_BUFFER, geometryGroup.__webglVertexBuffer ); _gl.bufferData(_gl.ARRAY_BUFFER, transferVertexArray, _gl.DYNAMIC_DRAW ); 

如果您在几何上进行复杂的操作，那么效果很好。 了解WebGLRenderer如何创建和使用WebGLRenderer非常重要。