[Web 3D 101] Three.js là gì? Phép thuật mang cả không gian 3D lên trình duyệt

Trình duyệt web của chúng ta thực ra rất mạnh. Nó có một API chuẩn gọi là WebGL giúp render đồ họa 2D và 3D tận dụng sức mạnh của Card màn hình (GPU).

Nhưng sự thật mất lòng: Viết WebGL thuần (raw WebGL) là một cơn ác mộng. Để vẽ được một hình lập phương (cube) đơn giản trên màn hình, bạn phải viết hàng trăm dòng code khó nhằn, dính líu đến toán học ma trận, vector, và một ngôn ngữ lập trình shader kỳ lạ có tên là GLSL

1. Bản chất của Three.js

Three.js là một thư viện JavaScript mã nguồn mở, hoạt động như một lớp bọc (wrapper) phía trên WebGL

Thay vì bắt bạn phải tự tính toán ma trận để vẽ từng điểm ảnh, Three.js cung cấp cho bạn các object (đối tượng) JavaScript cực kỳ dễ hiểu. Bạn ra lệnh: "Three.js, hãy tạo cho tôi một hình cầu màu đỏ, đặt ở góc này, đánh ánh sáng từ góc kia". Three.js sẽ tự động dịch câu lệnh đó ra ngôn ngữ WebGL loằng ngoằng và đẩy xuống GPU xử lý.

2. Ba trụ cột "khai thiên lập địa" trong Three.js

Để tạo ra một thế giới 3D, Three.js yêu cầu bạn phải thiết lập 3 thành phần cốt lõi. Hãy tưởng tượng bạn đang đạo diễn một vở kịch:

• Scene (Sân khấu): Đây là không gian 3D chứa mọi thứ. Bạn sẽ ném nhân vật, nhà cửa, xe cộ, ánh sáng... vào cái Scene này.
• Camera (Máy quay phim): Sân khấu thì rộng lớn, nhưng người xem (user) chỉ thấy được những gì Camera chĩa vào. Phổ biến nhất là PerspectiveCamera (Máy quay phối cảnh) – mô phỏng lại đúng cách mắt người nhìn đời thực: vật ở gần thì to, vật ở xa thì nhỏ.
• Renderer (Người kết xuất): Đây là anh thợ rửa ảnh. Renderer sẽ lấy dữ liệu từ Scene và góc nhìn từ Camera để "in" ra một bức ảnh 2D và dán nó lên thẻ <canvas> trên file HTML của bạn. Quá trình này lặp lại 60 lần mỗi giây (60 FPS) để tạo ra cảm giác chuyển động mượt mà.

3. Tạo hình một vật thể: Công thức Mesh = Geometry + Material

Có sân khấu rồi, giờ chúng ta cần diễn viên. Trong Three.js, một vật thể 3D được gọi là một Mesh. Để tạo ra một Mesh, bạn cần kết hợp 2 thứ:

1. Geometry (Bộ khung/Hình khối): Xác định hình dáng của vật thể (điểm, cạnh, mặt phẳng). Three.js có sẵn một đống hình cơ bản như BoxGeometry (hình hộp), SphereGeometry (hình cầu), CylinderGeometry (hình trụ).
2. Material (Chất liệu/Da thịt): Quyết định vật thể đó trông như thế nào. Nó có màu gì? Nó nhám hay bóng bẩy? Nó có phản chiếu ánh sáng hay trong suốt như kính không? (Ví dụ: MeshStandardMaterial là loại chất liệu phản ứng với ánh sáng rất chân thực)

Mesh = Geometry + Material. Gom xương và da lại, bạn sẽ có một nhân vật hoàn chỉnh để thêm (scene.add) vào sân khấu.

4. Ánh sáng (Lighting) - Linh hồn của thế giới 3D

Nếu bạn tạo một Mesh bằng vật liệu xịn, thêm nó vào Scene nhưng quên không bật đèn, màn hình của bạn sẽ tối thui (hoặc đen sì như tiền đồ chị Dậu). Thế giới 3D cần ánh sáng để tạo ra bóng đổ (shadow) và chiều sâu. Three.js cung cấp các loại đèn y như studio đời thực:

• AmbientLight: Đèn nền chiếu sáng đều khắp mọi nơi (không có bóng đổ).
• PointLight: Bóng đèn tròn, tỏa ánh sáng ra mọi hướng.
• DirectionalLight: Ánh sáng mặt trời, chiếu song song từ một hướng rất xa (hoàn hảo để tạo bóng râm).

Lời kết

Việc đưa các mô hình 3D lên web không còn là đặc quyền của các công ty game hay các trang web siêu khủng nữa. Với một chút kiến thức về JavaScript, Three.js biến bạn thành một nhà thiết kế không gian thực thụ. Nó mở ra cánh cửa cho hàng loạt ứng dụng như: Web thực tế ảo (WebVR/WebXR), trưng bày sản phẩm 3D cho E-commerce, hay các Portfolio cá nhân đậm chất "tương lai".

Tuy nhiên, viết Three.js bằng JavaScript thuần đôi khi vẫn khá dài dòng. Nếu anh em đang làm việc với hệ sinh thái React, thế giới 3D còn dễ dàng hơn gấp bội với thư viện React Three Fiber. Nhưng đó sẽ là câu chuyện cho một bài blog khác!

Cảm ơn anh em đã theo dõi bài viết. Nếu thấy hứng thú với mảng Front-end 3D này, đừng quên Upvote nhé!