CODEWITHSUNDEEP
three.js
Typedef
Typedef

Reputation: 169

Three.js normalmap displacement with light

I want to render a sphere with displacement mapping with the normalmap shader of Three.js. I also use a PointLight in my scene.

The problem is that I cannot get my displacement sphere to be lighted correctly. In fact, if I omit the texture, the sphere is all black with normalmap shader material, but with simple meshLambertMaterial it is correctly lighted. (see image below)

I tried to do a multimaterial mesh with both the normalmap/displacement shader and the meshLambertMaterial but the result is not conclusive.

Did I do something wrong in the creation of the shader material (see code below) ?

var specularColor = 0xcccccc;
var diffuseColor = 0xffffff;
var ambiantColor = 0x888888;

var shader = THREE.ShaderLib["normalmap"];
var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

uniforms["enableAO"].value = 0;
uniforms["enableDiffuse"].value = 1;
uniforms["enableSpecular"].value = 1;
uniforms["enableReflection"].value = 0;
uniforms["enableDisplacement"].value = 1;
uniforms["tNormal"].value = normalTexture;
uniforms["tSpecular"].value = specularTexture;
uniforms["uNormalScale"].value = 1.0;
uniforms["tDisplacement"].value = heightTexture;
uniforms["uDisplacementScale"].value = 5;
uniforms["uDiffuseColor"].value.setHex(diffuseColor);
uniforms["uSpecularColor"].value.setHex(specularColor);
uniforms["uAmbientColor"].value.setHex(ambiantColor);
uniforms["uShininess"].value = 1;

var parameters = {
    fragmentShader : shader.fragmentShader,
    vertexShader : shader.vertexShader,
    uniforms : uniforms,
    lights : true
};
var material = new THREE.ShaderMaterial(parameters);
var geometry = new THREE.SphereGeometry(radius, 100, 100);
geometry.computeTangents();

var mesh = new THREE.Mesh(geometry, material);

enter image description here enter image description here

Upvotes: 1

Views: 1315

Answers (1)

WestLangley
WestLangley

Reputation: 104783

One thing is obviously wrong. It should be

uniforms[ "uNormalScale" ].value.set( 1.0, 1.0 );

three.js r.58

Upvotes: 2

Related Questions