Another 10 More Three.JS Tips and a bonus

This article features 10 tips when using the WebGL library, Three.JS, and follows on from my previous tips articles and there is a final bonus tip. Live examples are available via this CodePen collection or via the examples on this page.

No. 21 Use the smallest texture

Use the smallest texture that gives the fidelity you want. In the CodePen example the apples have square textures; 128, 256, 512, 1024 and 2048 pixels, left to right.

See the Pen ThreeJS Tips: 20-22 by Nik Lever (@nik-lever) on CodePen.

No. 22 Disable the stencil buffer

Unless you’re using it disable the stencil buffer.

renderer = new THREE.WebGLRenderer({ stencil: false });

See the Pen ThreeJS Tips: 20-22 by Nik Lever (@nik-lever) on CodePen.

No. 23 Dispose geometry, material, texture

When deleting a mesh. If the geometry, material and maps are no longer being used by other meshes in your scene then dispose of them. See deleteSelected function, line 109 in the CodePen example.


See the Pen ThreeJS Tips: 23-25 by Nik Lever (@nik-lever) on CodePen.

No. 24 PointerEvents

If you’re using OrbitControls and want to add more mouse events, then use pointer events.

window.addEventListener( 'pointerdown', onPointerDown );

See the Pen ThreeJS Tips: 23-25 by Nik Lever (@nik-lever) on CodePen.

No. 25 Outline shader

One way to create an outline shader is to clone the mesh, then use a custom shader to move each vertex along the vertex normal,

const vShader = `
uniform float u_offset;

void main() {
  vec3 pos = position + normal * u_offset;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );

(lines 16-26, 172-185). Make sure to set side to THREE.BackSide and add the new mesh to the original. In the example clicking on an apple attaches the outline mesh.

See the Pen ThreeJS Tips: 23-25 by Nik Lever (@nik-lever) on CodePen.

No. 26 The LOD class

You can use the LOD class to create a mesh that uses low res geometry and textures if it is a long way from the camera. Create a new LOD instance, then use the addLevel method, this takes a mesh and a distance from camera.

const lod = new THREE.LOD();

lod.addLevel( mesh1, 2 );
lod.addLevel( mesh2, 10 );

See the Pen ThreeJS Tips: 26 by Nik Lever (@nik-lever) on CodePen.

No. 27 Bake lighting

You can really improve performance by baking your lighting. Here’s a video about how to do this with Blender

and a CodePen example that uses no lights. To do this I swap the models materials in the GLTFLoader onLoad event handler. By default the loader uses MeshStandardMaterial, here I switch this to MeshBasicMaterial, which uses no lights but retain the map, the texture containing all the lighting detail.

baked = gltf.scene;
baked.traverse( child => {
  if (child.isMesh){
    const material = new THREE.MeshBasicMaterial( { map: });
    child.material = material;

See the Pen ThreeJS Tips: 27 by Nik Lever (@nik-lever) on CodePen.

No. 28 SMAA post processing

You can add antialiasing as a post processing pass. Get the current pixelRatio and create a new SMAAPass instance. Then add this to the EffectsComposer instance.

const pr = renderer.getPixelRatio()
const pass = new SMAAPass( window.innerWidth * pr, window.innerHeight * pr );
composer.addPass( pass );

See the Pen ThreeJS Tips: 28 by Nik Lever (@nik-lever) on CodePen.

No. 29 RoomEnvironment

The RoomEnvironment class creates a scene that can be used as scene.environment. You use a PMREMGenerator which has a fromScene method.

const envmap = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

See the Pen ThreeJS Tips: 29 by Nik Lever (@nik-lever) on CodePen.

No. 30 WebXR VR

You can easily create VR and AR apps that run from the browser using Three.JS.

Here’s a link to a set of videos from my YouTube channel, explaining how it’s done. Get the full courses at a great discount on my courses page.

Bonus Tip

My last tip. If you’re new to Three.JS and want to learn the basics quickly. Check out my FREE course.

The Three.JS Primer

Hope you enjoyed these tips. I create video courses and have several about Three.JS check them out at