Beginner: Work Analysis - theory confirmations

Questions
1

Hello,

thank you for opening and reading this topic first of all - Im a beginner into the mix of 3D, blender and Three.js and would like to use some of your insights.

I have programming background and also did some things in the 3D as a kid so Im not too worried :slight_smile: but I know I still need to digest and learn a lot.

I found a scene, that I personally like a lot but still while looking at it I do have some open questions and would like you to help me answer them.

Scene:
https://threejs.org/examples/webgl_animation_keyframes.html

My questions (not only about this particular scene but overall):
Typical workflow when I would like to achieve similar results would be:

  • Blender
  • Create scene
  • Add textures
  • Create animations
  • Save model and import into three.js
  • Three.js magic - done, correct?

Yet still a lot of open questions:

Questions:
Do you add textures in Blender or separate program?

Are the textures then a part of the exported file or are they separated?

What file format is best suited for this?

I read that glTF is preferred 3D format for Three.js - but does that contain textures?

Lets say that I would like to change the color of the TRAM in the scene, but the car has “baked” textures - can I achieve thay in any way?

If textures are baked in but I still would like to be able to change while running the scene in three.js what would be the correct approach?

Changing the color of certain faces of the 3d object would help? But how would I know which face is the correct one to change color? Lets say yellow part of the TRAM.

Lets imagine I would like to have a mesh of a TRAM that is in tact and one that is DAMAGED - shape stays the same, just the texture changes, swapping textures is the best approach?

But what if I have a object, lets say that has multiple parts of textures that I would like to change? Imagine a simple MINECRAFT character. Something like this:

https://vignette.wikia.nocookie.net/characters/images/b/b3/SteveMinecraft.png/revision/latest/scale-to-width-down/340?cb=20160127082617

What would be the best approach to change the textures for 4 types of eyes, 4 types of mouth, 4 types of hair? I dont think that having 444 = 64 textures is the way :smiley: what would be the best approach? Divide the face into “sub-objects?” “Partial texture”?

Now animations
As I understand it, animations are parts of the exported file. Correct?

I can make them in blender or different 3rd party software. I found MIXAMO from Adobe. What is the work flow then? I export a static object form blender, import it into MIXAMO and mixamo “enhances” the file with animation parts? Correct?

I then Import the exported file into three.js and have access to the animations, correct?

Ok and now:
Lighting - I figured that most of the models, either when bought or when made, do not contain any lightning. Its just the MESHe and thats it. Lightnin has to be done in THREE.js. Correct?

So there is no way on how to export also lights (position, types, values, etc) from blender?

Imagine scene like this:

I see a textured surfaces - mesh which looks good, but I also see shadows and good lightning. Can I “purchase” and import that into Three.js too or that is no the case? Is it the case that Three just takes the objects but no lightning?

And now the trickiest question of all:
IF you have to recreate the lightning scene for example - ok, but how to create (and export and import) an object of which some parts should be GLOWing in Three.js.

When I see this scene:

I totally freeze and cant imagine the way on how to achieve this. Do I do the lightning in Three.js, but how come that parts EMIT LIGHT (glow)? Do I add GLOW in threeJS? On specific surfaces? Or do I export whe whole scene with glow and lights from blender and import it into three.js?

You see? There are some quite important questions open in my mind when it comes to the process “from blender - to three and web” and I somehow cant really find good/best approaches on how to achieve the desired results - or at least understand “how its done”.

If you, please - find some time and read this through, write me few words to my questions and help me please to advance a lot more efficiently :slight_smile:

Thank you very very much

Oliver

2
  • Do you add textures in Blender or separate program?

up to you - you can just assign the textures in JS. but you DO need to add UV layer in Blender.

  • Are the textures then a part of the exported file

depends on file format

  • I read that glTF is preferred 3D format for Three.js - but does that contain textures?

they sort of give gltf business class treatment while the rest of formats get economy class. textures can be embedded in the file or separate, depends on how does export script feel about it.

  • I would like to change the color of the TRAM in the scene, but the car has “baked” textures - can I achieve thay in any way?

bake with solid white textures.

  • how would I know which face is the correct one to change color?

by testing it.

  • animations are parts of the exported file

sometimes.

  • there is no way on how to export also lights (position, types, values, etc) from blender?

there are ways but for you it might be easier to just pretend there are none.

  • shadows and good lightning. Can I “purchase” and import that into Three.js too or that is no the case?

unlikely. maybe baked textures, but they arent typically sold.

  • some parts should be GLOWing in Three.js

https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html

2 Likes
3

Thank you!

(Thought so about the lights and god damn, achieving good lighting is challenging enough in Blender not to speak of Three.js and coding it ayyy)

4

A few additions —

I read that glTF is preferred 3D format for Three.js - but does that contain textures?

If you set up your materials in Blender according to this documentation, your textures will export and work correctly in three.js. Notably, this means all materials in Blender should use the Principled BSDF node. Blender has many other ways to construct materials, most of which are not guaranteed to export anywhere outside of Blender.

Can I “purchase” [shadows and lighting] and import that into Three.js too or that is no the case?

If you need dynamic lighting (i.e. lights move or flicker) then I agree with @makc3d — there are ways you could import them, but it’s probably better just to set it up how you want in three.js. A few things you can do in Blender and bring into three.js, though:

  • Bake ambient occlusion, using this workflow. This gives you nice soft shadows for diffuse lighting. Any hard shadows (from the sun, point lights etc.,) would typically be added in three.js on top of that. Ambient occlusion can be included in your glTF file, and is compatible with dynamic lighting, but a little tricky with moving objects.
  • Bake light maps. I’m less familiar with this as a workflow, and it can’t be included in a glTF file, but you could export a lightmap and then load it separately into the scene as a texture. Does not support dynamic lighting or moving objects.

how would I know which face is the correct one to change color?

If you know you’ll need to do this, you can separate the object in Blender and give it a useful name. Then in three.js you just retrieve that object (getObjectByName('Foo')) and modify it.

I can make them in blender or different 3rd party software. I found MIXAMO from Adobe. What is the work flow then?

Mixamo provides a nice library of pre-made animation for humanoid characters. For anything more custom, or for non-humanoid animations, i’d suggest just making the animation in Blender. This guide is a little out of date but should explain how to use Blender and Mixamo together, exporting to glTF in the end.

Finally, color management in three.js and the GLTFLoader docs provide some additional workflow advice. You don’t have to do those things, but it’s much easier to get consistent results between Blender and three.js if you do.

2 Likes
5

Thats awesome, thank you for the helpful insights. The one with separating an object and than retrieving it especially. Thank you :slight_smile: I believe Im all set and good to go, next will be a sample project of a scene with a lamp for me. As said : 3d model + threejs lightning + glowing parts + postprocess uff :slight_smile: