THREE.JS não projeta sombras

Question

Mar 07, 2016, 07:29 PM

THREE.JS não projeta sombras

Eu estava fazendo um tutorial de Three js e esse código deve projetar sombras, mas quando sombras de renderização não existem no plano.

O que há de errado no código? Estou lendo a documentação e outros códigos e não consigo encontrar o problema.

Cumprimentos!

EDITAR:

Se eu fizer um loop com requestAnimationFrame simplesmente funciona ... mas apenas nesse caso ... por quê?

<!DOCTYPE html>
<html>
    <head>
        <title>Learning THREE JS Basic</title>
        <script src="../../libs/three.js"></script>
        <script src="../../libs/jquery.js"></script>

        <style>
        body {
            margin   : 0;
            overflow : hidden;
        }
        </style>
    </head>

    <body>
        <div id="visor"></div>

        <script>
            $(function () {
                var scene = new THREE.Scene();

                var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);

                var renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(0xEEEEEE);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.shadowMap.enabled = true;

                var axes = new THREE.AxisHelper(20);
                scene.add(axes);

                var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
                var planeMaterial = new THREE.MeshLambertMaterial({
                    color: 0xFFFFFF 
                });

                var plane = new THREE.Mesh(planeGeometry, planeMaterial);

                plane.rotation.x = -0.5*Math.PI;

                plane.position.x = 15;
                plane.position.y = 0;
                plane.position.z = 0;

                plane.receiveShadow = true;

                scene.add(plane);

                var cubeGeometry = new THREE.BoxGeometry(4,4,4);
                var cubeMaterial = new THREE.MeshLambertMaterial({
                    color: 0xFF0000
                });

                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                cube.position.x = -4;
                cube.position.y = 3;
                cube.position.z = 0;

                cube.castShadow = true;

                scene.add(cube);

                var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
                var sphereMaterial = new THREE.MeshLambertMaterial({
                    color: 0x7777FF
                });

                var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

                sphere.position.x = 20;
                sphere.position.y = 4;
                sphere.position.z = 2;

                sphere.castShadow = true;

                scene.add(sphere);

                var spotLight = new THREE.SpotLight(0xFFFFFF);
                spotLight.position.set(-40, 60, -10);
                spotLight.castShadow = true;

                scene.add(spotLight);

                camera.position.x = -30;
                camera.position.y = 40;
                camera.position.z = 30;
                camera.lookAt(scene.position);

                $("#visor").append(renderer.domElement);
                renderer.render(scene, camera);
            });
        </script>
    </body>
</html>