Lighting and Shadows

Questions
,
1

Shadows%20example

Hi there,
I have no previous knowledge of coding but do have knowledge of 3D and i’m interested in starting to look at threejs.

If i were to achieve something like in the image attached, where does the lighting and shadow information come from? Is it baked into the 3D mesh before exporting or is it achieved through threejs?

Apologies if this is a real noob question.

Many thanks in advance

2

If your scene doesn’t have moving parts, you could bake the shadows by using the .lightmap property as demonstrated in this example. You could do this for ambient occlusion as well. This is cheaper to render, since you’re not calculating shadows once per frame, and you can bake soft shadows at no additional cost.

However, if you do have moving parts, you might want to follow this example: https://threejs.org/examples/?q=shadow#webgl_shadowmap which uses light shadows. These are more expensive to render, since you’d be calculating it once per frame, and you might not get really soft shadows.

2 Likes
3

Great. Thanks for the speedy response. There are no moving parts, it’s just static so i guess the best way would be to bake the light and shadows through the .lightmap property right?

With this in mind would the best process be to export as OBJ with textures (.mtl file) from 3D, import that into threejs and light it and create shadows within threejs instead of lighting it and creating the shadows in the 3D software before the export to OBJ?

Again many thanks

4

Instead of OBJ you should use glTF, the recommended 3D format of three.js. You can find many useful information about loading glTF assets in the following guide:

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

In general, there is no need to use OBJ anymore. Especially since the format has some serious disadvantages. For example…

  • it can’s represent hierarchy information of a 3D scene.
  • it is not possible to use animations like vertex morphing or blending.
  • there is no binary representation although documents about the specification does include a binary format (.mod). But I’ve never seen this in real life^^.

glTF can do all these things. It’s also produces smaller files and is faster to parse.

1 Like
5

Thank you so much for your help. I have a lot of tests ahead : )

1 Like
6

Note that glTF will let you export baked ambient occlusion (the soft shadows) but does not yet support lightmaps. Example of the difference this can make here: https://github.com/wwwtyro/geo-ambient-occlusion/issues/3 (although you often want an AO map rather than per-vertex AO as I show in that example).