Load multiple 3D models in different coordinate into map

Questions
, , ,
1

I load multiple 3D models into my map except that they all go to the first position I set, whereas I want to spread them over several coordinates I need to enter

var modelOrigin = [4.8499, 45.7770];    
                    var modelAltitude = 0;
                    var modelRotate = [Math.PI / 2, 7.5, 0];

					var modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(
                    modelOrigin,
                    modelAltitude
                    );

var modelTransform = {
                    translateX: modelAsMercatorCoordinate.x,
                    translateY: modelAsMercatorCoordinate.y,
                    translateZ: modelAsMercatorCoordinate.z,
                    rotateX: modelRotate[0],
                    rotateY: modelRotate[1],
                    rotateZ: modelRotate[2],
                    /* Since our 3D model is in real world meters, a scale transform needs to be
                    * applied since the CustomLayerInterface expects units in MercatorCoordinates.
                    */
                    scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
                    };

					var THREE = window.THREE;


// configuration of the custom layer for a 3D model per the CustomLayerInterface
					const geometry = new THREE.PlaneGeometry( 1, 1 );
					var customLayer = {
                    id: '3d-model',
                    type: 'custom',
                    renderingMode: '3d',
                    onAdd: function (map, gl) {
                    this.camera = new THREE.Camera();
                    this.scene = new THREE.Scene();

					 // create two three.js lights to illuminate the model
					 var directionalLight = new THREE.DirectionalLight(0xffffff);
                    directionalLight.position.set(0, -70, 100).normalize();
                    this.scene.add(directionalLight);
                    
                    var directionalLight2 = new THREE.DirectionalLight(0xffffff);
                    directionalLight2.position.set(0, 70, 100).normalize();
                    this.scene.add(directionalLight2);

					var directionalLight3 = new THREE.DirectionalLight(0xffffff);
                    directionalLight3.position.set(0, -70, 20).normalize();
                    this.scene.add(directionalLight3);


// use the three.js GLTF loader to add the 3D model to the three.js scene
                    var loader = new THREE.GLTFLoader();
                    loader.load(
                    'http://localhost/B22_glb_2.glb', 
                    function (gltf) {
						const model = gltf.scene; 
						console.log(model,"model")
						this.scene.add(gltf.scene);
						// mixer = new THREE.AnimationMixer( model );
						// requestAnimationFrame( animate );
						const boundingBox = new THREE.Box3();
						boundingBox.setFromObject( model );
						const center = boundingBox.getCenter(new THREE.Vector3());
						const size = boundingBox.getSize(new THREE.Vector3()).length();
						console.log(center,'center', size)
						model.position.x += (model.position.x - center.x);
						model.position.y += (model.position.y - center.y);
						model.position.z += (model.position.z - center.z);

						controls.reset();
						controls.maxDistance = size * 10;
						camera.near = size / 100;
						camera.far = size * 100;
						camera.updateProjectionMatrix();

						camera.position.copy(center);
						camera.position.x += size / 2.0;
						camera.position.y += size / 5.0;
						camera.position.z += size / 2.0;
						camera.lookAt(center);
					}.bind(this)
                    );


                    
                    loader.load(
                    'http://localhost/ARC_glb_2.glb', 
                    function (gltf) {
						const model = gltf.scene; 
						console.log(model,"model")
						this.scene.add(gltf.scene);
						// mixer = new THREE.AnimationMixer( model );
						// requestAnimationFrame( animate );
						const boundingBox = new THREE.Box3();
						boundingBox.setFromObject( model );
						const center = boundingBox.getCenter(new THREE.Vector3());
						const size = boundingBox.getSize(new THREE.Vector3()).length();
						console.log(center,'center', size)
						model.position.x += (model.position.x - center.x);
						model.position.y += (model.position.y - center.y);
						model.position.z += (model.position.z - center.z);

						controls.reset();
						controls.maxDistance = size * 10;
						camera.near = size / 100;
						camera.far = size * 100;
						camera.updateProjectionMatrix();

						camera.position.copy(center);
						camera.position.x += size / 2.0;
						camera.position.y += size / 5.0;
						camera.position.z += size / 2.0;
						camera.lookAt(center);
					}.bind(this)
                    );