从draco解码点云时的颜色问题

Question

我有一个Draco ply文件，它是二进制格式的。我想在three.js中创建一个彩色点云。

function plyDecoder(drcMesh){
    dracoLoader.decodeDracoFile(drcMesh,function(bufferGeometry){
    bufferGeometry.computeFaceNormals();
    const material = new THREE.PointsMaterial( {size: 0.015} );
    console.log(material.Points)
    material.vertexColors = true;
    console.log("decoder!!")
    var geometry;
    geometry = new THREE.Points(bufferGeometry, material);
    geometry = setGeometryPosition(geometry);
    scene.add(geometry)});
}

它工作得很好，除了一件事。颜色。一切都是红黑相间的。我也不知道为什么。这通常是一个点云，有一些颜色，有点白色和蓝色。

有什么问题吗？

​

​

Answer 1

bufferGeometry包含“color”属性，但是Draco的值在0 . 255之间规范化，而PointMaterial着色器则期望颜色在0.因此，有一个不匹配，通常导致纯白色，1，1。红色，可能只是你使用的材质着色器，整体颜色导致了红色。

要解决这个问题，请尝试这样做:在从Draco解码器获得几何图形后，将所有颜色归一化(除以255)到0范围。1.0如下所示：

return new Promise((resolve) => {
// ...fetch buffer here, & use async/await etc...

    dracoLoader.decodeDracoFile(buffer, geometry => {
        const col = geometry.attributes.color.array;
        col.forEach( (a,i) => { col[i] /= 255 });
        resolve(geometry);
    })

现在你有了你的几何图形更新的颜色，给它点材质着色，像这样.

const material = new THREE.PointsMaterial(
    { size:3, 
      sizeAttenuation:false,
      vertexColors: true
    });
const points = new THREE.Points(geometry, material);

希望这能帮上忙！