Question

我有一个问题。我将.dae文件加载到我的场景中，但我没有看到任何模型的阴影。我不知道该怎么做.....＆gt;“＆lt; 我用谷歌搜索了这个问题。有类似的问题。但是我仍然无法解决我的问题...... 我不知道为什么......

这是我的代码：

<!doctype html>
<html lang="en">
<head>
    <title>Test von Web GL</title>
    <meta charset="utf-8">
</head>
<body style="margin: 0;">

<script src="js/three.min.js"></script>
<script src="js/ColladaLoader.js"></script>
<script src="js/OrbitControls.js"></script>

<script>
    var scene, camera, renderer;
    init();
    animate();
    function init() {
        scene = new THREE.Scene();
        var WIDTH = window.innerWidth,
                HEIGHT = window.innerHeight;
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(WIDTH, HEIGHT);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 10000);
        camera.position.set(0,300,0);
        scene.add(camera);
        window.addEventListener('resize', function() {
            var WIDTH = window.innerWidth,
                    HEIGHT = window.innerHeight;
            renderer.setSize(WIDTH, HEIGHT);
            camera.aspect = WIDTH / HEIGHT;
            camera.updateProjectionMatrix();
        });


        var hemisphereLight, shadowLight;
        createLights();

        function createLights() {

            hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, 0.8)
            shadowLight = new THREE.DirectionalLight(0xffffff, 1);
            shadowLight.position.set(-150, 350, 350);
            shadowLight.castShadow = true;
            shadowLight.shadow.camera.left = -400;
            shadowLight.shadow.camera.right = 400;
            shadowLight.shadow.camera.top = 400;
            shadowLight.shadow.camera.bottom = -400;
            shadowLight.shadow.camera.near = 0.01;
            shadowLight.shadow.camera.far = 1000;


            shadowLight.shadow.mapSize.width = 3000;
            shadowLight.shadow.mapSize.height = 3000;

            scene.add(hemisphereLight);
            scene.add(shadowLight);
        }

        // here you add your objects
        var loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        loader.load( 'models/model.dae', function ( collada ) {
            var dae = collada.scene;
            dae.traverse(function (child) {
                child.traverse(function(e) {
                    e.castShadow = true;
                    e.receiveShadow = true;
                });
            });

            scene.add(dae);
        } );


        controls = new THREE.OrbitControls(camera, renderer.domElement);
    }
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update();
    }
</script>
</body>
</html>

如何展示.dae模型的阴影？

0 个答案: