个人中心
gpt4 book ai didi

javascript - Three.js:为什么没有出现影子？

转载 作者：行者123 更新时间：2023-11-30 08:24:10 25 4
gpt4 key购买 nike

我一直在研究 Three.js。我使用 JSONLoader 函数为 3D 模型充电，当我想给它添加阴影时，它没有出现，我不知道为什么，因为我认为我完成了所有步骤:

1- 激活 ShadowMap。

2-我有灯。

3-飞机有recieveShadow = true;

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>

场景: enter image description here

一如既往地感谢您的帮助:)

最佳答案

您的“草” Material 是 MeshBasicMaterial。顾名思义，它是纯基础的，对光源没有反应。

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

将草地 Material 更改为MeshLambertMaterial，阴影就会出现。

关于javascript - Three.js:为什么没有出现影子？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48387527/

25 4 0
文章推荐： machine-learning - 为什么word2vec不使用正则化？
文章推荐： nlp - 用于自然语言处理的 ARFF
文章推荐： machine-learning - tensorflow word2vec 示例中权重和偏差的目的是什么？
文章推荐： javascript - AJAX 响应在 [object Object] 中，jquery - 因此无法读取它
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com