Normal Maps in THREE.js

Question

I have been trying to make normal maps work in three.js, but to no avail. Although there are already questions asking this (including Three.js Normal Mapping forcing mesh to not render and How to make a normal map in THREE.js correctly?), none of them have been very helpful because they are outdated and the way of doing the normal maps no longer works (in r71, which is what I'm using, and which is the most recent as of this post). I have tried the following, but I do not know why it does not work. There are no errors, only a lack of visible changes when the normal map is used.

There is a JSFiddle of what I have tried. Also, the code of what I have tried:

renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var ambient = 0x050505,
    diffuse = 0x331100,
    specular = 0xffffff,
    shininess = 10,
    scale = 23;

scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);

camera.position.z = 0;
camera.position.y = 0;
camera.lookAt({
    x: 0,
    y: 0,
    z: 0
});
scene.add(camera);
camera.position.set(0, 100, 1000);
camera.lookAt(new THREE.Vector3(0, 0, 0));

scene = new THREE.Scene();

var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);

var light = new THREE.PointLight(0xffffff, 1);
light.position.copy(camera.position);
scene.add(light);

var plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), new THREE.MeshLambertMaterial({
    color: 0x22FF11,
    side: THREE.DoubleSide
}));
plane.position.set(0, 0, -500);
plane.receiveShadow = true;
scene.add(plane);

var cube = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50), new THREE.MeshPhongMaterial({
    color: 0xCC0000,
}));
//A picture I found on the internet:
var normalMap = THREE.ImageUtils.loadTexture('http://4.bp.blogspot.com/-nVnWCcT-VkY/VC2FnM6ZOmI/AAAAAAAAA4k/bWRniM20L_s/s1600/T_Wood512_N.jpg', undefined, function () {
    cube.material.normalMap = normalMap;
    renderer.render(scene, camera);
});
cube.position.set(0, 0, -250);
scene.add(cube);

renderer.render(scene, camera);

Is there something I am doing incorrectly or an up-to-date reference that I can use?

Falk Thiele · Accepted Answer · 2015-08-04T21:34:41.573

4

Normalmaps are working fine- load a texture and apply it via material.normalMap = texture;.

Regarding your jsfiddle:

Console Error: SecurityError: The operation is insecure.. You need to allow Cross-Origin loading when loading a file, add THREE.ImageUtils.crossOrigin = '';.
When applying the normalMap in your callback and have rendered the object before you need to tell three.js to update the material like so: cube.material.needsUpdate = true;

And there is your normalMap: http://jsfiddle.net/akpbvn9p/3/

edited Aug 04 '15 at 21:34

answered Aug 04 '15 at 21:16

Falk Thiele

4,424
2
17
44

1

You only need to set `cube.material.needsUpdate = true;` if you have previously rendered the object. Remove the call to `render()` in the last line of the program and you can remove `cube.material.needsUpdate = true;` from the callback, too. – WestLangley Aug 04 '15 at 21:32
Thanks for adding more information, your posts are very informative! I always hestitate about modifying the Askers example too much so that he doesnt get confused. – Falk Thiele Aug 04 '15 at 21:50
@FalkThiele Modify it as much as you like, that was just an example to show that I thought I couldn't get it working. And thanks! – Blubberguy22 Aug 05 '15 at 13:10
I also just realized that I'm setting the camera position and rotation twice. Oops (although it matters not). – Blubberguy22 Aug 05 '15 at 13:13
I know that this should be another question if asked with more detail, but is there a way to do this with displacement maps easily (like a property for the materials) or do I have to use shaders? – Blubberguy22 Aug 05 '15 at 13:30
This is the way to do it with displacement maps easily: http://threejs.org/examples/#webgl_materials_normaldisplacementmap ( Its a shader, but its all built in three.js). – Falk Thiele Aug 05 '15 at 13:44
@FalkThiele I thought so; thanks. I'm trying that now, hopefully I can get it to work too. EDIT: Got it, now to change the textures, geometries, etc. (http://jsfiddle.net/Blubberguy22/wk9cg8ab/10/) – Blubberguy22 Aug 05 '15 at 14:44
For future reference, I did normal, displacement, and AO maps here: http://jsfiddle.net/Blubberguy22/wk9cg8ab/25/ – Blubberguy22 Aug 05 '15 at 16:46

Normal Maps in THREE.js

1 Answers1