# Load multiple 3D models in different coordinate into map

**URL:** <https://discourse.threejs.org/t/load-multiple-3d-models-in-different-coordinate-into-map/38482>\
**Category:** Questions\
**Tags:** glb, coordinate-system, javascript, mapbox\
**Created:** [May 24, 2022, 1:42pm UTC](https://discourse.threejs.org/t/load-multiple-3d-models-in-different-coordinate-into-map/38482 "2022-05-24T13:42:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Takieddinex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/takieddinex/32/26358_2.png) [@Takieddinex](https://discourse.threejs.org/u/Takieddinex)\
**Post date:** [May 24, 2022, 1:42pm UTC](https://discourse.threejs.org/t/load-multiple-3d-models-in-different-coordinate-into-map/38482/1 "2022-05-24T13:42:51Z")

</div>

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

```javascript
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)
                    );

```