TL;DR
I bought a 3D model and thought I should do something with it. My only idea was to display it gloriously on this website, maybe rotating to prove that it’s 3D.
I supposed it would not be straightforward, after many years of software development, I learned two important things:
- Never approach a technological problem naively thinking “that should be easy to do!”
- There is nothing that can’t be done with the right amount of time, though this amount can be abysmal.
Here are the head-banging mishaps I had, described not to teach anything but to bring some comfort to fellow tinkerers that are wondering why it looks easy for others but not for them.
The way to display this statue head
Background
I have a friend that created a company where they do incredible stuff with drones and photo-grammetry like 3D models from physical objects. They have this fantastic gallery on Sketch Fab, some of my favourites:
I decided to buy the statue of Nostradamus, because of the whole prediction aspect, which is kind of AI/stats. I did just that, but did not know what to do with it…
Well I’m not 0 in 3D, I developed a system with L’Oréal that used the 3D library ThreeJS and I teach TinkerCAD in a kids workshop, but I never used models.
What about putting it on my website?
Cannot load the file
First I want to load it in Blender, as I know it’s the software of choice for 3D and I already have it on my computer. I tried File » Import like for many software but could not find any of the extensions I had downloaded, which were .bin and .gltf.
So I’m thinking i’ll just open it directly in the browser (ThreeJS), following a video from an online course I just bought, as there is one lesson with the code to load a model. Luckily they mention this .gltf extension I have.
Everything is upside down
It works but I struggle to get it looking good, the model is all upside down and I cannot make it rotate to see it at a right angle. I have to try again with Blender.
I do a bit more searching and my version is too old. Now to install the latest one I cannot just apt-get and should use snap, that’s what I see on a forum. Great, now I have two versions of Blender on my computer.
It does not look like on the website
The option to load a .gltf file is there and I can finally display the model in blender, but the resolution comes up ugly (we say low poly apparently). It looked so good on Sketchfab!
I go back and indeed there is a much bigger file. I just grab that. It’s once again another extension, this one is .obj, but it can be loaded easily and many good things happen:
- orientation is not too off, I can easily go in front of the face
- it looks much better
How to cut a piece?
Now I want to isolate the statue from the fountain. Apparently the tool for the job is called bisect, I ran into it by chance somewhere, but it took me a while to find the button.
To access bisect you have to not only click on the knife, but click and hold, otherwise a different menu shows up. It drove me crazy, I thought I had another version problem. At this stage I had watched another one hour video from the online course and knew the knife only appears in edit mode though. I struggled a bit more to use the bisect, but finally the head of Nostradamus got isolated.
It’s still far from the center and in a weird position.
I learn about the center of object, bisecting and deleting part of the statue did not change the initial center. I reset it to center of mass and export.
It’s all black
I add it again to my web browser scene. But it’s all black. I can distinguish the shape in front of the axis. It was not the case when I loaded previously in the other format. Something is missing.
In the console the browser is looking for some images, surely the texture that was not exported. Now I remember from the video there is a texture tab in Blender, and indeed, the file names are the same.
I should include them in the export, but I decide I don’t want to use those realistic textures, I want it white like in the preview, so I have to create a new material, and tick the option “export material”.
It’s all ugly
Back to the browser, I have to tweak the camera position, the light and the object position/rotation. But what is with this plastic looking material? I want my statue to be glorious marble. What is happening?
I’m going back to Blender. I continue to watch the video of the online course and learn that I need to go in render mode to be able to visualize materials. I mistakenly thought I was seeing the white material I created before but no, it was just default Blender white. Magically the realistic texture appears, I give up on the white and will use that.
Black again, the web server cannot find the texture files. I exported the material but the texture should be brought separately.
I’ll just drag-and-drop them manually in the folder.
The extensions do not match (jpeg vs jpg) and the original file is quite big (53 Mb).
Back to the solid white idea. After struggling to find out how to put a new material on my object (the assign button only appears in edit mode) I re-export.
Still this horribly looking shiny material.
After googling around I learn that this effect is controlled by the roughness, I have to put it to 1. Re-export.
End of the way
Finally I remove the axis and create a spin movement.
Now it looks ok, I have to bundle it and put it in my Hugo blog (this could be a whole other story).
Damn, here it is.