Game Development Reference
In-Depth Information
Finally, you can use a binary format for imported meshes that has a higher
compression ratio than standard text-based files in order to reduce the size of assets
the server needs to send to the client. To do so, you should export your meshes to
Wavefront OBJ / MTL files, and then use the converter script at
utils/converters/
obj/convert_obj_three.py
to generate a file that the
THREE.BinaryLoader
can
import. (Instructions for running the script are at the top of the file.)
In addition to reducing the total size of resources that need to be retrieved from a
server, you can try to load as much data as possible while the user doesn't need to
see it. For example, if players enter your game from a menu, you may be able to
start loading while the player is navigating the menu rather than waiting until they
click to start the game. You can also wait to load parts of your scene that won't be
visible initially until after the player has entered the game, in order to let the player
start playing as quickly as possible. For example, linear mission-based games can
wait to load parts of the map until the player reaches certain checkpoints. Just make
sure you have a fallback plan if resources are loading slowly and the player reaches
your unloaded area too early. You might want to have a door that won't open until
the resources are loaded. You could also just pause the game momentarily when the
player is in a transitional location.
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, 2), 1000],
[new THREE.IcosahedronGeometry(200, 1), 2000],
[new THREE.IcosahedronGeometry(200, 0), 8000],
];
material = new THREE.MeshNormalMaterial();
lod = new THREE.LOD();
