Three.js — Đồ hoạ 3D trên web

Three.js là gì?

Three.js là thư viện JavaScript tạo đồ họa 3D trên web thông qua WebGL. Three.js đơn giản hóa WebGL API phức tạp, cho phép tạo cảnh 3D, mesh, vật liệu, ánh sáng và camera chỉ với vài chục dòng code.

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>

Ba thành phần cốt lõi:

Scene — không gian 3D chứa tất cả đối tượng
Camera — góc nhìn vào scene (thường dùng PerspectiveCamera)
Renderer — vẽ scene lên <canvas> bằng WebGL

Khối 3D Xoay

Kết quả

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Three.js - 3D Shapes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:#0d0d1a; overflow:hidden; }
  canvas { display:block; }
  #info {
    position:absolute; top:12px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.6); font:13px sans-serif; text-align:center;
    pointer-events:none;
  }
  #controls {
    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px;
  }
  .btn {
    padding:5px 14px; background:rgba(255,255,255,.12); color:white;
    border:1px solid rgba(255,255,255,.25); border-radius:16px;
    font-size:12px; cursor:pointer; backdrop-filter:blur(4px);
  }
  .btn:hover { background:rgba(255,255,255,.22); }
</style>
</head>
<body>
<div id="info">Three.js — Di chuyển chuột để xoay • Scroll để zoom</div>
<div id="controls">
  <button class="btn" onclick="changeShape('box')">📦 Cube</button>
  <button class="btn" onclick="changeShape('sphere')">🔵 Sphere</button>
  <button class="btn" onclick="changeShape('torus')">🍩 Torus</button>
  <button class="btn" onclick="changeShape('cone')">🔺 Cone</button>
</div>

<script>
// Scene setup
const scene    = new THREE.Scene();
const camera   = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

camera.position.set(0, 0, 4);

// Lights
scene.add(new THREE.AmbientLight(0xffffff, 0.4));
const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);
const pointLight = new THREE.PointLight(0x4472c4, 2, 10);
pointLight.position.set(-3, 2, 2);
scene.add(pointLight);

// Stars background
const starsGeo = new THREE.BufferGeometry();
const starPos  = new Float32Array(3000);
for (let i=0; i<3000; i++) starPos[i] = (Math.random()-0.5)*50;
starsGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
scene.add(new THREE.Points(starsGeo, new THREE.PointsMaterial({ color: 0xffffff, size: 0.06 })));

// Main mesh
const material = new THREE.MeshStandardMaterial({
  color: 0x4472c4,
  metalness: 0.4,
  roughness: 0.35,
  wireframe: false,
});

let mesh;
const geometries = {
  box:    new THREE.BoxGeometry(1.8, 1.8, 1.8),
  sphere: new THREE.SphereGeometry(1.2, 32, 32),
  torus:  new THREE.TorusGeometry(1, 0.4, 16, 60),
  cone:   new THREE.ConeGeometry(1, 2, 32),
};

function changeShape(type) {
  if (mesh) scene.remove(mesh);
  const colors = { box:'#4472c4', sphere:'#2ecc71', torus:'#e74c3c', cone:'#f39c12' };
  material.color = new THREE.Color(colors[type]);
  mesh = new THREE.Mesh(geometries[type], material);
  scene.add(mesh);
}
changeShape('box');

// Mouse orbit (simple)
let mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', e => {
  mouseX = (e.clientX / window.innerWidth  - 0.5) * 2;
  mouseY = (e.clientY / window.innerHeight - 0.5) * 2;
});
document.addEventListener('wheel', e => {
  camera.position.z = Math.max(2, Math.min(8, camera.position.z + e.deltaY * 0.01));
});

// Animate
function animate() {
  requestAnimationFrame(animate);
  if (mesh) {
    mesh.rotation.y += 0.008;
    mesh.rotation.x += 0.004;
    mesh.rotation.y += mouseX * 0.02;
    mesh.rotation.x += mouseY * 0.01;
  }
  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>

Trong series này:

Trong series này:

Three.js — Đồ hoạ 3D trên web

Three.js là gì?

Khối 3D Xoay

Bình luận