2016-02-03 81 views
0

相机:three.js中没有出现阴影?

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); 

       }); 
      }); 
     } 

与平面至r ecive阴影是

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); 

我只是试图调整灯的位置和调整的。但不是没有变化被看作

+0

也许你可以添加一个小提琴? – Wilt

+0

'Light.shadowCameraFov = 600;'? – gaitat

+1

'Light.shadowCameraNear = 850;'最有可能你的所有物体都不能从阴影相机看到。 – gaitat

回答

1

照相机是在shadowCameraNear,Light.shadowCameraFar和Light.shadowCameraFov的值(150 ,400,400)时,投射阴影的对象位于(0,160,0)处,接收阴影的对象位于(0,100,0),并且shadowCameraNear视锥体位于850.也就是说,您的相机是两个阴影物体分别约有200个和400个单位,但你在近平截头体上观察的阴影是850个单位。调整你的位置。你可以设置

Light.shadowCameraVisible = true; 

在调试模式下显示相机的视锥体帮助。

+0

Light.shadowCameraVisible已从three.js中删除r73 – ArUn

+0

@ArUn感谢您指出这一点。关于threejs.org的文档已过时。 r73本身会发出一个控制台消息:“'THREE.Light:.shadowCameraVisible已被删除,请改用新的THREE.CameraHelper(light.shadow)'''CameraHelper现在'显示锥体,视线和相机的位置”这应该仍然有助于定位。如果改变立场解决问题,请让我们知道并回答您的问题。 – pprchsvr