O'Reilly logo

Game Development with Three.js by Isaac Sukin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Level of detail

Similarly, you can load low-poly meshes and low-resolution textures when the user starts playing the game and replace them with higher-detail assets during gameplay, either when the larger assets are loaded or when the user gets close enough to them to see the improved detail. The latter technique is called Level-of-Detail (LOD), and Three.js has built-in support for it using the THREE.LOD object. For example, we could modify the spinning shape example we built in Chapter 1, Hello, Three.js, to change the detail of our sphere depending on how close to it we are. First we need to change how we add the mesh to the scene:

geometry = [ [new THREE.IcosahedronGeometry(200, 4), 50], [new THREE.IcosahedronGeometry(200, 3), 300], [new THREE.IcosahedronGeometry(200, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required