Gabriele Ferro Home

First steps with Three.js and Blender

Day 95: 8 December 2020

**Today’s Progress:**

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.

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.


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.

Blender 2.90

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.

Rendered with cycles

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.

Maybe not...

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:**

[twitter-follow screen_name='20Gabriele20']

June 2024


Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.