Chapter 814: FAQ (Manual)
Core Idea
Answers to recurring three.js questions: glTF is the recommended asset format, how to keep apparent object size constant across window resizes, why faces sometimes appear invisible, and the library's stance on input validation and Node.js support.
Key Concepts
- glTF as the recommended format: compact and fast to load for runtime delivery; three.js also supports FBX, Collada, OBJ and others, but a glTF-based workflow is preferred.
- Viewport meta tag: controls how mobile browsers scale page content versus the visible viewport, relevant to full-screen three.js apps.
- Constant apparent size on resize: since
visible_height = 2 * tan(fov/2) * distance, keeping an object's apparent size stable as the window resizes means adjusting the camera's fov, not its position.
- Backface culling: faces have an orientation, and the back side is culled by default; a "missing" face is often fixed with
material.side = THREE.DoubleSide.
- No input validation: for performance, three.js mostly doesn't validate inputs — invalid data can silently produce strange results instead of throwing.
- Node.js support: three.js depends on browser/DOM APIs, so running it in Node.js requires shims like
headless-gl and jsdom-global, or replacing DOM-dependent pieces like TextureLoader.
Code Examples
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- What it demonstrates: the viewport meta tag three.js examples use to control mobile rendering scale.
Key Takeaways
- Prefer a glTF-based asset workflow; other formats are supported but not the default recommendation.
- To keep objects the same apparent size across a resize, adjust the camera's
fov, not its position.
- A partially invisible object is often backface culling — try
material.side = THREE.DoubleSide to confirm.
- Three.js does not validate inputs, so invalid data can silently produce wrong results rather than an error.
- Running three.js in Node.js needs DOM/browser shims since the library assumes a browser environment.
Connects To
- TextureLoader: one of the components sometimes swapped out for a custom alternative in Node.js environments.