Question

我一直在研究Three.js。我使用JSONLoader函数为3D模型充电，当我想给它设置一个阴影时，它不会出现，我不知道为什么，因为我认为我做了所有的步骤：

1-激活ShadowMap。

2-我有灯。

3-飞机已经收到了阴影=真;

4- 3D模型有castShadow = true;

完整代码（现在正在运作）：

<html><head>
<title>Ejemplo 9 Three.js</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->

<script type = 'text/javascript' src = "plugins/jquery/jquery.js"></script>
<script type = 'text/javascript' src = "plugins/bootstrap/bootstrap.js"></script>
<script type = 'text/javascript' src = "plugins/three.js-master/build/three.js"></script>
<script type = 'text/javascript' src = "plugins/dat.gui.js/dat.gui.js"></script>

<script type = 'text/javascript' src = "plugins/threex.windowresize-master/threex.windowresize.js"></script>
<script type = 'text/javascript' src = "plugins/threex.keyboardstate-master/threex.keyboardstate.js"></script>
<script type = 'text/javascript' src = "plugins/orbitcontrols/OrbitControls.js"></script>
<script type = 'text/javascript' src = "plugins/ColladaLoader/ColladaLoader.js"></script>

<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">

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

    #renderer{
        overflow: hidden

    }

    .container-fluid{
        margin: 0;
        padding: 0;
    }
    .col-md-12{
        margin: 0;
        padding: 0;
    }
</style>

</head>
<body>

    <div class="container-fluid">
        <div class="col-md-12">
            <ul>
                <li>Up, Down, Left, Right-> Move cube. </li>
                <li>Z & X -> Rotate cube. </li>
                <li>WASD -> Scale cube.</li>
            </ul>
            <div id="renderer">
            </div>
        </div>

        <script type="text/javascript">

        $(document).ready(function(){

            var renderer;

            var controls;

            var scene;
            var keyboard;


            var material;
            var plane_texture;
            var grass;

            var geometry_cube;
            var cube_material;
            var cube_texture;
            var cube;

            //Modelo 3D .js
            var model3D;
            var materials_modelo3D; //materiales
            var final_model; //vértices + materiales

            //Modelo 3D .dae
            var model3Ddae;
            var final_modeldae;

            var speed;
            var space;
            var time;

            var width;
            var height;
            var fov;
            var aspect;
            var near;
            var far;

            var camera;


            var light;
            var ambient_light;
            var solar_light;

            start();

            function start(){

                renderer = new THREE.WebGLRenderer({antialias:true});
                renderer.shadowMap.enabled= true;
                width = window.innerWidth-10;
                height = window.innerHeight-10;
                //alert("ancho: " + width + ", alto:" + height);
                renderer.setSize(width, height);
                $("#renderer").append(renderer.domElement);

                scene = new THREE.Scene();
                keyboard = new THREEx.KeyboardState();

                model3D = new THREE.JSONLoader(); //vertices
                model3Ddae = new THREE.ColladaLoader();



                fov = 45; //angle
                aspect = width/height;
                near = 0.1;
                far = 1000;

                camera = new THREE.PerspectiveCamera (fov, aspect, near, far);

                THREEx.WindowResize(renderer, camera);

                var color = new THREE.Color("rgb(250, 250, 250)");
                renderer.setClearColor(new THREE.Color(color));

                camera.position.z= 20;
                camera.position.y= 10;
                scene.add(camera);

                controls = new THREE.OrbitControls(camera, renderer.domElement);

                plane_texture = new THREE.TextureLoader().load("texturas/cesped.jpg");

                cube_texture = new THREE.TextureLoader().load("texturas/muro.jpg");

                crear_plano();
                model3D.load("models/layers260a.js", functionAddModel);
    //          model3Ddae.load("models/rifle.dae" , functionAddModelDae);

    //          cube();
                makeLight();

                var ejesAyuda = new THREE.AxesHelper(20); //son los ejes de ayuda creo
                scene.add(ejesAyuda); 

                renderer.render(scene, camera);

            }

            function crear_plano(){
                geometria_plano = new THREE.PlaneGeometry(100, 100, 10, 10);

                plane_texture.wrapS = plane_texture.wrapT = THREE.RepeatWrapping; // para repetir la textura a lo largo y a lo width
                plane_texture.repeat.set(10, 10); // tablero de 10 x 10

                //material y agregado de textura
                material = new THREE.MeshLambertMaterial({map: plane_texture, side: THREE.DoubleSide});
                grass = new THREE.Mesh(geometria_plano, material);

                //grass.rotation.y=-0.5;
                grass.rotation.x=Math.PI/2;

                grass.receiveShadow=true;

                scene.add(grass);
            }

            function functionAddModel(geometry){
                    imagen = new THREE.TextureLoader().load("models/mario.jpg");
                    materials_modelo3D = new THREE.MeshLambertMaterial({map: imagen});

                    final_model = new THREE.Mesh(geometry, materials_modelo3D);
                    scene.add(final_model);

                    final_model.scale.set(10, 10, 10);
                    final_model.position.set(10, 13, 10);
                    final_model.rotation.y = Math.PI;

                    final_model.castShadow = true;
                    final_model.receiveShadow = false;

                    animation();
            }

            function functionAddModelDae(infodae){
                final_modeldae = infodae.scene;
                final_modeldae.position.set(20, 5, 10);
                final_modeldae.scale.x = final_modeldae.scale.y = final_modeldae.scale.z =.2;
            //  final_modeldae.rotation.y = Math.PI;

                scene.add(final_modeldae);

            }

            function animation(){
                requestAnimationFrame(animation);
                render_modelo();

                var objMov = final_model;

                speed = 100; 
                time = 0.001;

                space = speed * time;

                if(keyboard.pressed("up")){ //tecla flecha arriba
                    objMov.position.z+=space;
                }else if(keyboard.pressed("down")){
                    objMov.position.z-=space;
                }else if(keyboard.pressed("right")){
                    objMov.position.x+=space;
                }else if(keyboard.pressed("left")){
                    objMov.position.x-=space;
                }else if(keyboard.pressed("z")){
                    objMov.rotation.x+=space;
                }else if(keyboard.pressed("x")){
                    objMov.rotation.y+=space;
                }else if(keyboard.pressed("w")){
                    objMov.scale.y+=space;
                }else if(keyboard.pressed("a")){
                    objMov.scale.x-=space;
                }else if(keyboard.pressed("s")){
                    objMov.scale.y-=space;
                }else if(keyboard.pressed("d")){
                    objMov.scale.x+=space;
                }
                controls.target.set(objMov.position.x, objMov.position.y, objMov.position.z);
            }

            function render_modelo(){
                controls.update();
                renderer.render(scene, camera);
            }   

            function cube(){
                geometry_cube = new THREE.CubeGeometry(10, 10, 10);
                cube_material = new THREE.MeshLambertMaterial({map:cube_texture, side:THREE.DoubleSide, wireframe: false});
                cube = new THREE.Mesh(geometry_cube, cube_material);
                cube.position.x= -4;
                cube.position.y = 6;
                cube.position.z = 0;

                cube.castShadow = true;
                scene.add(cube);

            }

            function makeLight(){
                light = new THREE.PointLight(0xffffff);
                light.position.set(-100,200,100);
                scene.add(light);
                ambient_light = new THREE.AmbientLight(0x000000);
                scene.add(ambient_light);

                solar_light = new THREE.DirectionalLight();
                solar_light.position.set(500, 500, -500);
                solar_light.castShadow = true;
                solar_light.intensity = 1.3;



                solar_light.shadow.mapSize.width = 1024;
                solar_light.shadow.mapSize.height = 1024;
                solar_light.shadow.camera.near = 250;
                solar_light.shadow.camera.far = 1000;

                intensidad=50;

                solar_light.shadowCameraLeft = -intensidad;
                solar_light.shadowCameraRight = intensidad;
                solar_light.shadowCameraTop = intensidad;
                solar_light.shadowCameraBottom = -intensidad;

                scene.add(solar_light);


                var helper = new THREE.CameraHelper( light.shadow.camera );
                var helper2 = new THREE.CameraHelper(solar_light.shadow.camera);

                scene.add(helper);
                scene.add(helper2);
            }

        });
        </script>

</body>
</html>

场景：

感谢您的帮助，一如既往：）

Answer 1

你的＆＃34;草＆＃34;材料是MeshBasicMaterial。顾名思义，它纯粹是基本的，不会对光源做出反应。

有趣的是，MeshBsicMaterial可以投射阴影，但无法接收它们。（https://github.com/mrdoob/three.js/issues/8116#issuecomment-183459078）。

将草料更改为MeshLambertMaterial，阴影将会出现。

Three.js：阴影为什么不出现？

1 个答案: