Threebox CastShadow on 3D Model

Question

Im doing a project using threebox js and trying to get the shadow of 3D models imported. Following the documentation https://github.com/jscastro76/threebox/blob/master/docs/Threebox.md#threebox-methods When i create a object i change the property to TRUE (code below).

window.tb.loadObj(proptions, function (model) {
    model.setCoords(place);
    model.addTooltip("A radar in the middle of nowhere", true);
    model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
    model.castShadow = true;
    window.tb.add(model);

});

This is what i get when doing so:

Resolved

As @jscastro responded i was using a 3d Model that had a light. That light was messing with my scene lights. Check @jscastro response for more detail.

Can you share the model you're trying to load in `tb.loadObj` function? It seems the model is so big that exceeds by far the size of the planegeometry used to receive the shadow — jscastro, Jan 09 '21 at 18:56
@jscastro The model used for the example above is a bus from the Windows10 3D Vizualization. I have the same problem with all other models i use. Some of witch are: [link](https://sketchfab.com/3d-models/kyoto-cityscene-bus-stop-5eb07fc3b28f474dbf15b1bbac814c82) Endeed i am scaling the model down to 0.03 scale when i import it. But i thougt that if i scale it down it should not damage the shadow — tiagofonseca1109, Jan 09 '21 at 20:58
Let me check the model and try repro it, something must be wrong with it — jscastro, Jan 09 '21 at 21:23
@jscastro One thing, I use the glb format like below when importing `var busoptions = { obj: './models/autocarro.glb', type: 'gltf', scale: 0.03, units: 'meters', rotation: { x: 90, y: 180, z: 0 }, //default rotation anchor: 'center', adjustment: { x: 0, y: 0, z: 0.4 } }` — tiagofonseca1109, Jan 09 '21 at 21:44
glb, gltf+bin, obj/mtl, fbx or collada shouldn't have any issue, I have all these model types in production and I tested with all of them. Have you checked in your project you have added the right mime types?? https://github.com/jscastro76/threebox/blob/master/docs/Threebox.md#3d-formats-and-mime-types — jscastro, Jan 09 '21 at 21:46
Your windows 10 bus is the yellow school bus or the red one? — jscastro, Jan 09 '21 at 21:51
I think this is when i import the 3D models right? I have mine in a folder next to the code as seen in `./models/autocarro.glb` The object itself loads up pretty well, it even lights up differently depending on the sun light. The shadow is the only problem i have. I understand from your wiki that the only thing to do is `model.castShadow = true;` when i want the shadow. Sorry for the questions and thank for your the rapid responses. Btw your Threebox-plugin is really really nice and it saved my project — tiagofonseca1109, Jan 09 '21 at 21:54

jscastro · Accepted Answer · 2021-01-09T23:06:52.143

The issue you are facing with the bus stop model from sketchfab is that it has embedded its own lighting below the ground level that is breaking the shadows from the scene in threebox.

That's what produces an issue with the shadow when the model is loaded in threebox. I have loaded all your models in threebox with no issues and showing a tooltip, including the bus stop.

If you definitely want to use that bus stop model, you will need to modify it with Threejs editor and remove the light point and then export it again.

Threebox CastShadow on 3D Model

1 Answers1