Three.js - ply files - why colorless?

Question

I am using Three.js's example in the directory:

three.js/examples/webgl_loader_ply.html

And I just swapped their .ply file with mine (made with Blender).

In Blender, I went Vertex Paint > and painted vertices. Before exporting to .ply, I made sure that all checkboxes where checked. And scale is 100.

But the .ply model renders as blue in the three.js's example. (just like the default example). And apparently it is blue because of this code in the example html file:

var geometry = event.content;
var material = new THREE.MeshPhongMaterial( { color: 0x0055ff, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );

I was 100% sure that ply files have color values saves as well. But, what am I supposed to do now if that code makes my model blue? Or did I do something wrong in Blender?

I am totally not familiar with Three.js and webGL because I started to learn it just yesterday. Can anyone enlighten me on what is going on and what to do next?

Answer 1

i was missing this property vertexColors: THREE.VertexColors. All was fine with Blender and the code apart from the property. It works as expected now.

Here is how the line of code should look like:

var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200, vertexColors: THREE.VertexColors} );