Three.js là một thư viện mã nguồn mở mạnh mẽ giúp bạn xây dựng các ứng dụng đồ họa 3D trong trình duyệt web. Để tạo ra các cảnh 3D, Three.js sử dụng WebGL, một công nghệ nhúng giúp các nhà phát triển thể hiện đồ họa 3D mà không cần phải dựa vào các plugin bên ngoài.
Bài viết này sẽ hướng dẫn bạn chi tiết cách cài đặt và sử dụng thư viện Three.js trong JavaScript.
Giới thiệu về Three.js
Three.js được biết đến như một thư viện đồ họa 3D JavaScript dùng để tạo ra các hoạt cảnh 3D phong phú cho các ứng dụng web. Nó mang đến cho các lập trình viên những công cụ mạnh mẽ để dễ dàng tạo ra các cảnh 3D trực quan và hấp dẫn.
Tính năng nổi bật của Three.js
- Hiển thị 3D: Khả năng hiển thị các đối tượng 3D phong phú với độ chi tiết cao.
- Độ tương thích cao: Hoạt động mượt mà trên nhiều trình duyệt hiện đại.
- Tiện ích mở rộng: Hỗ trợ nhiều dạng hình học, vật liệu, ánh sáng.
- Dễ dàng tích hợp: Có thể dễ dàng nhúng vào các dự án web hiện có.
Chuẩn bị môi trường phát triển
Trước khi bắt đầu cài đặt thư viện Three.js, hãy chắc chắn rằng bạn đã cài đặt môi trường phát triển JavaScript cơ bản. Bạn cần một trình soạn thảo mã nguồn tốt như VSCode, Sublime Text hoặc Atom.
Cài đặt Node.js và npm
Nếu bạn chưa có Node.js và npm, bạn cần cài đặt chúng trước. Hãy truy cập trang Node.js và tải bản cài đặt tương ứng với hệ điều hành của bạn. Sau khi cài đặt xong, bạn có thể kiểm tra bằng lệnh:
node -v
npm -v
Nếu mọi thứ đã được cài đặt đúng cách, bạn sẽ thấy phiên bản Node.js và npm hiện ra.
Cài đặt thư viện Three.js
Bạn có thể cài đặt Three.js bằng nhiều cách khác nhau như tải trực tiếp file từ trang chủ, hoặc sử dụng npm để quản lý các thư viện.
Cài đặt bằng npm
Cách phổ biến nhất là sử dụng npm (Node Package Manager) để cài đặt Three.js. Mở terminal và chạy lệnh sau:
npm install three
Lệnh này sẽ tải về thư viện Three.js và thêm vào dự án của bạn.
Liên kết trực tiếp từ CDN
Nếu bạn không muốn sử dụng npm, bạn có thể liên kết thư viện Three.js trực tiếp từ CDN. Hãy thêm đoạn mã sau vào phần <head> của file HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
Với cách này, bạn sẽ không cần phải tải về hoặc quản lý gói thư viện thủ công.
Tạo dự án đầu tiên với Three.js
Bây giờ, hãy đi đến phần thú vị nhất: tạo ứng dụng đầu tiên sử dụng Three.js. Chúng ta sẽ bắt đầu với một dự án đơn giản nhằm hiển thị một khối lập phương xoay 3D.
Cấu trúc dự án
Tạo một thư mục mới cho dự án của bạn và trong thư mục đó, tạo các file sau:
index.htmlmain.jsstyle.css(tùy chọn)
Nội dung file index.html
Bạn hãy bắt đầu bằng việc thiết lập cấu trúc cơ bản cho trang HTML của mình. Mở file index.html và thêm nội dung sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Basic Scene</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
Nội dung file main.js
Tiếp theo, hãy thêm mã JavaScript để tạo ra cảnh 3D cơ bản. Mở file main.js và thêm đoạn mã sau:
// Import Three.js
import * as THREE from 'three';
// Tạo một cảnh mới
const scene = new THREE.Scene();
// Tạo một camera mới
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// Tạo một renderer mới và thêm nó vào tài liệu HTML
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Tạo một hình lập phương
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Đặt vị trí của camera
camera.position.z = 5;
// Tạo hàm animate
function animate() {
requestAnimationFrame(animate);
// Xoay khối lập phương
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Render cảnh
renderer.render(scene, camera);
}
// Gọi hàm animate
animate();
Nội dung file style.css (tùy chọn)
Nếu bạn muốn thêm một chút phong cách cho trang web, bạn có thể tạo một file style.css và thêm vào các quy tắc CSS cụ thể.
body {
background-color: #000;
margin: 0;
}
Đừng quên liên kết file style.css trong file HTML của bạn:
<link rel="stylesheet" href="style.css">
Mở trang HTML trong trình duyệt
Cuối cùng, bạn hãy mở trang index.html trong trình duyệt của mình. Bạn sẽ thấy một khối lập phương xoay tròn trên màn hình. Chúc mừng bạn đã hoàn thành ứng dụng 3D đầu tiên của mình với Three.js!
Kết luận
Three.js là một công cụ mạnh mẽ và dễ sử dụng cho việc tạo ra các ứng dụng web 3D. Với các bước cài đặt và ví dụ đơn giản ở trên, hy vọng bạn đã có cái nhìn cơ bản về cách sử dụng thư viện này. Bạn có thể tùy chỉnh và mở rộng dự án của mình bằng cách học thêm về ánh sáng, vật liệu, tương tác người dùng, và nhiều hơn nữa mà Three.js hỗ trợ.
Đừng ngần ngại khám phá thêm tài liệu và ví dụ trên trang chủ của Three.js để nâng cao kỹ năng lập trình của bạn. Chúc bạn thành công và sáng tạo nhiều dự án thú vị với Three.js!
Comments