Mở đầu

Nếu bạn đang bắt đầu học Three.js, rất có thể bạn đã từng gặp những tình huống như:

• Copy code từ tutorial nhưng không hiểu thật sự nó hoạt động thế nào
• Scene render được nhưng không hiểu camera đang nhìn từ đâu
• Không hiểu vì sao object tự nhiên biến mất
• Không hiểu tại sao đổi position lại khiến object “bay mất”
• Không phân biệt được:
  • Mesh
  • Geometry
  • Material
  • Group
  • Scene

Kết quả là:

“Làm theo tutorial thì được, tự build thì không.”

Đây là vấn đề gần như tất cả người mới học 3D đều gặp phải.

Và thật ra nguyên nhân không nằm ở việc bạn code kém.

Mà vì:

bạn đang học một cách suy nghĩ hoàn toàn khác với lập trình web thông thường.

Trong frontend thông thường:

• bạn làm việc với HTML
• CSS
• DOM
• layout 2D

Nhưng trong Three.js:

• bạn đang làm việc với không gian 3 chiều
• camera
• góc nhìn
• vector
• rotation
• transform
• matrix

Đó là lý do:

nhiều người học Three.js cảm thấy “rất mơ hồ”.

Mình cũng từng như vậy.

Và sau khi xây dựng editor 3D thực tế với:

• drag
• rotate
• scale
• snapping
• transform controls
• instancing
• selection system
• collision
• editor architecture

… mình nhận ra một điều cực kỳ quan trọng:

Điều khó nhất của Three.js không phải API.
Mà là tư duy không gian 3D.

Bài viết này sẽ giúp bạn hiểu:

• Three.js thực chất là gì
• 3D rendering hoạt động ra sao
• những khái niệm cốt lõi nhất
• và cách suy nghĩ đúng khi bắt đầu học 3D.

Mục tiêu của bài này không phải:

“copy code để render cube.”

Mà là:

giúp bạn hiểu nền tảng thật sự của thế giới 3D.

---

1. Three.js thực chất là gì?

Three.js không phải game engine

Đây là điều đầu tiên người mới thường hiểu nhầm.

Three.js KHÔNG phải:

• Unity
• Unreal Engine
• Godot

Nó không phải một game engine hoàn chỉnh.

Three.js chỉ là:

thư viện JavaScript giúp render đồ họa 3D trên browser thông qua WebGL.

Hiểu đơn giản:

Công nghệ	Vai trò
HTML	Tạo cấu trúc
CSS	Style giao diện
JavaScript	Logic
Three.js	Render 3D

Nó giống như:

“canvas để bạn xây dựng thế giới 3D bằng code.”

---

Three.js hoạt động dựa trên WebGL

Three.js thực chất là lớp abstraction phía trên WebGL.

Nếu dùng WebGL trực tiếp:

• rất phức tạp
• phải thao tác shader
• buffer
• GPU pipeline

Ví dụ để vẽ một hình tam giác bằng WebGL thuần:

• có thể mất vài trăm dòng code.

Nhưng với Three.js:

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial()

const mesh = new THREE.Mesh(
  geometry,
  material
)

scene.add(mesh)

→ bạn đã có object 3D.

Đó là lý do Three.js trở thành thư viện phổ biến nhất cho web 3D.

---

2. Three.js hoạt động như thế nào?

Đây là phần cực kỳ quan trọng.

Rất nhiều người học Three.js nhưng không hiểu:

chuyện gì đang xảy ra phía sau.

---

Một frame render hoạt động ra sao?

Hãy tưởng tượng:

Scene

= thế giới

Camera

= mắt người

Renderer

= máy quay + màn hình

Workflow sẽ là:

Scene → Camera → Renderer → Màn hình

---

Step-by-step

B1 — Tạo scene

const scene = new THREE.Scene()

Scene là nơi chứa:

• object
• light
• model
• group
• mọi thứ trong thế giới 3D

Bạn có thể tưởng tượng:

Scene giống một “vũ trụ nhỏ”.

---

B2 — Tạo camera

const camera = new THREE.PerspectiveCamera(
  75,
  width / height,
  0.1,
  1000
)

Camera là:

thứ quyết định bạn nhìn scene như thế nào.

Nếu scene tồn tại nhưng camera không nhìn vào scene: → bạn sẽ không thấy gì.

Đây là lỗi cực kỳ phổ biến của beginner.

---

B3 — Tạo renderer

const renderer = new THREE.WebGLRenderer()

Renderer có nhiệm vụ:

• lấy dữ liệu từ scene
• render theo góc nhìn camera
• vẽ lên màn hình

---

B4 — Render

renderer.render(scene, camera)

Đây là lệnh:

“hãy render thế giới này.”

---

3. Tư duy quan trọng nhất trong 3D: Coordinate System

Người mới thường nghĩ:

3D chỉ là “2D nhưng thêm chiều nữa”.

Sai hoàn toàn.

Trong 3D:

• mọi thứ phụ thuộc vào tọa độ
• góc nhìn
• transform

Nếu không hiểu coordinate system: → bạn sẽ luôn bị “mù phương hướng”.

---

4. Trục tọa độ trong Three.js

Trong frontend bình thường:

Trục	Ý nghĩa
X	trái → phải
Y	trên → dưới

Nhưng trong Three.js:

Trục	Ý nghĩa
X	trái ↔ phải
Y	xuống ↕ lên
Z	trước ↔ sau

---

Điều khiến nhiều người bị nhầm

Trong web:

• Y tăng → đi xuống

Trong Three.js:

• Y tăng → đi lên

Đây là thứ khiến rất nhiều beginner bị loạn.

---

Ví dụ trực quan

cube.position.x += 1

→ object đi sang phải.

---

cube.position.y += 1

→ object bay lên.

---

cube.position.z += 1

→ object tiến gần camera hơn.

---

5. Position, Rotation, Scale — bộ ba quan trọng nhất

Mọi object trong Three.js đều có:

mesh.position
mesh.rotation
mesh.scale

Đây là:

nền tảng của mọi editor 3D.

---

6. Position

Dùng để thay đổi vị trí object.

mesh.position.set(1, 2, 3)

Nghĩa là:

• x = 1
• y = 2
• z = 3

---

7. Rotation

Dùng để xoay object.

mesh.rotation.y = Math.PI / 2

Điều quan trọng:

Three.js dùng radian, không dùng độ.

---

Vì sao dùng radian?

Ví dụ:

Độ	Radian
90°	Math.PI / 2
180°	Math.PI
360°	Math.PI * 2

Người mới thường bug ở đây rất nhiều.

---

8. Scale

Scale dùng để thay đổi kích thước.

mesh.scale.set(2, 2, 2)

→ object lớn gấp đôi.

---

9. Mesh là gì?

Đây là khái niệm cực kỳ quan trọng.

Rất nhiều beginner dùng Mesh nhưng không hiểu nó là gì.

---

Mesh = Geometry + Material

Mesh = Geometry + Material

---

Geometry là gì?

Geometry = hình dạng.

Ví dụ:

new THREE.BoxGeometry()

→ hình hộp.

---

new THREE.SphereGeometry()

→ hình cầu.

---

new THREE.PlaneGeometry()

→ mặt phẳng.

---

Material là gì?

Material = cách object hiển thị.

Ví dụ:

• màu sắc
• texture
• độ bóng
• ánh sáng
• transparency

---

Ví dụ hoàn chỉnh

const geometry = new THREE.BoxGeometry()

const material = new THREE.MeshStandardMaterial({
  color: '#ff0000'
})

const cube = new THREE.Mesh(
  geometry,
  material
)

---

10. Vì sao object không hiện?

Đây là câu hỏi beginner gặp nhiều nhất.

---

Nguyên nhân 1 — Camera không nhìn thấy object

Ví dụ:

camera.position.z = 5

Nếu object nằm phía sau camera: → không thấy gì.

---

Nguyên nhân 2 — Không có ánh sáng

Nếu dùng:

MeshStandardMaterial

mà không có light: → scene sẽ đen.

Ví dụ:

const light = new THREE.DirectionalLight()
scene.add(light)

---

Nguyên nhân 3 — Object nằm ngoài frustum

Camera chỉ render trong khoảng:

near → far

Ví dụ:

0.1 → 1000

Nếu object nằm ngoài: → object biến mất.

---

11. Render loop — trái tim của Three.js

Trong web bình thường:

• code chạy 1 lần.

Nhưng trong game/3D:

• scene phải render liên tục.

---

Animation loop

function animate() {
  requestAnimationFrame(animate)

  renderer.render(scene, camera)
}

animate()

Đây gọi là:

render loop hoặc game loop.

---

Vì sao cần render liên tục?

Bởi vì:

• camera thay đổi
• object di chuyển
• animation thay đổi
• physics thay đổi

Nếu không render liên tục: → scene sẽ “đóng băng”.

---

12. OrbitControls — thứ khiến ai cũng thích Three.js

Nếu từng dùng:

• Blender
• Unity
• Sketchfab

thì bạn đã quen với kiểu:

• xoay camera
• zoom
• pan

Three.js có sẵn điều này:

const controls = new OrbitControls(
  camera,
  renderer.domElement
)

---

OrbitControls giúp:

• rotate camera
• zoom
• pan
• inspect scene

Nó khiến scene:

“có cảm giác thật hơn rất nhiều.”

---

13. Group và hierarchy

Trong editor 3D:

• object thường có cha/con.

Ví dụ:

• xe hơi
  • bánh xe
  • cửa xe
  • kính

Nếu move xe: → toàn bộ child move theo.

---

Group

const group = new THREE.Group()

Dùng để gom object.

---

Hierarchy rất quan trọng

Đây là nền tảng của:

• editor
• game object
• transform system

---

14. Điều người mới nên học trước tiên

Đừng học:

• shader
• postprocessing
• physics
• optimization

quá sớm.

Đây là sai lầm rất phổ biến.

---

Roadmap đúng cho beginner

Giai đoạn 1 — Hiểu nền tảng

Học:

• Scene
• Camera
• Renderer
• Mesh
• Geometry
• Material
• Position
• Rotation
• Scale

---

Giai đoạn 2 — Interaction

Học:

• Raycasting
• Selection
• OrbitControls
• Events

---

Giai đoạn 3 — Real project

Học:

• GLTF
• Instancing
• Optimization
• Editor architecture

---

15. Dự án đầu tiên nên là gì?

Sai lầm lớn nhất:

“Build MMORPG.”

Hãy bắt đầu bằng project nhỏ nhưng thực tế.

---

Nên làm

• room editor
• furniture editor
• map editor
• product configurator

---

Không nên làm khi mới học

• MMO
• multiplayer realtime
• physics-heavy game
• metaverse clone

---

16. Điều quan trọng nhất khi học Three.js

Three.js không khó vì syntax.

API thật ra khá đơn giản.

Điều khó là:

tư duy không gian 3D.

Khi bạn bắt đầu hiểu:

• world space
• local space
• hierarchy
• transform
• matrix
• coordinate conversion

… bạn sẽ tiến bộ rất nhanh.

---

17. Điều mình ước biết sớm hơn

Khi mới học Three.js, mình nghĩ:

“học API là đủ.”

Nhưng sau khi build editor thật:

• drag system
• rotate snapping
• collision
• transform hierarchy
• instancing
• selection system

… mình nhận ra:

3D engineering thực chất là bài toán tư duy.

Và đó là thứ khiến Three.js:

• khó
• nhưng cũng cực kỳ thú vị.

---

Kết bài

Trong bài tiếp theo, chúng ta sẽ bắt đầu xây dựng:

• selection system
• drag object
• rotate
• scale
• snapping
• transform controls

và từng bước biến một scene đơn giản thành:

một 3D editor thực tế giống Blender mini trên web.