用不同的颜色为每个点着色 Threejs答案

【问题标题】：Color each point in different color Threejs用不同的颜色为每个点着色 Threejs
【发布时间】：2022-01-24 12:51:42
【问题描述】：

我有点和颜色（r，g，b）。我需要为一点使用一种颜色。我这样做了

    const vertices = new Float32Array(data.points);
    const colors = new Float32Array(data.colors)
    geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
    const material = new THREE.PointsMaterial({color: colors});
    const pointCloud = new THREE.Points( geometry, material)
    this.scene.clear();
    this.scene.add( pointCloud );
    this.renderer.render(this.scene, this.camera);

这样，我得到了白点。如果我使用：

const material = new THREE.PointsMaterial( { vertexColors: true } );

我收到了这个错误：

[.WebGL-0x2e2bb1a84c00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1

【问题讨论】：

看起来您的 colors 数据包含 0..255 范围内的整数值，而它必须是 0..1 范围内的浮点数。 vertexColors: true 是一个正确的选项。
一种选择是将所有值转换为范围 0..1，类似于 data.colors.map(d => {return d / 255.0})。另一种选择是将BufferAttribute的第三个参数设置为true：new THREE.BufferAttribute( colors, 3, true )，如果colors是UInt8Array。
谢谢！我尝试了这两种变体，但我也遇到了这个错误：[.WebGL-0x2e2bb2456c00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1
确保colors 和points 数组的长度相同。对于这种情况，顶点值和颜色值之间存在一对一的匹配。
@Helen 你能分享你创建data.points 和data.colors 的代码吗？听起来它们的长度不一样。

标签： javascript colors three.js points vertex

【解决方案1】：

谢谢你:) 首先，我需要使用从 0 到 1（而不是 0 到 255）的颜色。然后我需要得到相同长度的数组。我需要使用 { vertexColors: true }。

【讨论】：