Tài nguyên Three.js
- Trang chủ chính thức Three.js
- Các ví dụ minh họa Three.js
Cài đặt với NPM
Cách khuyến nghị là sử dụng npm cùng công cụ build. Các công cụ này xử lý phụ thuộc tốt hơn so với phương pháp tĩnh.
- Cài đặt Node.js để quản lý phụ thuộc
- Cài đặt three.js và Vite:
npm install --save three
npm install --save-dev viteThao tác này tạo thư mục node_modules và file package.json.
Three.js và WebGL
Three.js sử dụng WebGL - hệ thống đồ họa cấp thấp chỉ vẽ điểm, đường và tam giác. Three.js cung cấp lớp trừu tượng cho cảnh, ánh sáng, vật liệu giúp phát triển dễ dàng hơn.
Cấu trúc ứng dụng Three.js
Một ứng dụng điển hình bao gồm:
- Renderer: Đối tượng chính, kết xuất cảnh thành hình ảnh 2D
- Scene Graph: Cấu trúc phân cấp chứa đối tượng 3D
- Mesh: Kết hợp Geometry (hình dạng) và Material (bề mặt)
- Geometry: Dữ liệu đỉnh của đối tượng
- Material: Thuộc tính bề mặt và màu sắc
- Texture: Hình ảnh áp lên bề mặt
- Light: Các nguồn ánh sáng
Ví dụ Cube cơ bản
Thiết lập môi trường
<body>
<canvas id="sceneCanvas"></canvas>
<script type="module">
import * as THREE from 'three';
function initScene() {
const canvas = document.getElementById('sceneCanvas');
const engine = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas
});
</script>
</body>Thiết lập camera
const viewAngle = 75;
const aspectRatio = 2;
const nearClip = 0.1;
const farClip = 5;
const viewCamera = new THREE.PerspectiveCamera(
viewAngle,
aspectRatio,
nearClip,
farClip
);
viewCamera.position.z = 3;Tạo cảnh và đối tượng
const scene = new THREE.Scene();
const boxSize = 1;
const cubeShape = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
const surface = new THREE.MeshPhongMaterial({ color: 0x44aa88 });
const boxObject = new THREE.Mesh(cubeShape, surface);
scene.add(boxObject);Vòng lặp kết xuất
function animateFrame(timestamp) {
const seconds = timestamp * 0.001;
boxObject.rotation.x = seconds;
boxObject.rotation.y = seconds;
engine.render(scene, viewCamera);
requestAnimationFrame(animateFrame);
}
requestAnimationFrame(animateFrame);Thêm ánh sáng
const lightColor = 0xFFFFFF;
const brightness = 3;
const mainLight = new THREE.DirectionalLight(lightColor, brightness);
mainLight.position.set(-1, 2, 4);
scene.add(mainLight);Nhiều đối tượng
function createCube(geometry, hue, posX) {
const mat = new THREE.MeshPhongMaterial({ color: hue });
const obj = new THREE.Mesh(geometry, mat);
scene.add(obj);
obj.position.x = posX;
return obj;
}
const boxes = [
createCube(cubeShape, 0x44aa88, 0),
createCube(cubeShape, 0x8844aa, -2),
createCube(cubeShape, 0xaa8844, 2)
];Cấu trúc thư mục với ES6 Modules
Khi sử dụng modules ES6, duy trì cấu trúc thư mục chuẩn:
project-root/
├── build/
│ └── three.module.js
└── examples/
└── jsm/
├── controls/
│ ├── OrbitControls.js
│ └── ...
└── loaders/
├── GLTFLoader.js
└── ...Import thư viện:
import * as THREE from '/path/to/build/three.module.js';
import { OrbitControls } from '/path/to/examples/jsm/controls/OrbitControls.js';