> For the complete documentation index, see [llms.txt](https://studio-docs.sandbox.game/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://studio-docs.sandbox.game/the-editor/what-threejs-means.md). # What Three.js means in Sandbox Studio **Three.js** is a JavaScript library that draws 3D in a web browser. It takes meshes, cameras, lights, and materials and turns them into the picture you see — every frame, on the GPU. Sandbox Studio’s engine is built on Three.js. When you place a Model Mesh Node, aim a directional light, or assign a material, the engine creates and updates the matching Three.js objects. You see Studio labels in the Outliner and Inspector. Underneath, Three.js is doing the draw. You do not start a separate Three.js project. You do not write a `THREE.Scene` by hand for a normal game. If a tutorial online says “create a scene and add meshes in code,” that is a different workflow. Stay in Studio. ## The stack: browser, WebGPU, WebGL Three.js needs a **graphics API** from the browser to talk to the GPU: | Layer | Job | | ------------------ | ---------------------------------------------------------------------------------------- | | **WebGPU** | Newer browser GPU path. Higher quality when available. Studio prefers it. | | **WebGL** | Older, widely supported path. Used when WebGPU is not available. | | **Three.js** | Builds the 3D scene graph and issues draw calls through whichever path the engine chose. | | **Sandbox Studio** | SceneNodes, assets, Play mode — what you edit. | Sandbox Studio detects support automatically. If the browser can use WebGPU, it does. If not, it falls back to WebGL. Players do not flip a switch. Details and browser notes: [System Requirements](/getting-started/system-requirements.md). Some features need WebGPU. Colour grading in post-processing is one. [How to use post processing](/the-editor/how-to-use-post-processing.md). Advanced **TSL node materials** (the New Material dialog may show a THREE / TSL group) are built for that modern material stack. Shadows using PCF work on both WebGL and WebGPU. [How to use shadow](/the-editor/how-to-use-shadow.md). Rapier (physics) and Three.js (drawing) are different libraries. Solid floors are physics. How the floor *looks* is Three.js materials and lights. [What physics and Rapier mean](/the-editor/what-physics-and-rapier-mean.md). ## What you work with instead | You want | Use in Studio | | ---------------------- | --------------------------------------------------------------------------- | | A model in the world | Model Mesh Node + `.glb` | | A surface look | Packed materials on the `.glb`, or a `.material.json` on **Model Material** | | Sun, lamps, ambient | Light nodes | | Motion on a character | Animation State Machine + `.animconfig.json` | | Particles | `.vfx.json` + VFX Node | | Solid floors and walls | Physics fields on the mesh (Rapier under the hood) | Those how-tos: [How to use mesh models and ModelMesh nodes](/the-editor/how-to-use-mesh-models-and-modelmesh.md), [How to set up materials](/the-editor/how-to-set-up-materials.md), [How to set up a light](/the-editor/how-to-set-up-a-light.md), [Create an Animation State Machine](/the-editor/create-an-animation-state-machine.md), [How to set up VFX](/the-editor/how-to-set-up-vfx.md), [What physics and Rapier mean](/the-editor/what-physics-and-rapier-mean.md). ## When you still see “THREE” The name can show up without meaning you left Sandbox Studio. * **New material types** — Some entries are grouped as TSL Node materials (the dialog may label the group with THREE). You still create a material asset and assign it in the Inspector. There is no separate Shader object. [How to set up materials](/the-editor/how-to-set-up-materials.md). * **Shadow settings** — Directional and other shadow fields map onto the renderer’s shadow map (size, bias, softness). Adjust them on the light and on meshes. [How to use shadow](/the-editor/how-to-use-shadow.md). * **Agent or console text** — A stack trace or explanation may mention Three.js classes. Fix the Studio node, material, or light that owns the problem. Custom water, fog cards, and similar FX materials are authored as node materials in TypeScript for advanced projects. That is still Studio material work, not a second engine. The materials page marks that path as later. ## Hard rules Do not play character clips by calling Three.js animation actions from gameplay. Set parameters (or `transitionGraphToState`) on `ENGINE.AnimationStateMachineNode`. See [Create an Animation State Machine](/the-editor/create-an-animation-state-machine.md). Do not ask the agent to “rewrite this as a raw Three.js scene.” Ask it to place nodes, set `modelUrl` / materials / lights, and use Sandbox Studio MCP while the project is open. Do not hand-edit `.genesys-scene` files to inject Three.js objects. [What JSON files are in Sandbox Studio](/the-editor/what-json-files-are.md). ## Practical guidance * Learn Studio nouns first: SceneNode, Model Mesh, material, light, prefab, Play mode. * When an external Three.js guide conflicts with a Sandbox Studio how-to, follow the how-to. * If the agent suggests importing `three` to spawn the whole level, stop and restate: use SceneNodes and `@project/assets/...` paths. * If a look feature does nothing, check whether it needs WebGPU (for example colour grading) and whether the browser fell back to WebGL. [System Requirements](/getting-started/system-requirements.md). * Use the profiler and FPS readout when the view is heavy — same as any other GPU cost. [Performance & optimization](/the-editor/performance-and-optimization.md). ## Common mistakes | What went wrong | What to do | | ------------------------------------------------------------ | ----------------------------------------------------------------- | | Followed a Three.js “hello cube” tutorial inside the project | Add a Mesh Node or Model Mesh Node in the Outliner | | Drove run/attack by Three.js clip actions | Use the animation state machine and parameters | | Looked for a Shader asset | Create or assign a **material** | | Thought “TSL Node (THREE)” meant leaving Studio | Create the material asset in Studio and assign **Model Material** | | Expected colour grading on a WebGL-only browser | Use a WebGPU-capable browser, or accept that effect stays off | ## What You've Done You know Three.js is the library that draws the 3D frame, that Studio sits on top of it, and that the browser may use WebGPU or fall back to WebGL. Creators still talk to SceneNodes, materials, lights, and animation configs — not a standalone Three.js app. Next: [What JSON files are in Sandbox Studio](/the-editor/what-json-files-are.md), or [What physics and Rapier mean](/the-editor/what-physics-and-rapier-mean.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://studio-docs.sandbox.game/the-editor/what-threejs-means.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.