HTTPS clone URL
Subversion checkout URL
- build.py, or how to generate a compressed three.js file
- Detecting WebGL and browser compatibility with three.js
- Drawing lines
- Getting Started
- GUI Tools with Three.js
- How to contribute to three.js
- How to run things locally
- How to use OpenGL or ANGLE rendering on Windows
- JSON Geometry format 4
- JSON Material format 4
- JSON Model format 3
- Json model format 3.0
- JSON Object Scene format 4
- JSON Texture format 4
- Mr.doob's Code Style™
- performance improvement
- Some patterns used in examples
- Testing with npm
- Text in Three.js
- Uniforms types
- Using Matrices & Object3Ds in THREE
- Using SketchUp Models
- Using three.js in C# with SharpKit
- Why is part of my object invisible?
Clone this wiki locally
All objects by default automatically update their matrices.
However, if you know object will be static, you can disable this and update transform matrix manually just when needed.
object.matrixAutoUpdate = false; object.updateMatrix();
You can only update content of buffers, you cannot resize buffers (this is very costly, basically equivalent to creating new geometry).
You can emulate resizing by pre-allocating larger buffer and then keeping unneeded vertices collapsed / hidden.
Set flags only for attributes that you need to update, updates are costly. Once buffers change, these flags reset automatically back to
false. You need to keep setting them to
true if you wanna keep updating buffers.
geometry.verticesNeedUpdate = true; geometry.elementsNeedUpdate = true; geometry.morphTargetsNeedUpdate = true; geometry.uvsNeedUpdate = true; geometry.normalsNeedUpdate = true; geometry.colorsNeedUpdate = true; geometry.tangentsNeedUpdate = true;
geometry.__dirtyVertices = true; geometry.__dirtyMorphTargets = true; geometry.__dirtyElements = true; geometry.__dirtyUvs = true; geometry.__dirtyNormals = true; geometry.__dirtyTangents = true; geometry.__dirtyColors = true;
Meshes additionally need also
dynamic flag enabled (to keep internal typed arrays).
geometry.dynamic = true;
Custom attributes (in
attributes[ "attributeName" ].needsUpdate = true;
Other objects like
Line just need "dirty" flags.
All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to shader every frame.
Also GL state related parameters can change any time (depthTest, blending, polygonOffset, etc).
Flat / smooth shading is baked into normals. You need to reset normals buffer (see above).
Properties that can't be easily changed in runtime (once material is rendered at least once):
- numbers and types of uniforms
- numbers and types of lights
- presence or not of
- vertex colors
- shadow map
- alpha test
Changes in these require building of new shader program. You'll need to set
material.needsUpdate flag to
Bear in mind this might be quite slow and induce jerkiness in framerate (especially on Windows, as shader compilation is slower in DirectX than OpenGL).
For smoother experience you can emulate changes in these features to some degree by having "dummy" values like zero intensity lights, white textures, or zero density fog.
You can change freely material used for geometry chunk, you cannot change how object is divided into chunks (according to face materials).
If you need to have different configurations of materials during runtime, if number of materials / chunks is small, you could pre-divide object beforehand (e.g. hair / face / body / upper clothes / trousers for human, front / sides / top / glass / tire / interior for car).
If number is large (e.g. each face could be potentially different), consider different solution, using attributes / textures to drive different per-face look.
Image, canvas, video and data textures need to have flag set:
texture.needsUpdate = true;
Render targets update automatically.
Camera position and target is updated automatically.
If you need to change
far you need to recompute projection matrix:
camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();