Introduction to three.js: Concepts, Capabilities, and Basic Usage

What is three.js

Before learning three.js, we need to understand WebGL. WebGL is a JavaScript API for rendering interactive 3D and 2D graphics in compatible browsers without plugins, using the HTML5 canvas element; it can be thought of as a web‑based OpenGL.

Because WebGL’s low‑level API is complex, three.js was created as a higher‑level JavaScript 3D library that abstracts WebGL, allowing front‑end developers to build 3D scenes without deep knowledge of graphics mathematics.

What can three.js do

It encapsulates WebGL, so anything WebGL can render, three.js can also render.

It extends WebGL with features such as object picking for interaction.

It offers high performance and extensibility.

It supports import/export, allowing models created in 3D software to be used in three.js.

It provides multiple fallback renderers: WebGLRenderer, CanvasRenderer, and CSS3DRenderer.

How to use three.js

Three.js lowers the development barrier; mastering a few core concepts lets you quickly construct a 3D scene.

Coordinate System

Both WebGL and three.js use a right‑handed coordinate system, as shown below.

Camera

Controls the projection. Common cameras are PerspectiveCamera (mimics human eye perspective) and OrthographicCamera (parallel projection).

Scene

The container for all 3D objects; objects must be added to the scene to be rendered.

Renderer

Renders the scene onto a canvas. Typical renderers are WebGLRenderer, CanvasRenderer, and CSS3DRenderer.

Lights

Three.js provides various light types (ambient, point, spot, etc.) that can be added to the scene.

Materials

Materials define how geometry appears. Examples include MeshBasicMaterial, MeshLambertMaterial, and custom ShaderMaterial.

Geometry

Basic shapes are available in 2D (plane, circle) and 3D (sphere, cube). Custom geometry can also be created or imported.

Particle System

Three.js includes a particle system for creating many small objects efficiently.

Example: Building a Simple 3D Space

Creating Basic Elements

First, create a camera, renderer, and scene.

Creating a Panorama Background

Imagine the viewer’s eye as a camera; by mapping a panoramic image onto a sphere (or a cube for efficiency), we can create an immersive 3D background.

Because true curves are approximated by many line segments, many points and faces are required for a seamless sphere, which is computationally expensive. The common approach is to project the panorama onto a cube (skybox) and use six square faces.

Note: When adding additional textured geometry inside the skybox, flickering may occur; using six PlaneGeometry faces assembled into a cube can mitigate this.

Animating the Scene

Movement can be achieved by changing the camera’s position or the objects’ positions, then repeatedly calling renderer.render inside requestAnimationFrame.

Changing Camera Position

Moving the camera mimics real‑world navigation; adjust camera.position to reposition the viewpoint.

Changing Object Position

Altering an object’s position is useful for object‑centric transformations.

Combined Use

Both techniques can be combined, e.g., moving the camera while also shifting the background to create a larger interactive space.

Changing Viewpoint

Implement drag‑to‑rotate and device‑orientation controls. Dragging maps screen X/Y to horizontal/vertical camera rotation. Device orientation can be handled via DeviceOrientationControls from three.js examples, though performance may vary on some Android devices.

Page Interaction

To display information when a product is clicked, we need to map 2D click coordinates to the 3D world. three.js provides Raycaster with setFromCamera to cast a ray from the camera through the click point and detect intersected objects.

After identifying the clicked object, you can render a 2D plane in the 3D scene or overlay a DOM element with CSS to show details.

Conclusion

Using the basic concepts of three.js, we have built a simple interactive 3D example.

Further Resources

For more examples and deeper exploration, refer to the links below.

Representative Projects

HexGL – a 3D racing game (code on GitHub).

ThroughTheDark – an interactive story showcasing UI design with three.js.

Additional implementations can be found on the three.js official website.

Other Forms

A‑Frame ( https://aframe.io/ ) allows VR creation via HTML, further lowering the entry barrier; examples are also available in the three.js repository.

Beyond 3D Worlds

three.js and WebGL can be extended to areas such as panoramic audio (e.g., Google’s Omnitone project) and 3DTouch interaction, opening new possibilities for immersive experiences.

Feel free to leave comments, share knowledge, or contribute further examples.