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

Question

我正在尝试使用Autodesk Forge的查看器渲染点云。如此处https://forge.autodesk.com/blog/using-pointcloud-forge-viewer所述，使用THREE.Geometry可以正常工作。在本文中，指定不能使用BufferGeometry。

但是，我想绝对确定是否有任何方法可以将PointCloud与BufferGeometry结合使用而不必创建THREE.Geometry。我已经有了用于点的数据Float32Array和用于颜色的数据Uint8Array，因此将它们放入THREE.Vector3的感觉很麻烦。

在源https://autodeskviewer.com/viewers/latest/viewer3D.js中有提到点云缓冲区（搜索createPointCloudBuffers(geometry)。

编辑：

当尝试将THREE.PointCloud与THREE.BufferGeometry配合使用时：

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

让我知道是否有帮助