I'm trying to recreate a classroom with individual students and furniture. It should be individual group of models that can be later assigned to a database to toggle on and off at will to simulate who's attending and who's missing in class. This is my block of code to load one native threejs model called "desk" and one animated GLTF model into the scene:
import {GLTFLoader} from "./GLTFLoader.js"
import * as THREE from 'three'
var unit = new THREE.Group();
var deskGeometry = new THREE.BoxBufferGeometry(10, 2, 50 );
var deskMaterial = new THREE.MeshPhongMaterial({ color: 0x49311c, side: THREE.DoubleSide });
var desk = new THREE.Mesh(deskGeometry, deskMaterial);
unit.add(desk);
//IMPORT GLTF MODEL
var loader = new GLTFLoader();
var clock, mixer;
clock = new THREE.Clock();
loader.load("./models/salary/scene.gltf", function(gltf){
gltf.scene.traverse( function( node ){
if(node.isMesh){node.castShadow = true, node.receiveShadow = false;}
});
//add and position the GLTF model
var obj = gltf.scene;
gltf.scene.scale.set( 8, 8, 8 );
gltf.scene.position.x = -10;
gltf.scene.position.y = -5;
gltf.scene.position.z = 3;
gltf.scene.rotation.y = 1.07;
scene.add(obj);
unit.add(obj); // unit is part of an array that the model is nested in,
//to create a THREE.group consisted of the student's desk, pc and the student
//Playing Animation
mixer = new THREE.AnimationMixer( gltf.scene );
console.log( gltf.animations );
mixer.clipAction( gltf.animations[ 0 ] ).play();
});
return unit;
}
function animate(){
requestAnimationFrame(animate);
renderer.setAnimationLoop(()=>renderer.tick());
//for GLTF
if ( mixer ) mixer.update( clock.getDelta() );
}The above code also implies that the GLTF model is part of a group of model called "unit", and that there are native threejs models mixed in. In the near future I wish to replace "desk" with a proper GLTF model. So I tried using promise to load multiple models like this https://redstapler.co/load-multiple-model-three-js-promise/ , however, it only showed how to import static models without animations.
How should I use promise to load multiple animations as well, while nested inside a THREE group?