How to place the Three.js model on a geographic spatial map?

[WREQI]

How to apply in geographic space controls_transform???

[mgermerie]

Hi,

If I understand your request, you're trying to position any Three.js Object3D within an iTowns View. Is that it ?

If so, to place any Three.js object within an iTowns View, you can follow these steps:

• Define the geographic coordinates at which you want the object to be positioned using Coordinates module:

  const objectCoordinates = new itowns.Coordinates('EPSG:4326', {longitude}, {latitude}, {altitude});

  You can provide any of the Coordinates Reference System you wish, specified by an identifier (an EPSG code in this case), if this code and CRS is known by proj4js. Otherwise, you need to to define it as a string as such (replacing the code and the projection parameter by those of your chosen CRS):

  itowns.proj4.defs('WGS84', "+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees");

• Then transform these coordinates in the scene coordinates reference system and set the result as the position of your model:

  object.position.copy(objectCoordinates.as(view.referenceCrs));

You can also get the altitude within the elevation data you display using DEMUtils module as such (for instance):

const objectCoordinates = new itowns.Coordinates('EPSG:4326', {longitude}, {latitude});
const altitude = itowns.DEMUtils.getElevationValueAt(view.tileLayer, objectCoordinates);
objectCoordinates.setAltitude(altitude);

I would link you the documentation for Coordinates but I just found out that it is broken since #2300. Meanwhile you can find documentation for DEMUtils here. You can also see this example (and its code here or by clicking the button on the bottom-right corner of the example) which aims at doing what you're asking.