THREE.JS wirft keine Schatten

Question

Mar 07, 2016, 07:29 PM

THREE.JS wirft keine Schatten

Ich habe ein Three js-Tutorial erstellt und dieser Code sollte Schatten werfen, aber wenn Rendering-Schatten nicht über der Ebene vorhanden sind.

Was ist falsch am Code? Ich lese Dokumentation und andere Codes und kann das Problem nicht finden.

Freundliche Grüße

BEARBEITEN

Wenn ich mit requestAnimationFrame eine Schleife mache, funktioniert das nur ... aber nur in diesem Fall ... warum?

<!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>