CODEWITHSUNDEEP
javascriptthree.js
dc95
dc95

Reputation: 1359

THREE.meshphongmaterial Not Working - Giving Black Color

I am trying to use THREE.meshphongmaterial from this tutorial: http://solutiondesign.com/webgl-and-three-js-texture-mapping/

But it is not working and giving black color. Here is the jsfiddle for it: http://jsfiddle.net/8hrk7mu6/12/

Problem is in line 32:

var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );

Why is it not working? If I use THREE.MeshNormalMaterial, then it works. 

var material = new THREE.MeshNormalMaterial();

Later, I want to use texture from an image in my code. That is not working either. Only THREE.MeshNormalMaterial is working. Why?

Upvotes: 15

Views: 17309

Answers (4)

PartialFlavor_55KP
PartialFlavor_55KP

Reputation: 157

Setting the emissive value was recommended by Terg's Three.js Learning QuickStart. The less lights you have the faster it renders.

Upvotes: 0

Prathamesh Shanbhag
Prathamesh Shanbhag

Reputation: 1

You will need to add some Ambient Light or Point Light since, MeshPhongMaterial reacts to Light & hence is only visible in presence of Light, for best results/visibility use below code:

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 4;

scene.add(ambientLight, pointLight);

Upvotes: 0

mtkopone
mtkopone

Reputation: 6433

Adding some ambient light to everything in the scene is the simplest solution:

scene.add(new THREE.AmbientLight(0x404040))

Upvotes: 1

dc95
dc95

Reputation: 1359

Turns out it is necessary to add light. Without light, meshphongmaterial gives black color.

So I had to add something like this:

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);

Got it from this link: https://github.com/mrdoob/three.js/issues/2766

Upvotes: 47

Related Questions