CODEWITHSUNDEEP
three.jsshadow
Larkis
Larkis

Reputation: 67

Shadows dont work with three.js

Actually I'm new on webGl and specially with three.js and I'm trying to learn it while studying the examples from http://stemkoski.github.com/Three.js/.

Now my problem: I build up a little 3D Scene. A cube, a sphere, a floor and a pointlight. Now I want the pointlight to create shadows. I put this command "castShadow = true;" to cube, pointlight and sphere and then "receiveShadow = true;" to the floor. But no Shadow there.

Hope someone could help me.

other Question, Main Goal is to build up a house with windows and an animated light as the sun. That means that every mesh must cast shadows and also receive shadows. Is that possible?

My Code:

    <html>
    <head>
        <style>
            #container {
                background: #225;
                width: 400px;
                height: 300px;
            }
        </style>
    </head>
    <body>

        <div id="container">


        </div>

    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="js/Three.js"></script>

    <script type="text/javascript">
// set the scene size
var WIDTH = 400,
  HEIGHT = 400;

// set some camera attributes
var VIEW_ANGLE = 45,
  ASPECT = WIDTH / HEIGHT,
  NEAR = 0.1,
  FAR = 10000;


var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera =
  new THREE.PerspectiveCamera(
    VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR);

var scene = new THREE.Scene();

///////////////////////// Camera /////////////////////

scene.add(camera);
camera.position.set(180,-180,300);
camera.lookAt(scene.position);

///////////////////////// Floor /////////////////////
var floorGeometry = new THREE.PlaneGeometry(200, 200);
    var floorMaterial = new THREE.MeshLambertMaterial( { color: 0x008800 } );
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.set(0,0,-25);
    floor.rotation.set(0,0,0);
    floor.doubleSided = true;
    floor.receiveShadow = true;
    scene.add(floor);


///////////////////////// Cube /////////////////////
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
    var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x000088 } );
    cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
    cube.position.set(0,0,0);
    cube.castShadow = true;
    scene.add(cube);


///////////////////////// Sphere /////////////////////

var sphereGeometry = new THREE.SphereGeometry(50, 16, 16);
    var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xCC0000 });
    sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
    sphere.position.set(100,100,0);
    sphere.castShadow = true;
    scene.add(sphere);




///////////////////////// Point Light /////////////////////
var pointLight = new THREE.PointLight(0xFFFFFF);
    pointLight.position.set(50,50,130);
    pointLight.shadowCameraVisible = true;
    pointLight.shadowDarkness = 1;
    pointLight.intensity = 2;
    pointLight.castShadow = true;
    scene.add(pointLight);




renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
renderer.render(scene, camera);

    </script>
</html>

Upvotes: 0

Views: 2832

Answers (1)

sole
sole

Reputation: 2077

Did you enable shadows on the renderer?

renderer.shadowMapEnabled = true;

Upvotes: 3

Related Questions