Question

我正在做一个Three js教程，这段代码应该投射阴影，但是当平面上不存在渲染阴影时。

代码有什么问题？我正在阅读文档和其他代码，但我找不到问题。

祝你好运！

修改

如果我使用requestAnimationFrame创建一个循环只是起作用......但只是在那种情况下......为什么？

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

Answer 1

three.js r.74和r.75有一个错误，在第一次调用render()时，阴影并不总是呈现。这个bug已在three.js r.76dev。

中修复

你的解决方法是第二次调用renderer.render( scene, camera )，或者进行动画循环。

three.js r.75

THREE.JS不投射阴影

1 个答案: