CODEWITHSUNDEEP
javascriptthree.jsshadow
ArUn
ArUn

Reputation: 1337

shadows not appearing in the scene in three.js?

camera : 

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

Light 

 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

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

i use this function to add 3d model

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

                });
            });
        }

and the plane to recive shadow is 

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

I just tried adjusting the position of the lights and adjusted the values of shadowCameraNear,Light.shadowCameraFar and Light.shadowCameraFov .but not no changes are seen

Upvotes: 1

Views: 3225

Answers (1)

pprchsvr
pprchsvr

Reputation: 168

The camera is at (150, 400, 400), the object casting the shadow is at (0, 160, 0), the object receiving the shadow is at (0, 100, 0) and the shadowCameraNear frustum is set at 850. That is, your camera is about 200 and 400 units from the two shadowing objects, respectively, but your shadow viewing near frustum is 850 units away. Adjust your positioning. You can set

Light.shadowCameraVisible = true;

to show the camera frustum in debug mode to help out.

Upvotes: 1

Related Questions