Three.js OBJLoader .obj model not casting shadows

Question

I'm working on a project where I wish to allow a .OBJ model loaded from OBJLoader.js to cast a shadow from a spotlight. The light will cast shadows from other normal objects, but the .OBJ will not seem to cast shadows.

A possible symptom to the problem is as follows: When these normal objects are created when clicking on the floor, they are entered into the array Objects[], which in turn makes them clickable to add objects on top of themselves. The .OBJ model is also added to this array, however I cannot click it to add models on top of it; as if the raycaster is not detecting it.

I'll include all of the code, as the problem may lie somewhere unforeseen.

A working link is available HERE

http://www.powertrooper.com/3D/demos/issues/OBJShadows

Try Clicking on the floor to see how other objects do cast shadows.

Anyone have any ideas? Mr.Doob? Are you out there? :)

ps: I have no idea why in my browser, the link I have left is directing to a malware site called "4safe.in". Try copying and pasting the link I guess...

Just in case- here's a snippet of code that includes most of what is likely causing the problem.

    renderer.shadowMapEnabled = true;///////////////////////////////////////////// RENDERER /// <------------Renderer and lights set up to cast shadows
    light.castShadow = true;
    light.shadowDarkness = 1;
    renderer.shadowMapSoft = true;
    floor.receiveShadow = true;

    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader();
    loader.addEventListener( 'load', function ( event ) {

        texture.image = event.content;
        texture.needsUpdate = true;

    } );
    loader.load( 'modeltest/ash_uvgrid01.jpg' );

    // model

    var loader = new THREE.OBJLoader();
    loader.addEventListener( 'load', function ( event ) {

        var newModel = event.content;

         newModel.traverse( function ( child ) {

             if ( child instanceof THREE.Mesh ) {

                 child.material.map = texture;

            }

         } );

        newModel.position.set (200,30,0);
        newModel.castShadow = true;///////////////////////////// <------ This doesn't seem to be working.
        scene.add( newModel );
        objects.push( newModel );/////////////////////////////// <------ The other HINT: because of this, the raycaster SHOULD allow us to click the model and create a new block. But we can't.


    });

    loader.load( 'modeltest/male02.obj' );

WestLangley WestLangley · Accepted Answer · 2013-04-09T19:46:08

Each child mesh of your object must have castShadow set to true.

newModel.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.material.map = texture;
        child.castShadow = true;

    }

} );

To get raycaster.intersectObjects() to work with your object, you need to set the recursive flag to true.

var intersects = raycaster.intersectObjects( objects, true );

three.js r.57

Three.js OBJLoader .obj model not casting shadows

1 Answers