網頁遊戲對照手冊：你會的每件事，網頁上這樣寫

// 純資料（沒有繼承任何引擎類）
interface Zombie {
    x: number; y: number;
    hp: number; speed: number;
}
// 集中放在陣列，系統函式統一處理
engine.zombies: Zombie[]
// update 時：
for (const z of engine.zombies) {
    z.x += dirX * z.speed * dt;
}

const engine = new GameEngine(); // ≈ Awake
engine.init();                    // ≈ Start

let last = performance.now();
function loop(now: number) {
    const dt = (now - last) / 1000; // ≈ Time.deltaTime
    last = now;
    engine.update(dt);   // ≈ Update（自己呼叫）
    engine.render();
    requestAnimationFrame(loop); // 下一幀再來（≈60fps）
}
requestAnimationFrame(loop);

const boss = new THREE.Group();
boss.position.set(0, 2, 5);
boss.rotation.y = Math.PI / 2;  // 弧度制！90°=π/2
boss.scale.setScalar(2);
parent.add(boss);               // = SetParent
scene.add(parent);              // scene ≈ 場景根節點

// 「Prefab」= 配置資料（可外部化成 JSON 給企劃改）
const ZOMBIE_CONFIGS = {
  mummy: { model: 'Mummy_Ani.fbx', hp: 200, speed: 1.2 },
};
// 「Instantiate」= 工廠函式
function spawnZombie(type: string, x: number, y: number) {
    const cfg = ZOMBIE_CONFIGS[type];
    engine.zombies.push({ x, y, hp: cfg.hp, ... });
}
// 3D 模型的複製：
const clone = template.clone(true);  // ≈ Instantiate

const mat = new THREE.MeshStandardMaterial({
    map: tex,                  // = mainTexture
    emissive: 0xffffff,        // = _EmissionColor
    emissiveIntensity: 0.2,
});
mesh.material = mat;
// Lambert/Basic/Physical 等對應 Unity 各光照模型

void main() {
    float d = length(vUv - 0.5) * 2.0;
    float ring = smoothstep(r-w, r, d)
               * (1.0 - smoothstep(r, r+w, d));
    gl_FragColor = vec4(uColor, ring * uAlpha);
}
// HLSL 和 GLSL 是近親——你們的 shader 直覺全部可用

const mixer = new THREE.AnimationMixer(model);
const walk = mixer.clipAction(walkClip);
const dead = mixer.clipAction(deadClip);
// 「狀態機」自己寫（我們的 resolveAnim）：
function pickClip(z: Zombie) {
    if (z.hp <= 0) return { clip: 'dead', mode: 'clamp' };
    if (z.hurtTimer > 0) return { clip: 'hurt', mode: 'loop' };
    return { clip: 'walk', mode: 'loop' };
}
mixer.update(dt);  // 每幀推進

// 遊戲內計時 → 用狀態+計時器（尊重 timeScale/暫停）
z.explodeTimer = 1.5;
// update 內：
if (z.explodeTimer !== undefined) {
    z.explodeTimer -= dt;
    if (z.explodeTimer <= 0) doExplosion(z);
}
// 資源載入才用 async/await（≈ C# 的 await）：
const fbx = await loader.loadAsync('Mummy.fbx');

// 瀏覽器只給事件，自己維護「按著」狀態：
const keys: Record<string, boolean> = {};
window.addEventListener('keydown', e => keys[e.code] = true);
window.addEventListener('keyup',   e => keys[e.code] = false);
// update 內就跟 Unity 一樣了：
if (keys['KeyW']) move();
// GetKeyDown = 記上一幀狀態比對（自己包 3 行）

<button id="start" class="btn">開始</button>
<div id="score"></div>

/* CSS：樣式/齊法/動效全在這 */
.btn { font-size: 20px; border-radius: 12px; }

// TS：
startBtn.onclick = onStart;
scoreDiv.textContent = `分數 ${score}`;

// 資產放 public/ 目錄，用 loader 非同步載：
const tex = await new THREE.TextureLoader()
    .loadAsync('/Textures/zombie_d.png');
const fbx = await new FBXLoader()
    .loadAsync('/FBX-1/Mummy_Ani.fbx');
tex.colorSpace = THREE.SRGBColorSpace; // ≈ sRGB 勾選

// 法1（陀螺專案現況）：可變步長 + dt 上限
const dt = Math.min(rawDt, 1/30); // 防切分頁回來爆衝
update(dt);

// 法2（要更穩時）：固定步長累加器 ≈ FixedUpdate
acc += rawDt;
while (acc >= STEP) { fixedUpdate(STEP); acc -= STEP; }