| name | games-3d |
| description | Game 3D với Three.js — lighting, FPS/TPS camera, shooting, enemy AI, LOD, instancing. 60 FPS, draw calls < 200. |
games-3d — Game 3D
Tham khảm genre: skills/_shared/game-genre-reference.md — chọn architecture + tránh anti-patterns theo thể loại.
Xem file chi tiết:
game-h5-3d.md — Implementation (Three.js setup, lighting, FPS/TPS controller, shooting, enemy AI, collision)game-design-h5-3d.md — Game design (camera systems, modular level design, time-of-day lighting, world-space UI, positional audio)game-h5-3d-marble-racing.md — Marble Racing Implementation (cannon-es physics, spline track, ball controller, checkpoint/timer)game-design-h5-marble-racing.md — Marble Racing Design (physics parameters, camera modes, level progression, country theming)
Bắt đầu nhanh
npm install three @types/three
import * as THREE from "three";
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 20);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.getElementById("app")!.appendChild(renderer.domElement);
Testing
npx vitest run | npx vitest --coverage (≥ 80%)
Helper: skills/games-testing/templates/three-test-helper.ts — createHeadlessRenderer, disposeScene, advanceFrames; check draw calls < 200
Mẫu chính (chống lag)
- InstancedMesh: Cho hàng ngàn object giống nhau (cây, đá, enemy)
- LOD: 3 levels, fade ở 20 và 50 units
- Frustum culling: Three.js tự động, bật
renderer.frustumCulling = true
- Texture atlas + Draco compression: Giảm dung lượng texture
- Shadow map 1024×1024 trên mobile (2048 trên desktop)
- Reuse Vector3/Matrix4: Không
new trong game loop
Anti-Rationalization
| Excuse | Reality |
|---|
| "Instancing phức tạp, vài object thôi" | 50 cây giống nhau = 50 draw call thay vì 1 |
| "LOD thêm sau" | Mobile không chạy nổi full poly |
| "Shadow map 4K cho đẹp" | Mobile chết vì fill rate |
Red Flags
- Draw calls > 200
- Shadow map > 2048 trên mobile
- new Vector3/Matrix4 trong game loop
Verification
