Skip to content

threejs_tips.md

Latest commit

 

History

History
212 lines (130 loc) · 5.28 KB

threejs_tips.md

File metadata and controls

212 lines (130 loc) · 5.28 KB

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.

⚠️ Slow method, do not use during the animation loop.

👉 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

⚠️ 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

⚠️ 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 mrdoob/three.js#10961