Three.js FAQ

Tips and tricks

• General tips
• Optimising performance

Vector to array conversion

vertex.toArray()

View axes

var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

Find absolute position of a vertex

View point cloud

View vertices of a point cloud.

// Get vertex point cloud.
var getPointsObject = function (points) {
  let geometry = new THREE.Geometry();
  for (const point of points) {
    geometry.vertices.push(point);
  }
  let material = new THREE.PointsMaterial({
    color: "white",
    size: 3,
    sizeAttenuation: false
  });
  return new THREE.Points(geometry, material);
};

// Generate points.
var cube = new THREE.BoxGeometry(1, 1, 1);
const points = cube.vertices

// Get point object and add to scene. ;
scene.add(getPointsObject(points));

View vertices of an existing geometry

var points = new THREE.Points(geometry, new THREE.PointsMaterial({
  size: 0.25,
  color: "yellow"
}));
scene.add(points);

Create BufferGeometry

Dynamic visualisations using BufferGeometry

// Setup a buffer attribute for position variable.
const positionAttribute = new THREE.BufferAttribute(
  positions, positionNumComponents);
// Mark positionAttribute as dynamic if its contents change often.
positionAttribute.setUsage(THREE.DynamicDrawUsage);

Copying attributes for a buffer geometry

var nodeGeometry = new THREE.SphereBufferGeometry( 0.1, 32, 32 );
const bufferedNodeGeometry = new THREE.InstancedBufferGeometry();

// Method 1 (may not copy over all required attributes)
bufferedNodeGeometry.index = nodeGeometry.index;
bufferedNodeGeometry.attributes = nodeGeometry.attributes;

// Method 2
bufferedNodeGeometry.copy( nodeGeometry );

Duplicating objects using THREE.InstancedMesh

// Add mesh nodes as spheres.
var nodeGeometry = new THREE.SphereBufferGeometry( 0.1, 32, 32 );
var transform = new THREE.Object3D();
// Define a new material instance for the spheres (required)
var nodeMaterial = new THREE.MeshNormalMaterial();
var nodeMesh = new THREE.InstancedMesh( nodeGeometry, nodeMaterial, numVertices );
posNdx = 0;
for (const vertex of unbufferedGeometry.vertices) {
    transform.position.set( vertex.x, vertex.y, vertex.z );
    transform.updateMatrix();
    nodeMesh.setMatrixAt( posNdx ++, transform.matrix );
}
scene.add( nodeMesh );

Add stats.js

// Import stats.
import * as Stats from 'stats.js';

Get camera world coordinates

let vector = camera.getWorldDirection();

Enable or disable orbit controls

orbitControls.enabled = false;
orbitControls.enabled = true;