Giới thiệuCác trình duyệt hiện đại hỗ trợ WebGL. Với WebGL, bạn có thể trực tiếp sử dụng các tài nguyên xử lý của card đồ họa (GPU) và tạo các cảnh 3D với hiệu năng cao. Tuy nhiên, lập trình WebGL rất phức tạp, cần viết nhiều code, dễ gặp lỗi. Three.js là một thư viện JS để tạo và hiển thị đồ họa 3D trên trình duyệt sử dụng WebGL. Three.js giúp việc lập trình 3D trên trình duyệt dễ dàng hơn. Show Bạn có thể tìm hiểu lịch sử phát triển của thư viện ở Wikipedia: Three.js - Wikipedia Trang chủ của thư viện: Three.js – JavaScript 3D Library Manual chính thức từ trang chủ: Three.js Manual Bạn có thể học theo sách "Learn Three.js". Sách này mô tả đầy đủ các mục, có nhiều ví dụ: Learn Three.js - Third Edition | Packt Bạn có thể xem ví dụ của sách trên online ở đây: All (150+) learning Three.js third edition examples online - SmartJava Bạn cũng có thể học theo tutorial sau: Discover Three.js Các bài viết trên Viblo: Three.js - Viblo Các yêu cầu để sử dụng Three.jsĐể chạy một trang web sử dụng Three.js, trình duyệt của bạn phải hỗ trợ WebGL. Ngoài ra, để chạy các ví dụ mà tôi sẽ viết thì trình duyệt của bạn cũng cần hỗ trợ load script dạng module, hỗ trợ lập trình hướng đối tượng trong JS. Có lẽ bạn sẽ không cần quá quan tâm vì hầu hết các trình duyệt hiện nay đều đã hỗ trợ tất cả những điều đó rồi. Các source code đi kèm được tôi đẩy lên GitHub để bạn có thể lấy về: https://github.com/lockex1987/learn-threejs Các source code đều là các file định dạng text ( Để chạy các file ví dụ mà tôi viết ở máy của bạn, bạn
cần có web server vì một số ví dụ có tải các tài nguyên ngoài cho Texture và model. Ngoài ra các ví dụ viết kiểu JS module nên chắc chắn cần web server. Bạn không thể chạy file html dạng Bạn có thể tạo một web server đơn giản bằng PHP như sau:
Tải thư viện Three.jsBạn có thể download file zip release từ GitHub ở địa chỉ sau: Releases · mrdoob/three.js File download khá
là nặng, tầm hơn 300MB do chứa cả documentation, editor, code HTML của các ví dụ,... Do đó bạn không nên làm cách này. Bạn chỉ cần một file thư viện Three.js core ở thư mục Cấu trúc thư mục cùng các file mà bạn cần là:
Bạn có thể sử dụng CDN ở địa chỉ sau: https://unpkg.com/browse/three/ Ví dụ địa chỉ của thư viện Three.js core là: https://unpkg.com//build/three.module.js Địa chỉ của thư viện bổ sung nếu cần sử dụng OrbitControls là: https://unpkg.com//examples/jsm/controls/OrbitControls.js Các ví dụ tôi viết sẽ sử dụng CDN. Phiên bản sử dụng là r137 (release ngày
28/1/2022). Chú ý bạn cần đồng bộ phiên bản của thư viện Three.js core ở thư mục Bạn có thể sử dụng npm:
Lệnh npm trên thực hiện khá là nhanh do chỉ download các thư mục Nếu bạn có nhu cầu cần nâng cấp giữa các phiên bản thì có thể làm theo hướng dẫn ở địa chỉ sau: Migration Guide · mrdoob/three.js Wiki · GitHub Tạo khung HTML, CSS, JS cho các ví dụMỗi ví dụ tôi viết thường bao gồm ba file: một file HTML, một file CSS, một file JS. Chúng ta hãy tạo một file khung HTML (
Trang web chỉ chứa một thẻ Chú ý chúng ta load file JS theo kiểu module (thẻ Khung file CSS (
Các style đảm bảo cảnh 3D của chúng ta sẽ chiếm toàn màn hình và không bị scroll. Khung file JS (
Ở đầu file JS, chúng ta sẽ import các class của Three.js cần sử dụng. Tiếp theo chúng ta khai báo class ThreejsExample. Các nghiệp vụ của chương trình sẽ ở trong class này. Cuối cùng chúng ta sẽ khởi tạo một đối tượng ThreejsExample để thực thi các nghiệp vụ. Các ví dụ có phần HTML và CSS gần như giống nhau hết, chỉ có phần JS là khác nhau. Ví dụ 01.01 - Khung cơ bản Ví dụ trên chỉ hiển thị một trang web trắng cùng thông báo "Phiên bản Three.js là: 137". Render một đối tượng 3D cơ bảnChúng ta hãy cùng render một hình lập phương 3D với ít code nhất gồm 6 bước. Bước 1: Tạo một Scene để chứa các đối tượng 3D (Mesh), các nguồn sáng (Light).
Bước 2: Tạo một Camera để chỉ định vị trí nhìn, hướng nhìn. Chúng ta sẽ tìm hiểu thêm về các tham số khi khởi tạo Camera ở các bài sau.
Bước 3: Tạo một Renderer để render. Chúng ta thường dùng WebGLRenderer. Ngoài ra còn có Renderer dựa vào CSS, SVG nhưng ít được sử dụng. Chúng ta sẽ truyền đối tượng thẻ canvas cho Renderer. Sau này, đối tượng canvas có thể lấy lại bằng thuộc tính Chúng ta thiết lập màu nền của là màu đen (
Bước 4: Tạo một đối tượng Mesh hình lập phương và thêm nó vào Scene. Mesh được tạo lên từ Geometry và Material. Chúng ta sẽ dùng MeshNormalMaterial hoặc MeshBasicMaterial để chưa cần tới Light mà vẫn nhìn thấy đối tượng. Chúng ta cũng thiết lập vị trí của đối tượng.
Bước 5: Chúng ta yêu cầu Renderer hãy render Scene với Camera đi.
Bước 6: Khởi tạo đối tượng ThreejsExample để chạy những nghiệp vụ trên.
Toàn bộ code đầy đủ là (
Ví dụ 01.02 - Scene đầu tiên Nếu bạn mở ví dụ trên trình duyệt, chúng ta sẽ thấy một hình lập phương như sau: Ví dụ đơn giản của chúng ta chỉ sử dụng các đối tượng cơ bản sau:
Các cảnh 3D đều được tạo từ các đối tượng cơ bản trên, cùng với đối tượng cơ bản khác là Light mà chúng ta chưa nhắc đến. |