Learn Three.js for 3D Computer Graphics/

...

/

Loading LEGO and Voxel-Based Model

Loading LEGO and Voxel-Based Model

Learn to load and use LEGO and voxel-based models in Three.js.

We'll cover the following...

Showing complete LEGO models

Besides 3D models, where the model defines the vertices, materials, lights, and more, there are also various file formats that don’t explicitly define the geometries but have more specific usage. The LDrawLoader loader (line 1), which we’ll be looking at in this lesson, was created to render LEGO models in 3D. Using this loader works in the same way as we’ve already seen a couple of times:

Press + to interact
const loader = new LDrawLoader()
loader.loadAsync('/assets/models/lego/10174-1-ImperialAT-ST-UCS.mpd_Packed.mpd').then((model) => {
  model.scale.set(0.015, 0.015, 0.015)
  model.rotateZ(Math.PI)
  model.rotateY(Math.PI)
  model.translateY(1)
  visitChildren(model, (child) => {
    child.castShadow = true
    child.receiveShadow = true
  })
  scene.add(model)
})
...