How to add multiple GLB models in the same scene?

Questions
4

i don’t think your problem is solved tbh, it’s just deferred. each file loads async, how do you plan to respond to this? with polling? a timeout? in javascript if something is async the language gives you async/await and promises, i wonder why you don’t use that?

i’ll copy over from here: Npm run build does not include three.js dependencies - #14 by drcmda

async function app() {
  const loader = new GLTFLoader()
  const gltf = await new Promise((res, rej) => loader.load("/model.glb", res, rej))
  scene.add(gltf.scene)
  ...

if you have multiple assets avoid waterfalls like this (a waterfall is when assets load one after the other which is a waste of time, with promise.all everything loads concurrently, at the same time)

const [font, hdri, gltf] = await Promise.all([
  new Promise((res, rej) => fontLoader.load("/font.json", res, rej)),
  new Promise((res, rej) => rgbeLoader.load("/warehouse.hdr", res, rej)),
  new Promise((res, rej) => gltfLoader.load("/model.glb", res, rej)),
])
scene.add(gltf.scene)
scene.background = hdri
const font = new TextGeometry('hello', { font })
...

this already gives you a primitive way of dealing with loading status:

const status = document.querySelector('.status')
status.innerText = "Loading"
const [font, image, model] = await Promise.all(...)
status.innerText = ""
2 Likes