Day 95: 8 December 2020
This morning I had a brief conversation with a CSS artist that I follow on Twitter.
The topic was drawing a 3D model into a browser.
In particular, I want to be able to manipulate my 3D scenes with code, and he suggested me to use Three.js for this task.
I studied the initial part of the documentation where I learned how to create a Scene with a rotating green cube. I played about one hour with the code.
Cool! But now I want to import my scene into a webpage!
Last time I expressed the desire to learn to use Blender as a professional, and here we are!
I am following this book to learn Blender and this is the result of the first 90 pages.
There is a flat plane (the wooden table) with a texture included, the jug is a model I created and duplicated with a smaller size. The bigger jug has a glossy material attached to it, while the second jug is a mix of two materials, in order to obtain a reflective & opaque surface with a base color.
I ended up removing the light from the scene because I wanted to create it with code.
So, I followed this tutorial on YouTube and I really like his style.
This tutorial it's beginner friendly because it assumes 0 prior knowledge and it teaches how import a model with an UV texture included.
I followed the tutorial step by step and I was able to recreate the steps without checking every 10 seconds.
The format suggested to exports our model is glb/glft.
The new version of Blender supports this format out-of-the-box while older version will need to install the exporter plug-in.
Now I am finally ready to import my 3D scenes into my websites!
I also use an extension for VSCode called glTF Tools to see my model and tweak its parameters
Now I am ready to export my custom scene and several options are presented.
I don't need the lights nor the camera because I have added them to the scene using the code.
Today is the beginning of a new era.
I tried every combination of export settings but the converted glTF file does not contain the texture nor the materials...
I must remember this information for later use:
.image : Image
An image object, typically created using the TextureLoader.load method. This can be any image (e.g., PNG, JPG, GIF, DDS) or video (e.g., MP4, OGG/OGV) type supported by three.js.
To use video as a texture you need to have a playing HTML5 video element as a source for your texture image and continuously update this texture as long as video is playing - the VideoTexture class handles this automatically.
Also found this article "Three.js for beginners" on Medium.
**Link to tweet:**