redrubia
redrubia

Reputation: 2366

Three JS Phong Material not showing even with Ambient Light on Custom Mesh

Here I'm creating a lined object through forming a Mesh, then applying a MeshPhongMaterial.

Have set my scene, and created a mesh object where I apply the Phong Material to. However the material itself is not evident.

  1. Is this potentially due to the way I'm creating vertices? Perhaps there is a complexity in the material (try adding wireframe to view complexity)
  2. I have added scene and ambient lighting.

I've made a demo of this here. Here is a snippet of the material itself

const material = new THREE.MeshPhongMaterial({
    color: 0xFF0000,    // red (can also use a CSS color string here)
    shininess: 150,
    side: THREE.DoubleSide,
    metalness: 0.5,
    emissive: 'red'
});

Upvotes: 1

Views: 1397

Answers (1)

M -
M -

Reputation: 28502

That's because your geometry doesn't have normals, and PhongMaterial needs normals to calculate its color. Simply adding the default [0, 0, 1] normal in you xyzSet() function renders the red color you're expecting:

g.normals[ posIdx ]  = 0;
g.normals[ posIdx + 1 ]  = 0;
g.normals[ posIdx + 2 ]  = 1.0;

enter image description here

Upvotes: 1

Related Questions