CODEWITHSUNDEEP
javascript3dthree.jsshadowmesh
Agent Zebra
Agent Zebra

Reputation: 4550

Three.js - shadows rendering on cube but not on imported json mesh object

I'm trying to get my racecar to cast a shadow on the floor. The shadows are working from the cube (the cube is casting a shadow), but the racecar (imported json mesh object) is not casting a shadow. How can I get the racecar to cast a shadow? Is this something to do with the json file baking on the materials? Does the code obj.castShadow = true; actually need to go on a child of the obj? In which case, which child? What am I doing wrong here?

Here's the json file and Here's a link to a demo

Here's the relevant code: 

    var loader = new THREE.ObjectLoader();  
    loader.load("models/ferrari-f1-race-car.json", function (obj) {
        obj.castShadow = true;
        obj.scale.set(50,50,50);
        obj.position.x = 30;
        obj.rotation.y = Math.PI/1;
        scene.add (obj);
    });

    boxgeometry = new THREE.BoxGeometry(100, 100, 100);
    boxmaterial = new THREE.MeshLambertMaterial({
        color: 0x0aeedf
    });
    var cube = new THREE.Mesh(boxgeometry, boxmaterial);
    cube.castShadow = true;
    cube.position.x = -80;
    cube.position.y = 50;
    cube.position.z = 0;
    scene.add(cube);

    function createFloor(){ 
        floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(1000,500), new THREE.MeshBasicMaterial({color: 0x8594a2}));
        floor.rotation.x = -Math.PI/2;
        floor.position.y = -0;
        floor.castShadow = false;
        floor.receiveShadow = true;
        scene.add(floor);
    }

Upvotes: 0

Views: 667

Answers (1)

Mouloud85
Mouloud85

Reputation: 4234

Casting shadows is costly and not well supported on custom objects, there are bugs quite often.

The best solution is to draw a shadow texture on a transparent plane under the car. It can be a problem if you need to rotate you car or your light and need a precise shadow, because the texture won't change with the angle. Up to the author to use tricks (rotate the camera or use much biased shadows). That can still give awesome renderings, check http://helloracer.com/racer-s/ and the simple image used :

shadow texture with bias to replace casted shadow

Even more impressive :

enter image description here

For this photorealistic demo http://www.littleworkshop.fr/renaultespace/

Upvotes: 1

Related Questions