Rotate & Moving 3D Model in MapLibre

[Takieddinex]

I would to know if it is possible to rotate and move a 3D model added on a maplibre map. I would like to see your examples.

[wipfli]

Does https://maplibre.org/maplibre-gl-js-docs/example/add-3d-model/ help you?

[Takieddinex]

@wipfli Thank you, I started with this example but now I'm looking at how I combine ThreeJs and MapLibre to rotate and move my 3D model

I was using this code to make my model move but only according to the two origins variables. I'm trying to make it more precise by navigating with the mouse

` var modelOrigin = [4.8499, 45.7770]; var modelOrigin2 = [4.8519, 45.7756];
var modelAltitude = 0; var modelRotate = [Math.PI / 2, 5.5, 0];

document.getElementById('move').addEventListener('click', function () { // Fly to a random location by offsetting the point -74.50, 40 // by up to 5 degrees. modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat( modelOrigin2, modelAltitude );

		// transformation parameters to position, rotate and scale the 3D model onto the map
		modelTransform = {
			translateX: modelAsMercatorCoordinate.x,
			translateY: modelAsMercatorCoordinate.y,
			translateZ: modelAsMercatorCoordinate.z,
			rotateX: modelRotate[0],
			rotateY: modelRotate[2],
			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()
		};

	});

`

[timokorkalainen]

You can use ThreeJS with MapLibre for sure. The way you do it is to place the ThreeJS scene origin using the method shown in the 3D model example and then using ThreeJS's own methods to place the 3D models relatively to the origin. If you need to use coordinates for the models' locations, first perform conversion calculations of the distances between the target locations and the scene origin coordinates and then apply the correct transforms to the models.

[HarelM]

Is there an issue here or should this be converted to a discussion?

[timokorkalainen]

Discussion would indeed be a better place for this. I do not think there are any issues with this.