XYZLoader not loading colours

[elliottkember]

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 } );

[Mugen87]

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

BTW: The new coding style looks like so:

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

[mrdoob]

@Mugen87 Maybe we can use a xyz sample file with colors?

[Mugen87]

I could not include the xyz file I've used for testing so I went for the existing free helix asset. However, we could also add this in the example code to improve clarity:

const vertexColors = ( geometry.hasAttribute( 'color' ) === true );

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

[mrdoob]

Yeah, I think that works 👍