slides

THREE.js Tips

Subtleties and best practices

Look at the examples

• you can search the examples
• you can check the code of each example by clicking on the <> icon

Use the editor

• to understand the API (Nodes, Materials, Lights etc.)
• to load, resize, convert your models
• to create a scene and save it so that you can load it later in your code

Give a name to your objects

so that you can use getObjectByName

scene.getObjectByName('name')

It also makes debugging easier.

:warning: Slow method, do not use during the animation loop. :point_right: Retrieve the object once and store it in a variable

userData is your friend

You can store anything in it, here are a few examples:

obj.userData.velocity.x = ...

See https://threejs.org/examples/webxr_xr_cubes.html

obj.userData.isSelecting = true

See https://threejs.org/examples/webxr_xr_sculpt.html

userData.physicsBody

See https://threejs.org/examples/physics_ammo_cloth.html

object.userData.mass

See https://threejs.org/examples/physics_ammo_break.html

Performance issues? Check the number of draw calls

console.log(renderer.info.render.calls) 

Group your objects

Consider this as a single matrix, an empty object with children but no geometry

Avoid scaling your objects

• Add to group, and transform group
• Or applyMatrix4 on geometry

:warning: Slow! Modifies the vertex buffer!

Use lookAt for easy rotations

Often used for the camera but can be used for any object.

See the last part of https://threejs.org/manual/#en/scenegraph

Hide / Show objects with obj.visible

Parse children

• using traverse
• See webgl_loader_3ds :

object.traverse / scene.traverse 
  if(child.isMesh) child.material.map = ...

• using obj.children.includes or other Array methods

Object manipulation

obj.position.set

obj.rotateX

obj.position.distanceTo // most basic collision detection

Center an object in its bounding box

const mesh = new THREE.Mesh(geometry, createMaterial());
geometry.computeBoundingBox();
geometry.boundingBox.getCenter(mesh.position).multiplyScalar(-1);

See https://threejs.org/manual/#en/primitives (search textgeometry)

How to modify Geometry

Example:

 
const position = geometry.attributes.position;

position.usage = THREE.DynamicDrawUsage;
for ( let i = 0; i < position.count; i ++ ) {
  const y = 35 * Math.sin( i / 2 );
  position.setY( i, y );
}

See

https://sbcode.net/threejs/geometry-to-buffergeometry/

https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_dynamic.html

Instancing

You can draw thusands copies of the same object for free!

See instancing example: https://threejs.org/examples/webgl_instancing_performance

TWEEN / GSAP for smooth interpolation

• GSAP : cannot be used in commercial projects, avoid it
• TWEEN : import TWEEN

import TWEEN from 'three/addons/libs/tween.module.js';

Tutorial:

https://sbcode.net/threejs/tween/

Lifecycle / dispose

See https://threejs.org/manual/#en/cleanup

Shadows / Lights

See https://threejs.org/examples/webgl_lights_hemisphere

Three js Math

:warning: Objects are referenced, not copied by default. Use clone() Define and reuse temp vectors, quaternions, matrices

Matrices

Local matrix: relative to parent World matrix: relative to scene

Custom shaders

Three Shading Language (NEW!)

https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language

• Simpler than raw glsl
• More robust
• Optimized
• Renderer agnostic (your shaders will still work with webgpu)

Useful for debugging

• Helpers
• Orbitcontrols
• Dat.gui
• Stats
• VR stats

Dump SceneGraph

(function printGraph( obj ) {
    console.group( ' <%o> ' + obj.name, obj );
    obj.children.forEach( printGraph );    
    console.groupEnd();
} ( scene ) );

See https://github.com/mrdoob/three.js/issues/10961

This site is open source. Improve this page.