Three does not work

Question

I looked through a number of other SO questions, followed all the tips, but I still don’t know why I can’t get shadows for rendering on this very main scene.

http://jsfiddle.net/4Txgp/

[Updated] Code:

var SCREEN_WIDTH = window.innerWidth - 25; var SCREEN_HEIGHT = window.innerHeight - 25; var camera, scene; var canvasRenderer, webglRenderer; var container, mesh, geometry, plane; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000); camera.position.x = 1200; camera.position.y = 1000; camera.lookAt({ x: 0, y: 0, z: 0 }); scene = new THREE.Scene(); var groundMaterial = new THREE.MeshLambertMaterial({ color: 0x6C6C6C }); plane = new THREE.Mesh(new THREE.PlaneGeometry(10000, 10000, 100, 100), groundMaterial); plane.rotation.x = -Math.PI / 2; plane.receiveShadow = true; scene.add(plane); // LIGHTS // scene.add(new THREE.AmbientLight(0x666666)); /* var light; light = new THREE.DirectionalLight(0xdfebff, 1.75); light.position.set(600, 800, 100); //light.position.multiplyScalar(1.3); light.castShadow = true; light.shadowCameraVisible = true; light.shadowMapWidth = light.shadowMapHeight = 2048; var d = 50; light.shadowCameraLeft = -d; light.shadowCameraRight = d; light.shadowCameraTop = d; light.shadowCameraBottom = -d; light.shadowCameraFar = 500; light.shadowDarkness = 0.5; scene.add(light); */ var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 700, 1000, 100 ); spotLight.castShadow = true; spotLight.shadowCameraVisible = true; spotLight.shadowMapWidth = 2048; spotLight.shadowMapHeight = 2048; spotLight.shadowCameraNear = 100; spotLight.shadowCameraFar = 2000; spotLight.shadowCameraFov = 30; scene.add( spotLight ); var boxgeometry = new THREE.CubeGeometry(100, 200, 100); var boxmaterial = new THREE.MeshLambertMaterial({ color: 0x0aeedf }); var cube = new THREE.Mesh(boxgeometry, boxmaterial); cube.position.x = 0; cube.position.y = 100; cube.position.z = 0; scene.add(cube); // RENDERER webglRenderer = new THREE.WebGLRenderer(); webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); //webglRenderer.domElement.style.position = "relative"; webglRenderer.shadowMapEnabled = true; webglRenderer.shadowMapSoft = true; container.appendChild(webglRenderer.domElement); } function animate() { var timer = Date.now() * 0.0002; camera.position.x = Math.cos(timer) * 1000; camera.position.z = Math.sin(timer) * 1000; requestAnimationFrame(animate); render(); } function render() { camera.lookAt(scene.position); webglRenderer.render(scene, camera); } 

I have a scene with a plane object (cube), a projector (copied directly from http://threejs.org/docs/58/#Reference/Lights/SpotLight for testing purposes), and the camera. This is great, except that the cube does not cast a shadow on the “ground” (plane), and the shading looks as if everything was done in the main material. I use combos by Phongs and Lamberts.

My directional light is set to castShadow = true ;, and my plane is set using receiveShadow = true along with the shadow map settings. The rendering itself has shadowMapEnabled = true.

I tried various solutions, I remember that with previous versions of ThreeJS, depending on what you wanted to do, there would be calls to external libraries, but I also saw other examples on JSFiddle just calling ThreeJS on their own, as well as examples from the official site that work great.

Any hints / info / constructive notes on how to skip something simple and small?

Answer 1

You need to install

 cube.castShadow = true; 

and make sure that the far plane of the shadow camera reaches the cube.

Fiddle: http://jsfiddle.net/4Txgp/13/

three.js r.58