games-3d

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

• InstancedMesh cho repetitive object
• LOD 3 levels, fade at 20/50
• Draw calls < 200, FPS ≥ 55