Chasing 3D Dreams (WebGL) Back Then — Playing with Three.js and Blender

I used to spend time looking at all kinds of websites, captivated by objects rotating across the first view or animations with a sense of depth — "Amazing!" I thought. Back then, I decided to give it a try and picked up Three.js and Blender.

I joined Liberogic driven by that passion, but to be honest... these days I mostly work on more practical stuff like enterprise applications and headless CMS construction (laughs). Not that I'm complaining!

Now in my fourth year, I'd like to revisit those basics around WebGL, remembering back to my old fascination with dynamic web experiences.

What is WebGL

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

Long ago, plugins like Flash Player were the standard, but they had the problem of being difficult to run on smartphones.

By contrast, WebGL has native support, making it the technology that opened the door to 3D expression in the mobile era that followed.

Hands-on experience

Displaying 3D in the browser with Three.js

Three.js is a trademark-compatible library that makes it easy to create 3D content using JavaScript.

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

The Renderer is the main object in Three.js. When you pass Scene and Camera to the Renderer, the portion of the 3D Scene within the camera's viewing frustum is rendered (drawn) to 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);

The 3D cube is then created using a mesh, which is a display object. To create a mesh, you need to prepare a geometry (shape) and a material (substance).

//ジオメトリ（立方体）
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 add animation.

We'll skip the particle implementation around it this time!

function animate() {
  requestAnimationFrame(animate);

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

animate()

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

Creating 3D models in Blender

Blender is a free, open-source, integrated software that covers the entire 3D production workflow—from 3D modeling and animation to rendering, game development, and video editing. However, Blender alone cannot create WebGL sites.

Like Three.js, Blender uses mesh objects to create shapes and applies materials to add color and surface texture. You then adjust lighting to control how light falls and casts shadows, and position and orient the camera before rendering.

By combining nodes, you can create realistic textures—adding gradients, metallic finishes, glowing effects, and more.

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 import it into Three.js.

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

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

I got a modeled apple to display in the browser!

However, when displaying a model created in Blender in the browser using Three.js, differences in rendering environments and material compatibility cause the colors and textures to appear different than expected. Some adjustment is needed to achieve the desired appearance.

My daily projects mostly involve CMS integration and frontend design/development for business applications, so I haven't had much opportunity to work with 3D expressions in my own work.

But experimenting like this reminds me: "This really is fun."

Perhaps because I had that dynamic web aspiration back then, I naturally gravitated toward modern technologies.

All right, it's Next and Nuxt again!

Back to the field, creating dynamic web experiences in new ways. 🚀