Christmas Thor - post cover

Thor in a 3D snow globe – making of

Yesterday I finished my first snow globe featuring one of my scanned 3D models, put it in ThreeJS, and everything went according to plan.

Jump to

Where did I get the idea of putting Thor into a 3D snow globe? I can’t remember. Although I emailed me 5 days before finishing it a message: 

“Thor in glass globe with snow :). Laur”.

 Must’ve been important, cause I starred it right away after receiving it. 

The scope

I wanted to build a snow globe containing Thor, the 3D model featured on my homepage, that can be used in ThreeJS with falling snow (this one was super optional), in order to update the interactive element on my home page to the Christmas vibes.

Took me 4 days of work, two days for research and testing and two for actually building it. In order to bring it to completion I elaborated a short plan with several tasks. It went like this:

Thor 3D snow globe - to do list
The To-Do list in ... Microsoft To Do app

Yeah, I use Microsoft’s To Do app. Call me lazy but for these kind of tasks it does the job. Although I might’ve resolved the tasks in a slightly different order.  But first, let’s see the tools used.

Tools and Assets

Blender 3D – for 3D modeling, testing the real time renderer in Evee, and still and animation renders. 

Adobe Photoshop – for designing the engraved logo file

ThreeJS – for webgl scene programming

VSCode – the code editor for javascript, HTML, CSS and terminal for NodeJs

Assets:

Thor 3D model from my photogrammetry asset collection. Simplified to 100.000 polygons, with a normal map and color map.

Textures:

1. The Glass Globe

First of all I wanted to see if I would be satisfied with ThreeJS possibilities for the glass globe. I saw some examples, of which I liked only the one from their ThreeJs examples. So I had to research and test.
What I wanted:

  • transparency
  • reflections
  • refraction
  • realism

So, I started with an Icosphere in Blender: Shift + A, Add Mesh, Icosphere, adjust the detail level, apply Solidify Modifier to give it a thickness, Shade Smooth to make it smooth, and apply Glass BDSF shader  for the material (oupsie! we’ll see later why) to get the glass look.

Then I put on a random environment map that I had around on my computer and the thing started to look really good.

Next, I built a cube, with a generic color texture, orange by personal preference. Put the cube inside the sphere to see how the refraction behaves in ThreeJs.

Exported the sphere and cube as am mesh in GLTF binary (.glb) format, imported the mesh in a simple ThreeJS scene with another environment map, aaaand BOOM! … no transparency.  Applied Physical Material for the sphere with more attributes … Still nothing.What the … Tried to tweak the parameters for mesh materials in ThreeJs, checked the manual and finally somehow I found out on some forum thread that ThreeJs does not work with Glass BDSF shader from Blender, only with Principled BDSF, the default one. Dang!

Rewind. Replace the Glass BDSF in Blender with the Principled one and tweak the parameters until I was happy with the Evee result. Evee is the real time wonder renderer from Blender. Exported the mesh again, imported it in the ThreeJs scene aaand …

Now there she is! Perfect! Well, not quite perfect. I added a few gui elements in the web browser for the tweaking control panel to adjust lights positions and intensity and other renderer details to play with the looks and get the final parameters.

First step was done. And perhaps the most important one.  Now that I knew that glass looks excellent in ThreeJs, in real time, I could focus on building the whole scene. The enthusiasm carried on for the next few days in order to finish this small project.

Thor in 3D snow globe - transparency test
Transparency test in the web browser

2. The Wood Support

The second step was to build the globe support. On my initial research there was a particular model that was quite simple with a golden label on it. Didn’t save the image, never found it again. But now I selected a few some from a Duck Duck Go search (ok, boomer…) that I really liked, even though they didn’t match the sketch in my head. I used PureRef, as I always do for collecting image references in different projects.

Christmas Thor - Pureref reference images
PureRef reference images

From this small set these two are the ones that I chose as hard references (the red X marked ones).

The modeling was quite simple, started with a Circle in Blender, Edit, F, E to extrude, S to scale, E to extrude, S to scale and so on. Subsurface smoothness ala. Marked seams here and there on some edge loops to cut the UV map and then applied in Shading Editor normal, roughness and color maps for the wood. Scaled and rotated the UV sections until I got the desired texture direction of the wood fibers. Perfect!

3. The Scene

Easy enough, I put together the globe and the support in the same blend file, which will become The Scene. From now on, I will work only in this file.

4. The Ground in the bowl

This was pretty straight forward. I mean, it should’ve been. But it wasn’t. Not for me. I wanted to test the Round Cube mesh in order to transform it into a sphere and then cut along the curvy edge loops for a nice raised rounded corners effect. I didn’t want a plain straight soil, but alas this was not the best solution. So I stuck with the plan, with the simple solution.

Duplicated the original glass bowl Icosphere. S to scale, cut around an edge loop and kept the lower part. Because the original globe had thickness, this one also had thickness, so after the cut I had two parallel shells. I cut the small one, select the upper most edge loop, F to close the face, Ctrl + B to smooth the edge and BOOM! Done. Marked a few seams for UV mapping, not the best cuts, but in the final scene you cannot see them, so all the better.

Used the snow texture with the foot tracks. Perfect! Now I had to see if everything looked as perfect in ThreeJs. Oh yeah, it did!

Thor 3D snow globe - Glass globe, wood support and ground in Three JS
The glass globe, wood support and ground in Three JS. Notice the tweak parameters on the right.

5. Metal label

Actually this was the first task I did in this project. Besides the glass test I wanted to test a few methods for creating an engraving into a surface. Never done it before. The easiest one for me, was to create a normal map from a custom text and logo black and white image, in Blender.

:: PRO TIP :: Create in Adobe Photoshop a square white image. Put some black text or whatever you want to engrave, drawings, symbols or patterns. You can use hard brush or feathered brush for softer effect. In Blender create a mesh plane, subdivide it twice, and add a Displacement modifier using as texture the image just created in Photoshop. Adjust the parameters, and baked it on a new texture as normal map. BOOM!

What I wanted:

  • small metal label, with text “THOR”  and my logo engraved
  • the label should follow the wood support profile, like a bend
  • small nits in the corners
  • real metal aspect and feel

In the project, after creating the globe and the support, I started creating the label right in the scene. Used a cube, adjusted the size to my desired label size, subdivide twice or how many times your GPU allows you, (without enough edge loops the bending will suck – took me a short while to figure it out). 

To bend it properly I used the Lattice method. Easy enough, you just create a new Lattice, place it and orient it between the surface to be bent on and the object you want to bend. They should be parallel. In the Lattice object properties select the bending object as a connection. Then apply Shrink Wrap modifier to the the Lattice using the surface to be bent on as Source. And BOOM!

Finally, I set the seams the UV mapping cuts and textured it with the PBR metal texture I had.

Thor 3D snow globe- The metal label
The metal Lable: left - notice the lattice between the label object and the stand surface; right - real look preview

6. Enter Thor

Now the time has come to introduce Thor into his new environment. Snowy and festive like home. This is a photogrammetric model I did earlier this ear using macro-photogrammetry after a replica of Eyrarland Thor, as it is called. The Eyrarland bronze statue is dated in 1000 AD and was found on a farm with the same name, in Iceland. It is supposed that it represents the Norse god Thor and his cross shaped Mjöllnir or a gaming piece from a set of hnefatafl.

I imported the gltf model and placed on the ground in the globe. Next, the details.

7. Santa Thor and his presents

First, I modeled a Santa hat from a Circle, E to extrude, S to scale until I shaped it as it looks now. I added a small icosphere for the hat’s tassle. UV mapped them and added the stylized fur and red textile materials. 

The presents were modeled in a separate blend file. Simple cubes with edge loops arranged for different color mapping. I used the Imphenzia technique for texturing low poly models. The ribbons were made using a Bezier Curve.

Thor 3D snow globe - The Santa Hat
Thor's Santa hat
Thor 3D snow globe - The presents
The presents

8. Three Js - The snow flakes

By now, all the scene is complete. I had the glass globe, wooden support, the metal golden label, the Thor and his presents. All that was left was to see if I can pull of the “super optional feature”: the snow flakes falling in the globe. I mean, when I started this project I would’ve been thrilled just with the glass globe in Three Js. But now … I felt like I could push it. 

I started with the firefly shaders I once learned to do in Three Js in the Three Js Journey course earlier this year. From there I tried to make the snow fall in curly random trajectories. :). Yeah, well that was really too much. All I managed to do was to make them at random sizes and go up and down at random speeds, like a floating snow. Kind of makes sense better than the “falling snow”.

But what is more important, I love it!

9. Three Js - The final act

The prestige.

Everything was set. All ready to be launched. The purpose of this Three Js scene was to be published in the header of the home page of my website. Which has a limited area.

I search a suitable Environment map for a nice reflection in the globe. I found a sepulchre interior with nice round ceiling details. Three Js does not use hdr or exr HDRI files. It needs cube maps. I converted the HDRI file in a cube map here. And got the “cube faces” image files.  I scaled and centered the scene for the best viewing experience. Thing that cancelled all the careful planning of my snow flake cloud around Thor. Had to re-adjust that. Made the Environment map invisible in the scene, so the background was now transparent. Built the whole thing in Node Js. Cleaned the Dist folder of all unnecessary files. Embedded the scene in my WordPress home page. The whole thing weighs less than 30 MB.

And that’s it!

Thank you for bearing with me through all this process, I hope you got something useful out of it! At least  had a lot of fun. It’s been more than an year since my last (and first) story about 3D modeling and how I returned to it after 20 years. I kept at it, I love it and I learn more everyday.

Cheers!

Before you go, stay awhile and listen.

As you may have observed, all the textures  I used come from a single source, João Paulo‘s website 3dtextures.me. It is a great source, it’s my first go-to when I need a PBR material fast. They are free to use but you can show your support and buy him a ko-fi from time to time. After a few ko-fis you’ll get access to all the 4K material library.

If you liked this making-of story you can also buy me a ko-fi. Would be much appreciated.

About Post Author

Add comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.