CODEWITHSUNDEEP
javascriptthree.js
Jesse Luo
Jesse Luo

Reputation: 137

Three.js shadow dose not work

I am testing Three.js shadow effect at version r82, but dose not work.

It's seems that I set up everything necessary.

I can't find out why.

Can someone tell if there is something I ignored.

Here is the example: https://jsfiddle.net/JesseLuo/z1m6uffu/

var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / 
window.innerHeight, 0.1, 1000 )
var renderer = new THREE.WebGLRenderer()

camera.position.set(2,2,2)
camera.lookAt(scene.position)

renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
document.body.appendChild(renderer.domElement)

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
directionalLight.position.set( 3, 10, 5 );
directionalLight.castShadow = true
directionalLight.shadowCameraVisible = true;
scene.add( directionalLight );

directionalLight.shadow.mapSize.width = 512;  // default
directionalLight.shadow.mapSize.height = 512; // default
directionalLight.shadow.camera.near = 0.1;    // default
directionalLight.shadow.camera.far = 500; 

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
cube.castShadow = true
scene.add( cube );

var planeGeometry = new THREE.PlaneGeometry(10,10,10)
var plane = new THREE.Mesh(planeGeometry, material)
plane.rotateX(-0.5*Math.PI)
plane.position.y = -0.5
plane.receiveShadow = true
scene.add(plane)

var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate()

Upvotes: 2

Views: 78

Answers (1)

jparimaa
jparimaa

Reputation: 2044

Using the same material for both plane and cube seems to cause the problem. I don't know why that is exactly.

Add a new material for the plane and it should be fine.

var material2 = new THREE.MeshPhongMaterial({ color: 0x00ffaa });
var plane = new THREE.Mesh(planeGeometry, material2)

By the way, there's a warning: THREE.Light: .shadowCameraVisible has been removed.

Upvotes: 1

Related Questions