Hướng Dẫn Three.js: Cẩm Nang Dành Cho Người Mới Bắt Đầu

Three.js là một trong những thư viện JavaScript phổ biến nhất để tạo đồ họa 3D trong trình duyệt web. Được xây dựng trên WebGL, nó đơn giản hóa quá trình tạo và hiển thị đồ họa máy tính 3D động trong trình duyệt web mà không yêu cầu bạn phải học WebGL cấp thấp. Dù bạn đang tìm cách tạo hình ảnh tương tác, trò chơi hoặc trải nghiệm web nhập vai, Three.js cung cấp các công cụ cần thiết để hiện thực hóa ý tưởng của bạn.

Trước khi chúng ta bắt đầu phát triển với Three.js, hãy thử Apidog như một sự thay thế cho Postman cho nhu cầu kiểm tra API của bạn. Apidog cung cấp giao diện trực quan với nhiều tính năng mạnh mẽ cho việc phát triển, kiểm tra và tài liệu API - tất cả đều không có sự cồng kềnh mà nhiều người dùng cảm thấy khó chịu với Postman. Đây là một công cụ hỗ trợ tuyệt vời khi phát triển các ứng dụng web tương tác với API.

nút

Bây giờ, hãy bắt đầu hành trình của chúng ta với Three.js!

1. Thiết lập môi trường của bạn

Cài đặt

Có một số cách để bao gồm Three.js trong dự án của bạn:

Tùy chọn 1: Sử dụng npm (Được khuyến nghị)

npm install three

Sau đó import nó vào tập tin JavaScript của bạn:

import * as THREE from 'three';

Tùy chọn 2: Sử dụng CDN

Thêm đoạn mã này vào tập tin HTML của bạn:

<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>

Tùy chọn 3: Tải xuống và bao gồm cục bộ

Tải thư viện từ trang web Three.js, và bao gồm nó trong HTML của bạn:

<script src="path/to/three.min.js"></script>

Cấu trúc dự án

Đối với một dự án Three.js cơ bản, bạn sẽ cần:

project-folder/
├── index.html
├── style.css
└── script.js

Tập tin index.html của bạn nên bao gồm:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ứng dụng Three.js của tôi</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. Hiểu các nguyên tắc cơ bản

Three.js hoạt động dựa trên một vài khái niệm chính mà bạn cần hiểu:

Các thành phần cốt lõi

Cảnh: Hãy coi đây như một cái container chứa tất cả các đối tượng, đèn và máy ảnh của bạn.
Máy ảnh: Định nghĩa phần nào của cảnh là có thể nhìn thấy (góc nhìn của bạn).
Bộ kết xuất: Vẽ những gì máy ảnh nhìn thấy lên màn hình của bạn.
Đối tượng (Lưới): Các đối tượng 3D trong cảnh của bạn, thường được cấu thành từ hình học và vật liệu.
Đèn: Nguồn ánh sáng cho cảnh của bạn.

Tạo cảnh đầu tiên của bạn

Đây là một ví dụ cơ bản để tạo một khối lập phương quay:

// Tạo cảnh
const scene = new THREE.Scene();

// Tạo máy ảnh
const camera = new THREE.PerspectiveCamera(
    75,                                     // Góc nhìn
    window.innerWidth / window.innerHeight, // Tỉ lệ khung hình
    0.1,                                    // Mặt phẳng cắt gần
    1000                                    // Mặt phẳng cắt xa
);
camera.position.z = 5;

// Tạo bộ kết xuất
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Tạo một khối 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);

// Vòng lặp animation
function animate() {
    requestAnimationFrame(animate);
    
    // Quay khối lập phương
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}
animate();

3. Làm cho ứng dụng của bạn phản hồi

Để đảm bảo ứng dụng Three.js của bạn trông đẹp trên tất cả các thiết bị, bạn cần xử lý việc thay đổi kích thước của cửa sổ:

// Xử lý thay đổi kích thước cửa sổ
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    // Cập nhật bộ kết xuất
    renderer.setSize(width, height);
    
    // Cập nhật máy ảnh
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

4. Thêm vật liệu và ánh sáng

Các cảnh cơ bản chỉ là sự khởi đầu. Hãy cải thiện chất lượng hình ảnh với vật liệu và ánh sáng:

Vật liệu

// Vật liệu tiêu chuẩn với phản chiếu
const material = new THREE.MeshStandardMaterial({
    color: 0x0088ff,       // Màu xanh
    roughness: 0.5,        // Hơi bóng
    metalness: 0.5,        // Hơi kim loại
});

// Vật liệu Phong cho các bề mặt bóng đơn giản
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,       // Màu đỏ
    shininess: 100,        // Rất bóng
    specular: 0x111111     // Màu sắc điểm phản chiếu
});

Ánh sáng

// Thêm ánh sáng môi trường
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// Thêm ánh sáng định hướng (như mặt trời)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Thêm ánh sáng điểm (như bóng đèn)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

5. Tạo hình học khác nhau

Three.js đi kèm với nhiều hình học tích hợp sẵn:

// Hình cầu
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -3;
scene.add(sphere);

// Hình trụ
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = 0;
scene.add(cylinder);

// Hình vành (bánh donut)
const torusGeometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 3;
scene.add(torus);

6. Tạo văn bản trong Three.js

Văn bản có thể được thêm vào cảnh của bạn bằng cách sử dụng TextGeometry:

// Đầu tiên, tải font
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry('Xin chào Three.js!', {
        font: font,
        size: 0.5,
        height: 0.1,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });
    
    const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    const text = new THREE.Mesh(textGeometry, textMaterial);
    
    // Căn giữa văn bản
    textGeometry.computeBoundingBox();
    const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
    text.position.x = -textWidth / 2;
    
    scene.add(text);
});

7. Vẽ đường thẳng

Bạn có thể tạo đường thẳng trong Three.js cho các khung dây hoặc hình ảnh đường đi:

// Tạo các điểm cho đường thẳng
const points = [];
points.push(new THREE.Vector3(-2, 0, 0));
points.push(new THREE.Vector3(0, 2, 0));
points.push(new THREE.Vector3(2, 0, 0));

// Tạo hình học đường thẳng
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

// Tạo vật liệu
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });

// Tạo đường thẳng
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

8. Tương tác và điều khiển

Để cho phép người dùng tương tác với cảnh 3D của bạn, bạn có thể thêm điều khiển:

// Nhập OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Tạo điều khiển
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Thêm hiệu ứng làm mịn
controls.dampingFactor = 0.05;

// Cập nhật vòng lặp animation
function animate() {
    requestAnimationFrame(animate);
    
    // Cập nhật điều khiển
    controls.update();
    
    renderer.render(scene, camera);
}

9. Tải mô hình 3D

Bạn có thể nhập các mô hình được tạo ra trong phần mềm như Blender:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load(
    'path/to/model.gltf',
    // Được gọi khi đã tải xong
    function(gltf) {
        scene.add(gltf.scene);
    },
    // Được gọi trong quá trình tải
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% đã được tải');
    },
    // Được gọi khi có lỗi
    function(error) {
        console.error('Đã xảy ra lỗi', error);
    }
);

10. Mẹo gỡ lỗi và hiệu suất

Bảng Thống Kê

import Stats from 'three/examples/jsm/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
    requestAnimationFrame(animate);
    stats.begin();
    
    // Mã animation của bạn ở đây
    
    stats.end();
    renderer.render(scene, camera);
}

Mẹo hiệu suất

Sử dụng BufferGeometry thay vì Geometry (đã lỗi thời)
Tái sử dụng vật liệu và hình học khi có thể
Đặt renderer.powerPreference = 'high-performance' để sử dụng GPU tốt hơn
Sử dụng Object3D.frustumCulled = true để ẩn đối tượng bên ngoài vùng nhìn thấy của máy ảnh
Tối ưu độ phức tạp của mô hình bằng cách sử dụng ít đa diện hơn khi có thể

Kết luận

Bây giờ bạn đã học những điều cơ bản về Three.js, từ việc thiết lập môi trường đến việc tạo những cảnh 3D tương tác. Đây mới chỉ là sự khởi đầu - Three.js cung cấp một loạt các tính năng để tạo ra những trải nghiệm web 3D tuyệt vời.

Để làm sâu sắc thêm kiến thức của bạn, hãy khám phá tài liệu Three.js chính thức và bộ sưu tập ví dụ. Cộng đồng cũng rất năng động trên các diễn đàn và GitHub, cung cấp tài nguyên và hỗ trợ cho những lập trình viên ở mọi cấp độ.

Hãy nhớ rằng, cách tốt nhất để học là thử nghiệm. Bắt đầu với những dự án đơn giản và từ từ nâng cấp lên các cảnh phức tạp hơn. Với sự thực hành và kiên nhẫn, bạn sẽ tạo ra những trải nghiệm web 3D ấn tượng chỉ trong thời gian ngắn!

Chúc bạn mã hóa vui vẻ với Three.js!

nút