三个场景中没有出现阴影?

时间:2016-02-03 09:48:24

标签: javascript three.js shadow

相机:

 Camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 10000);
 Camera.position.set( 150, 400, 400);
  Scene.add(Camera);

 Light = new THREE.SpotLight(0xffccff,.5, 0, Math.PI/2, 1);

Light.position.set(0, 2000, 0);
Light.castShadow = true;
Light.shadowBias = -0.0002;

Light.shadowCameraNear = 850;
Light.shadowCameraFar = 8000;
Light.shadowCameraFov = 600;
Light.shadowDarkness = .7;

Light.shadowMapWidth = 2048;
Light.shadowMapHeight = 2048;
Scene.add(Light);

渲染

 Renderer = new THREE.WebGLRenderer({
    antialias: true,
    sortObjects: false,
    preserveDrawingBuffer: true,
    shadowMapEnabled: true

});

    document.body.appendChild(Renderer.domElement);
    Renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    Renderer.shadowMap.cullFace = THREE.CullFaceBack;
    Renderer.gammaInput = true;
    Renderer.gammaOutput = true;
    Renderer.setSize(window.innerWidth, window.innerHeight);

我使用此功能添加3d模型

 function getModel(path,texture) {

            var Material = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading,
                specular: 0xff9900,
                shininess: 0,
                side: THREE.DoubleSide,
                shading: THREE.SmoothShading

            });


           Loader = new THREE.JSONLoader();
            Loader.load(path,function(geometry){

                geometry.mergeVertices();
                geometry.computeFaceNormals();
                geometry.computeVertexNormals();

                TextureLoader.load(texture,function(texture){


                Mesh = new THREE.Mesh(geometry, Material);
                Mesh.material.map =texture;
                Mesh.material.map.wrapS = THREE.RepeatWrapping;
                Mesh.material.map.wrapT = THREE.RepeatWrapping;
                Mesh.material.map.repeat.set(38,38);
                //Mesh.position.y -= 1;
                Mesh.position.y = 160;
                    Mesh.position.x = 0;
                    Mesh.position.z = 0;
                Mesh.scale.set(40,40,40);
                Mesh.castShadow = true;
                Mesh.receiveShadow = true;
                Scene.add(Mesh);

                });
            });
        }

并且要重现阴影的平面是

var planeGeometry = new THREE.PlaneBufferGeometry(100,100);
  var planematerial  = new THREE.MeshLambertMaterial(
  {
    shininess: 80,
    color: 0xffaaff,
    specular: 0xffffff
  });

var plane = new THREE.Mesh(planeGeometry,planematerial);
plane.rotation.x = - Math.PI / 2;
plane.position.set(0,100,0);
plane.scale.set( 10, 10, 10 );
plane.receiveShadow = true;
plane.castShadow = true;
Scene.add(plane);

我只是尝试调整灯光的位置并调整了shadowCameraNear,Light.shadowCameraFar和Light.shadowCameraFov的值。但是没有看到任何变化

1 个答案:

答案 0 :(得分:1)

相机位于(150,400,400),投影阴影的对象位于(0,160,0),接收阴影的对象位于(0,100,0),并且阴影摄像机角截面设置为在850.也就是说,你的相机分别距离两个遮蔽物体大约200和400个单位,但你在视锥体附近看到的影子距离是850个单位。调整您的定位。你可以设置

Light.shadowCameraVisible = true;

在调试模式下显示相机视锥,以帮助解决。