Three.js: THREE.Points vertex color not working when geometry is from mesh.

[noisiak]

Description of the problem

When creating a THREE.Points() using geometry from a mesh, the vertex colors aren't working and the points are displayed all in white (instead of random colors, as defined in example below).

Interestingly, the points do show random colors when the geometry is not related to a mesh but instead is a new object.

Example here:

• jsfiddle

Three.js version

• [ ] Dev
• [x] r99
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [ ] Windows
• [x] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

Macbook Pro 2018

[Mugen87]

This issue is actually a duplicate of #11900.

Instances of Geometry are internally converted to BufferGeometry. The conversion depends on the type of 3D object (Mesh, Line, Points). Since the renderer encounters the mesh first, it does not respect the color information in Geometry.colors. Since your THREE.Points object uses the same internal BufferGeometry, it has no vertex color information.

The workaround (and maybe the solution since Geometry is going to be deprecated) is using BufferGeometry: https://jsfiddle.net/2ymv5u3s/5/

[noisiak]

Got it! Thank you @Mugen87 !!
Never thought that could be the issue. I am going to be using buffer geometry from now on then :)
👍