用Three.js在Autodesk Forge中用BufferGeometry渲染点云

Question

我试着用Autodesk Forge的查看器渲染点云。使用THREE.Geometry可以很好地工作，如这里所描述的https://forge.autodesk.com/blog/using-pointcloud-forge-viewer。在本文中，我们指定不能使用BufferGeometry。

但是，我想绝对确定是否有任何方法可以将PointCloud与BufferGeometry结合使用，而不必创建THREE.Geometry。我已经有了点的Float32Array数据和颜色的Uint8Array数据，所以把它们放在THREE.Vector3中感觉在这里开销很大。

从源https://autodeskviewer.com/viewers/latest/viewer3D.js中可以看到一些点云缓冲区(搜索createPointCloudBuffers(geometry) )。

编辑：

当尝试将THREE.BufferGeometry与THREE.PointCloud一起使用时：

const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(position, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(color, 3));
const pc = THREE.PointCloud(geometry, <material>);

我得到了以下信息：

Only THREE.Mesh can be rendered by the Firefly renderer. Use THREE.Mesh to draw lines. (查看https://autodeskviewer.com/viewers/latest/viewer3D.js中的renderBufferDirect函数)

编辑2：多亏了this comment，我才能解决上面的问题。我只需使用THREE.Mesh并设置isPoints=true

const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(position, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(color, 3));
geometry.isPoints = true;
const mesh = new THREE.Mesh(geometry, <material>);

但是，我拥有的一些位置数据以及颜色数据被保存为Uint8Array，然后上面的内容将导致WebGL出现以下错误：

ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0

转换为Float32Array将解决问题。通过这个额外的步骤是很好的，是否有任何方法可以不用将Uint8Array复制到Float32Array (使用Float32Array.from(<Uint8Array>))？

编辑3:

我意识到有可能支持Uint8Array和Uint16Array做以下工作：

geometry.attributes.position.bytesPerItem = <1 | 2>; // set 1 for Uint8Arrays and 2 for Uint16
geometry.attributes.position.normalize = true;

Answer 1

你可能很幸运！查看三个r71代码https://autodeskviewer.com/viewers/latest/three.js

通过搜索文本可以找到点云实现..。

THREE.PointCloud = function ( geometry, material ) {

注意输入是this.geometry。现在向下滚动几行，以找到同样显示对THREE.BufferGeometry支持的代码，这里.

if ( geometry instanceof THREE.BufferGeometry ) {

修改以下代码行：https://github.com/wallabyway/markupExt/blob/fcce2940379ffd9dc27065fa8dd9b34cd37f8ef0/docs/markupExt.js#L92-L96

从使用“THREE.Geometry”到“THREE.BufferGeometry”

像这样..。

var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array( [  -1.0, -1.0,  1.0, etc ]);
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( vertices, 3 ) );

本质上修改这个示例以使用BufferGeometry..。https://forge.autodesk.com/blog/3d-markup-icons-and-info-card

​

​

如果这有帮助，请告诉我。