Tiếng Việt

Hướng dẫn WebGL

Ứng dụng WebGL

Ví dụ WebGL

WebGL - Khối Interative

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của WebGL. Chúng ta sẽ tạo một khối interative mà bạn có thể xoay bằng chuột. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ hướng dẫn bạn từng bước với sự kiên nhẫn của một con rùa già. Hãy cùng bắt đầu!

WebGL - Interactive Cube

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

Trước khi chúng ta bắt đầu vẽ khối của mình, hãy nhanh chóng qua một số khái niệm cơ bản.

WebGL là gì?

WebGL (Web Graphics Library) là một API JavaScript cho phép chúng ta render hình ảnh 3D trong trình duyệt web. Nó giống như tặng cho trang web của bạn siêu năng lực để tạo ra những hiệu ứng thị giác stunning!

Điều chúng ta cần

  1. Một trình soạn thảo văn bản (như Notepad++ hoặc Visual Studio Code)
  2. Một trình duyệt web (Chrome, Firefox hoặc bất kỳ trình duyệt hiện đại nào)
  3. Một chút tò mò và một chút kiên nhẫn!

Ví dụ - Vẽ một khối interative

Bước 1: Thiết lập HTML

Đầu tiên, hãy tạo khung công tác của trang web của chúng ta. Mở trình soạn thảo văn bản và tạo một tệp mới có tên interactive_cube.html. Sao chép và dán mã sau:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL Interactive Cube</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Mã WebGL của chúng ta sẽ ở đây
</script>
</body>
</html>

Điều này thiết lập cấu trúc HTML và bao gồm thư viện Three.js, giúp công việc WebGL của chúng ta dễ dàng hơn.

Bước 2: Tạo cảnh

Bây giờ, hãy thêm một chút JavaScript để tạo cảnh 3D của chúng ta. Thay thế注释 trong thẻ script bằng mã sau:

// Thiết lập cảnh, camera và bộ render
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// Tạo một khối
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

Giải thích:

  • Chúng ta tạo một cảnh, giống như sân khấu cho các đối tượng 3D của mình.
  • Máy ảnh xác định góc nhìn của chúng ta.
  • Bộ render chịu trách nhiệm vẽ cảnh của chúng ta.
  • Chúng ta tạo một khối sử dụng BoxGeometry và cho nó màu xanh lá cây.
  • Cuối cùng, chúng ta đặt máy ảnh cách tâm 5 đơn vị.

Bước 3: Tạo hiệu ứng动画 cho khối

Để làm cho khối của chúng ta quay, chúng ta cần thêm một vòng lặp animation. Thêm mã này sau khối mã trước:

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}
animate();

Hàm này sẽ được gọi liên tục, quay khối một chút mỗi khung và re-render cảnh.

Bước 4: Tạo tính interative

Bây giờ, hãy thêm tính interative để chúng ta có thể quay khối bằng chuột. Thêm mã này trước hàm animate():

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

Mã này thêm các bộ监听器 cho các hành động chuột, cho phép chúng ta quay khối bằng cách nhấp và kéo.

Bước 5: Thêm một chút sự hấp dẫn

Hãy làm cho khối của chúng ta thú vị hơn bằng cách cho nó các màu khác nhau trên mỗi mặt. Thay thế dòng tạo vật liệu bằng mã này:

const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Đỏ
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // Xanh lá cây
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // Xanh dương
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Vàng
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // Tím
new THREE.MeshBasicMaterial({ color: 0x00ffff })  // Xanh lam
];
const cube = new THREE.Mesh(geometry, materials);

Bây giờ mỗi mặt của khối của chúng ta sẽ có một màu khác nhau!

Kết luận

Chúc mừng! Bạn vừa tạo xong một khối 3D interative sử dụng WebGL. Đây chỉ là phần nổi của tảng băng khi nói đến lập trình đồ họa 3D. Khi bạn tiếp tục hành trình của mình, bạn sẽ khám phá ra nhiều điều kỳ diệu hơn mà bạn có thể tạo ra.

Nhớ rằng, học lập trình giống như học骑自行车. Nó có thể trông不稳定起初, nhưng với sự thực hành, bạn sẽ nhanh chóng zooming xung quanh!

Dưới đây là bảng tóm tắt các phương thức chính chúng ta đã sử dụng:

Phương thức Mô tả
THREE.Scene() Tạo một cảnh 3D mới
THREE.PerspectiveCamera() Thiết lập góc nhìn của máy ảnh
THREE.WebGLRenderer() Xử lý việc render cảnh
THREE.BoxGeometry() Tạo một khối hình học
THREE.MeshBasicMaterial() Xác định vật liệu cho khối
THREE.Mesh() Kết hợp địa hình và vật liệu
requestAnimationFrame() Gọi vòng lặp animation

Tiếp tục thí nghiệm, tiếp tục học và quan trọng nhất, hãy vui vẻ! Thế giới của WebGL là của bạn, và bạn đã được trang bị để bắt đầu khám phá nó. Chúc bạn may mắn!

Credits: Image by storyset

Hướng Dẫn Trước:
WebGL - Xoay khối lập phương