The 3D Dreams I Once Chased (WebGL) — Playing Around with Three.js and Blender

Back in the day, I would browse all kinds of websites, completely captivated by objects that sprang to life in the first view and animations with a sense of depth, thinking, "Wow!" Inspired, I thought, "I want to make something like this myself!" and dove into Three.js and Blender.

That was the dream that led me to join Liberogic, but to be honest... lately my days have been filled with more down-to-earth work, like business applications and headless CMS builds. (Laughs) It's not that I'm complaining, though!

Now, nearly four years in, I'd like to look back on those early dreams of the "moving web" and briefly revisit the fundamentals around WebGL.

What Is WebGL?

WebGL is a technology that displays 3D graphics on websites, and it works across all major browsers, including Chrome, Firefox, and Safari.

In the past, plugins like Flash Player were the mainstream, but they had problems running smoothly on smartphones.

WebGL, on the other hand, is natively supported, so it can be said to be the technology that paved the way for 3D expression in the mobile era that came next.

Let's Try It Out

Displaying 3D in the Browser with Three.js

Three.js is a freely usable library that makes it easy to create 3D content with JavaScript.

First, as a WebGL concept, you will need a Renderer, a Scene, and a Camera.

The Renderer is the main object of Three.js. When you pass a Scene and a Camera to the Renderer, the portion of the 3D Scene within the camera's frustum is rendered onto the canvas as a 2D image.

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

Next, the 3D cube is created using a display object called a mesh. To make a mesh, you need to prepare a geometry (shape) and a material (surface properties).

//ジオメトリ（立方体）
const geometry = new THREE.BoxGeometry(100, 100, 100)

//マテリアル（色）
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);
//Sceneに追加
scene.add(box);

//ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Sceneに追加
scene.add(light);

Finally, we'll add animation.

We'll skip the implementation of surrounding particles this time!

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

When you render a scene containing the configured camera, geometry, material, and light, it will be drawn in the browser.

Create a 3D Model in Blender

Blender is a free, open-source, all-in-one software suite that covers the entire 3D production pipeline, including 3D modeling, animation, rendering, game development, and video editing. Blender alone cannot create WebGL sites.

Blender works the same way as Three.js concepts: you create shapes with mesh objects and add color and material textures with materials. Then you adjust the lighting and shadows with lights, and set the camera position and direction before rendering.

By combining nodes, you can create realistic surface effects such as gradients, metallic finishes, and emissive glow.

Reference: https://www.youtube.com/watch?v=DsNZzUZPhw4

Displaying a 3D model created in Blender in the browser with Three.js

Export the 3D model created in Blender as a .glb file and integrate it into Three.js.

Import the OrbitControls, GLTFLoader, and DRACOLoader modules from the Three.js library.

OrbitControls is a utility for controlling the camera with the mouse. GLTFLoader and DRACOLoader are utilities for loading 3D models in the GLTF format and the compressed DRACO format, respectively.

I displayed a modeled apple in the browser!

However, when I displayed a model created in Blender in the browser using Three.js, the colors and textures looked different due to differences in rendering environments and material compatibility. Some adjustments are needed to make it look the way I intended.

My day-to-day work mostly involves CMS integration and frontend design and development for business applications, so I rarely get the chance to work on 3D visuals these days.

But playing around with it like this, I once again feel, "Yeah, this is really fun."

Perhaps it was my longing for the moving web back then that naturally drew me toward modern technologies.

Alright, on to Next and Nuxt again today!

Back to the field, where I'll be building the moving web in a different form. 🚀