I have been trying to solve this issue for a long time but have been unsuccessful. I am attempting to add shadows to my .dea model using MeshPhongMaterial, but the shadows are not appearing.
The camera is in the correct position, the ground is made of MeshPhongMaterial, the model casts shadows and the ground can receive them.
Any suggestions on what might be missing?
Here are the relevant snippets of code:
function load() {
loader.load( 'models/charMesh_02_1.5.dae', function ( collada ) {
model = collada.scene;
model.scale.x = model.scale.y = model.scale.z = modelScale;
model.castShadow = true;
model.receiveShadow = true;
modelmesh = model.children[0].children[0];
modelmesh.castShadow = true;
modelmesh.receiveShadow = true;
model.updateMatrix();
// When model is loaded, initialize and animate everything
init();
animate();
});
}
//
// Set up everything
//
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// Camera
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 2, 2, 400 );
scene = new THREE.Scene();
scene.add(new THREE.AxisHelper() );
// Fog
scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
scene.fog.color.setHSL( 0.6, 0, 1 );
// Light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadowDarkness = 0.5;
light.shadowCameraVisible = true;
light.shadowCameraNear = 2000;
light.shadowCameraFar = 3000;
light.shadowCameraLeft = -200;
light.shadowCameraRight = 200;
light.shadowCameraTop = 200;
light.shadowCameraBottom = -200;
light.position.set(-60, 1500, 1000);
scene.add(light);
// Ground
var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
var groundMat = new THREE.MeshPhongMaterial( { ambient: 0xffffff, color: 0xffffff, specular: 0x959595 } );
groundMat.color.setHSL( 0.095, 1, 0.75 );
groundMat.shininess = 0;
groundGeo.receiveShadow = true;
groundMat.receiveShadow = true;
var ground = new THREE.Mesh( groundGeo, groundMat );
ground.rotation.x = -Math.PI/2;
ground.position.y = 0;
ground.receiveShadow = true;
scene.add( ground );
// Skydome
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
var uniforms = {
topColor: {type: "c", value: new THREE.Color( 0x0077ff )},
bottomColor: {type: "c", value: new THREE.Color( 0xffffff )},
offset: {type: "f", value: 33},
exponent: {type: "f", value: 0.6}
}
uniforms.topColor.value.copy(skydomeColor);
scene.fog.color.copy( uniforms.bottomColor.value );
var skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
var skyMat = new THREE.ShaderMaterial({vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide});
var sky = new THREE.Mesh(skyGeo, skyMat);
scene.add(sky);
// Add the model
scene.add(model);
// Renderer
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapCullFace = THREE.CullFaceBack;
}