Khám phá Three.js – Khi JavaScript đưa bạn vào thế giới 3D

🧩 Giới thiệu về Three.js

Three.js là một thư viện JavaScript giúp bạn tương tác với WebGL mà không cần viết hàng trăm dòng mã phức tạp. Nó cung cấp sẵn các đối tượng 3D, ánh sáng, camera và renderer giúp việc xây dựng trải nghiệm 3D trong trình duyệt trở nên dễ dàng hơn bao giờ hết.

🌐 Nhiều website lớn như Apple, Google, hay portfolio cá nhân của developer nổi tiếng đều dùng Three.js để tạo hiệu ứng 3D tương tác trực tiếp trong trình duyệt

🚀 Cài đặt nhanh Three.js

Bạn có thể cài đặt Three.js chỉ với 1 dòng lệnh:

npm install three

Hoặc import trực tiếp qua CDN:

<script src="https://unpkg.com/three@0.158.0/build/three.min.js"></script>

🧩 Các khái niệm cơ bản trong Three.js

💡 Tạo cảnh 3D với ánh sáng và chuyển động

Dưới đây là ví dụ “vừa đủ thú vị” – một hộp xoay tròn, được chiếu sáng bởi ánh sáng trắng, có thể điều khiển camera bằng chuột (OrbitControls).

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const scene = new THREE.Scene();

// Camera
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(2, 2, 5);

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// Geometry + Material + Mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
  color: 0x0077ff,
  metalness: 0.5,
  roughness: 0.2,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Light
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// Control
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// Animation
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.02;
  controls.update();
  renderer.render(scene, camera);
}
animate();

// Responsive
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

🖼️ Kết quả minh họa

Khi chạy code này, bạn sẽ thấy:

• Một hộp 3D màu xanh xoay tròn.
• Ánh sáng phản chiếu mượt mà.
• Có thể xoay khung nhìn bằng chuột (OrbitControls).

🎨 Một số lệnh cơ bản khác nên biết

🧠 Mẹo nâng cao & tối ưu hiệu suất

• Dùng texture compression (KTX2, Basis) để giảm dung lượng ảnh.
• Kết hợp Stats.js để đo FPS.
• Hạn chế tạo object mới trong vòng lặp animate().
• Dùng GSAP hoặc tween.js để thêm hiệu ứng mượt mà.
• Khi project lớn → dùng scene graph hoặc tách component.

🧩 Kết luận

Three.js mở ra khả năng xây dựng thế giới 3D trực tiếp trên web — từ hiệu ứng marketing, portfolio cá nhân, tới game nhỏ và visualization dashboard.

Nếu bạn mới bắt đầu, hãy thử:
👉 Three.js Journey – khóa học rất nổi tiếng
👉 Official Docs – tài liệu đầy đủ và dễ tra cứu
👉 Bắt đầu với Three.js Playground hoặc trang chính thức: https://threejs.org

💬 Bạn đã từng thử tạo hiệu ứng 3D nào thú vị với Three.js chưa? Hãy chia sẻ trải nghiệm của bạn trong phần bình luận nhé!