SuperAPI AI Directory

threejs-game-runtime

Coding & development

View repository

Updated 10-16 09:30

About this skill

three.js game runtime foundation

May propose, review, and modify within the scope of the current Work Item; upon completion return to threejs-game-workflow-control to submit candidates and verification evidence.

three.js provides rendering and the scene graph; the gameplay loop, input state, physics world, resource lifecycle, and game state are the project's responsibility. Reuse project services first; for new projects, use TypeScript, Vite, and three as the core.

  1. Separate the rendering Scene from the gameplay scene controller. The controller handles enter, fixedUpdate, renderUpdate, exit, and dispose; the entry point only assembles services. Rule and numeric modules do not depend on WebGL, DOM, or materials.
  2. Use the fixed-step and input helper module: physics and rules use a fixed dt, rendering uses accumulator/step interpolation. Background pause, loss of focus, and Pointer Lock release clear pressed keys; on resume, reset timestamps and accumulated amounts, and do not simulate the entire background duration. Catch up at most a limited number of steps and record discarded time; input edges are consumed only once per simulation step.
  3. The world uses meters, seconds, radians, and Y-up, with explicit forward direction and player dimensions. Model pivot, collider center, and HUD anchor are different contracts. Use CCD for high-speed objects based on measurement; Raycaster handles picking and does not replace rigid body collision. For physics and navigation see plugin selection。
  4. resize derives renderer size and camera projection from the Canvas CSS rect; input goes CSS→NDC→Raycaster. DOM HUD consumes CSS sizes, while orthographic HUD defines its own logical coordinates. Do not treat a 2D mockup breakdown directly as 3D world transforms; theUI adapteronly manages screen layout.
  5. GPU resources are held by the asset service via reference counting; removing an Object3D does not automatically release geometry, material, texture, or render target. After an async load returns, first verify the scene generation, and return expired resources to the asset service. On exit, clean up events, timers, mixers, physics/nav handles, and exclusive resources; shared resources are disposed only when the last holder releases them.
  6. Record frame time p50/p95, draw calls, triangles, material and texture counts, shadow and post-processing overhead, loaded bytes, and the resource baseline after scene switches at the worst gameplay density. First reduce redundant draws, materials, shadows, and full-screen passes, then adjust quality according to the declared tier; do not promise FPS without data.

For new projects run node <技能目录>/scripts/create-game.mjs <空目录>, and the script copies the project templateand injects the same runtime module; the template directory itself is not a complete buildable artifact. After generation, execute npm ci、npm run build, implement actual gameplay, and then accept it. It only demonstrates rendering, responsive input, fixed stepping, and pause/resume; it is not a complete game. First test deterministic rules, stepping, and coordinate conversion, then do browser smoke tests as needed; before starting the service, check for reusable instances, and do not automatically perform on-device acceptance.