Three.js - Extreme shadow on face of mesh

Question

I've created a chest model using blender, created a handpainted texture for it and set the whole thing up in an environment rendered with Three.js. The chest front face however has a unusually extreme shadow:

enter image description here

Here's my Renderer setup:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
return renderer;

This is the light source (in the screenshot, it's the only light source) causing this shadow:

var envLight = new THREE.PointLight(color, 0.5, 320);
envLight.position.set(0, 80, zPos);
return envLight;

Material setup:

var material = new THREE.MeshPhongMaterial();
//diffuse texture setup
material.map = THREE.ImageUtils.loadTexture(textureURL);
material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping;
material.map.repeat.set(repeatX, repeatY);
// specular map setup
material.specularMap = THREE.ImageUtils.loadTexture(specularMapURL);
material.specularMap.wrapS = material.specularMap.wrapT = THREE.RepeatWrapping;
material.specularMap.repeat.set(repeatX, repeatY);
material.specular = that.specularLightingColor;
return material;

The mesh is created using this material together with the JSON data containing the geometry and UV mapping exported from Blender. I use THREE.JSONLoader to get the data at runtime. Here's a screenshot from blender showing the mesh and UV map unwrapped, it seems to be an issue with the selected face as it matches the exact shape and position of the weird shadow.

enter image description here

I've tried disabling the shadow with Object3D's castShadow/receiveShadow attributes but that doesn't show any effect at all.

Another screenshot of the normals orientation of the mesh
_{(source: front-a-little.de)}

Judging from the image of it in blender the face in question has a wrong normal. — LJᛃ
The screenshot was made with the suspicious face selected. First thing I checked was if the face was flipped and performed a "recalculate outside". In the plain 3D view it's no darker than the rest of the faces around it so I guess the face's orientation is correct. — Front-a-Little

Front-a-Little Front-a-Little · Accepted Answer · 2015-01-20T21:23:52

I've updated to the latest three.js release (r70) and updated the completely re-written Blender Export addon. The described issue was most likely a bug in a previous version of this exporter, an exported model using the new addon doesn't show the weird shadow.

fixed version

The new exporter comes with new settings in the save screen, I had to make sure the "UVs" box under "Materials" is checked in order to load the model via Three.JSONLoader

Three.js - Extreme shadow on face of mesh

1 Answers