Three.js LOD object not rendering any models - three.js

Question

so I'm experimenting with the LOD object in Three.js however I'm having trouble getting it to work. The code that i am using (excluding some standard setup code like creating a scene etc.) is shown here:
let treeHighDetail = new THREE.Object3D();
let treeLowDetail = new THREE.Object3D();
const gltfLoader = new GLTFLoader();
gltfLoader.load('./resources/low_poly_tree.glb', (gltf) => {
console.log(gltf)
treeLowDetail.add(gltf.scene);
treeLowDetail.traverse(c => {
c.castShadow = true;
})
})
gltfLoader.load('./resources/tree.glb', (gltf) => {
console.log(gltf)
treeHighDetail.add(gltf.scene);
treeHighDetail.traverse(c => {
c.castShadow = true;
})
})
const lod = new THREE.LOD();
let treeMesh = treeHighDetail.clone();
lod.addLevel(treeMesh, 5);
treeMesh = treeLowDetail.clone();
lod.addLevel(treeMesh, 20);
scene.add(lod);
I have two tree models, one low poly and one relatively high. I am attempting to have the high poly tree be displayed when i am close to the object, and the low poly tree render when i am further away from it. Running this code doesn't produce any errors in the console, however none of the models are rendered into the scene at any distance. Any ideas on what the issue could be would be greatly appreciated.

Answer 1

You are accessing the glTF asset before they have been loaded. The above load() method calls are asynchronously so you have to wait for their completion.
There are different ways to achieve this. You could create an instance of THREE.LoadingManager, use it as an argument for GLTFLoader's constructor call and then use its onLoad() callback for creating the LODs.
Or you rewrite your code to use the async/await pattern which is probably the more elegant solution. It would look like so:
const gltfLoader = new GLTFLoader();
const [ gltfLowDetail, gltfHighDetail ] = await Promise.all( [
gltfLoader.loadAsync( './resources/low_poly_tree.glb' ),
gltfLoader.loadAsync( './resources/tree.glb' ),
] );
const treeLowDetail = new THREE.Object3D();
const treeHighDetail = new THREE.Object3D();
treeLowDetail.add(gltfLowDetail.scene);
treeLowDetail.traverse(c => {
c.castShadow = true;
})
treeHighDetail.add(gltfHighDetail.scene);
treeHighDetail.traverse(c => {
c.castShadow = true;
})
const lod = new THREE.LOD();
let treeMesh = treeHighDetail.clone();
lod.addLevel(treeMesh, 5);
treeMesh = treeLowDetail.clone();
lod.addLevel(treeMesh, 20);
scene.add(lod);
You have to ensure the function/method holding this code is async as well.