XYZLoader not loading colours

Describe the bug

When importing an XYZRGB point cloud, the pixels are all white instead of the expected colors.

The XYZLoader seems to be loading the values, and setting the colours, including calling geometry.setAttribute correctly, but the WebGLRenderer isn’t rendering the particles with their values.

To Reproduce

Steps to reproduce the behavior:

• Update the helix_201.xyz file to include RGB values after the XYZ values on each line: • Load the XYZ file using the XYZLoader • See that all the XYZ coordinates are white!

Code

helix_201.xyz with RGB values (all purple): https://github.com/elliottkember/three.js/blob/elliottkember-xyz-rgb/examples/models/xyz/helix_201.xyz

Loader implementation:

  const loader = new XYZLoader();
  loader.load("./helix.xyz", function (geometry) {
    geometry.center();

    const material = new THREE.PointsMaterial({ size: 0.1 });

    points = new THREE.Points(geometry, material);
    scene.add(points);
  });

Live example

https://elliottkember.github.io/three.js/examples/webgl_loader_xyz.html

Expected behavior

The dots should all be purple.

Screenshots

Platform:

• Device: Desktop
• OS: MacOS
• Browser: Chrome
• Three.js version: 123

[elliottkember]

I figured it out!

The example file has:

const material = new THREE.PointsMaterial( { size: 0.1 } );

What I needed was:

const material = new THREE.PointsMaterial( { size: 0.1, vertexColors: THREE.VertexColors } );

[mrdoob]

Yeah, I think that works 👍