I have designed a chest model using blender, hand-painted a texture for it, and placed it in an environment rendered with Three.js. However, I am facing an issue with an unusually extreme shadow on the front face of the chest:
Here is my setup for the Renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
return renderer;
This is the light source (shown in the screenshot, as it is the only light source) causing the shadow:
var envLight = new THREE.PointLight(color, 0.5, 320);
envLight.position.set(0, 80, zPos);
return envLight;
Material configuration:
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 constructed using this material along with JSON data containing the geometry and UV mapping exported from Blender. I retrieve the data at runtime using THREE.JSONLoader.
Below is a screenshot from blender displaying the mesh and UV map unwrapped, indicating a potential issue with the selected face that aligns with the unusual shadow's shape and position.
I have attempted to resolve the shadow issue by disabling it with Object3D's castShadow/receiveShadow attributes, but unfortunately, no visible effect is observed.
Another screenshot displaying the normals orientation of the mesh https://i.sstatic.net/00VeS.png
(source: front-a-little.de)