What is LOD in three.js?

In JavaScript, three.js is a library that makes use of WebGL to render graphics on the web.

This library offers a bunch of ways to make it easier to render computationally heavy scenes. One example is that of LOD. It is an acronym for level of detail. It's used to render objects based on their distance from the camera.

Syntax

Below is the syntax for initializing LOD, and the method to add a level:

// initialization
const lod = new THREE.LOD();

To add levels of detail to lod, we use the addLevel() method:

// adding a level
lod.addLevel(mesh, distance)

Parameters

  • mesh: This is the object we want to render at this level of detail.
  • distance: This is the distance at which we want the level of detail to be displayed.

Application

When rendering a computationally heavy scene in three.js, we need to save as many resourcesThis refers to computer hardware used for rendering the graphics. possible by making objects far away from the camera less detailed so that they need less processing power to render.

Example

The example below illustrates the use of LOD. Zooming in and out of the scene, changes the shape being rendered:

Console

Explanation

The example above uses three levels of detail. The following are the different levels of detail:

  • Level 0: At distances less than 7 units, a torus is rendered.

  • Level 1: At distances less than 14 units, a sphere is displayed.

  • Level 2: At distances less than 21 units, a box is rendered.

We start by creating a scene. The rest of the explanation is as follows:

  • Line 35: Here, we initialize OrbitControls so the user can pan around the scene and view it from different angles. To read more on OrbitControls, please follow this link.

  • Lines 37–53: We create three different shapes here. A torus, a sphere, and a box with MeshBasicMaterial applied to the respective geometries as material.

  • Line 56: This line of code initializes LOD as shown in the syntax above.

  • Lines 58–60: Here, we add the three different levels of detail. The nearest level renders torus, the next renders sphere, and the last renders box.

  • Line 62: This line of code adds lod to the scene.

  • Line 71: In this line, we use the getCurrentLevel() method to get the current lod level based on the object's distance from the camera. Zooming in and out changes the distance. Clearing the terminal refreshes the level as it is continuously being printed to the terminal in the animate() function.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved