E · Fundamentals — three.js Lab

Pattern E · copy-paste template

7 ขั้น ที่ scene ทุกอันต้องมี

ไม่หวือหวาแต่ติดตัวไปทุกงาน — โครงนี้จัดการ ความคมจอ retina, responsive, ประหยัดแบต และคืน memory ให้ครบ. ลูกบาศก์ทางขวาคือโครงนี้ที่กำลังรันอยู่จริง

// importmap ใน <head> ชี้ "three" ไป build แล้ว import ได้เลย
import * as THREE from 'three';
const stage = document.getElementById('stage');

// 1) renderer + devicePixelRatio (clamp 2 กัน retina หนักเกิน)
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
stage.appendChild(renderer.domElement);

// 2) scene + camera
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  50, stage.clientWidth / stage.clientHeight, 0.1, 100);
camera.position.set(2.4, 1.8, 3);

// 3) เนื้อหา + แสง
const geometry = new THREE.BoxGeometry(1.4, 1.4, 1.4);
const material = new THREE.MeshStandardMaterial({ color: 0xb4530a });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube, new THREE.AmbientLight(0xffffff, 0.9));

// 4) loop ด้วย setAnimationLoop (หยุด/รองรับ XR ง่าย)
const clock = new THREE.Clock();
function animate() {
  const t = clock.getElapsedTime();
  cube.rotation.set(t * 0.4, t * 0.6, 0);
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

// 5) responsive — ResizeObserver จับ "container" (ดีกว่า window.resize)
const ro = new ResizeObserver(() => {
  const w = stage.clientWidth, h = stage.clientHeight;
  camera.aspect = w / h; camera.updateProjectionMatrix();
  renderer.setSize(w, h);
});
ro.observe(stage);

// 6) ประหยัดแบต — หยุดวาดเมื่อสลับแท็บ
document.addEventListener('visibilitychange', () =>
  renderer.setAnimationLoop(document.hidden ? null : animate));

// 7) cleanup — คืน GPU memory เมื่อเลิกใช้ (สำคัญมากใน React/SPA)
function dispose() {
  ro.disconnect();
  geometry.dispose(); material.dispose(); renderer.dispose();
}
window.addEventListener('pagehide', dispose);

ทำไมต้องสน? ลืม dispose() = memory leak (จอค้าง/หน่วง), ลืม devicePixelRatio = ภาพเบลอบน retina, ใช้ window.resize แทน ResizeObserver = ขนาดเพี้ยนเมื่อ container เปลี่ยนเอง

โครงนี้รันอยู่จริง