I'm currently exploring the world of Three.js and experimenting with this demo code:
function init(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
//Enable orbit controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
var axis = new THREE.AxisHelper(10);
scene.add(axis);
var grid = new THREE.GridHelper(50, 5);
var color = new THREE.Color("rgb(255,0,0)");
grid.setColors(color, 0x000000);
scene.add(grid);
var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff3300});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 2.5;
cube.position.y = 4;
cube.position.z = 2.5;
cube.castShadow = true;
scene.add(cube);
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
var planeGeometry = new THREE.PlaneGeometry(30, 30, 30);
var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -.5*Math.PI;
plane.recieveShadow = true;
scene.add(plane);
var guiControls = new function(){
this.rotationX = 0.01;
this.rotationY = 0.01;
this.rotationZ = 0.01;
...
I'm having trouble getting the shadow camera to show up in my project. The light source is visible and functional, but the cube isn't casting any shadows onto the plane below it...
If you have any insights or suggestions on what I might be missing here, please let me know!
Thanks for your help!