Hello Experts,
I’m developing an application with Three.js and I would like to see correct position on the map using with latitude longitude values. I got the static image from the mapbox which has 1280x800 resolution and 15 zoom level. I’m using the following code but it doesn’t work that I expected. Where am I doing wrong ?
Here is my part of code and screenshot image:
function setupMapLayer() {
new THREE.TextureLoader().load("map.png", function (oTexture) {
oTexture.encoding = THREE.sRGBEncoding;
var oFrontSideGeometry = new THREE.PlaneGeometry(1280, 800);
var oMaterialFrontSide = new THREE.MeshBasicMaterial({ map: oTexture, side: THREE.DoubleSide });
var oFlagFrontMesh = new THREE.Mesh(oFrontSideGeometry, oMaterialFrontSide);
oFlagFrontMesh.geometry.center();
var oFlagObject = new THREE.Object3D();
oFlagObject.add(oFlagFrontMesh);
oFlagObject.position.set(0, 0, 0);
oScene.add(oFlagObject);
oCamera.position.z = 500;
renderScene();
setupMarker();
});
}
function setupMarker() {
var oGeometry = new THREE.SphereGeometry(10, 100, 100);
var oMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000 });
var oSphere = new THREE.Mesh(oGeometry, oMaterial);
let oLatitude = 40.8746966; //North-South
let oLongitude = 29.3988391; //East-West
//latitude goes between -90 degrees and +90 degrees
let normalizedLatitude = 2.0 * (((oLatitude + 90.0) / 180.0) - 0.5);
//Longitude goes between -180 and +180 degrees
let normalizedLongitude = 2.0 * (((oLongitude + 180.0) / 360.0) - 0.5);
//Our bounds along the x-axis are -200, to 200
//and along the x-axis are -100 to 100.
let oXLocation = normalizedLongitude * 640;
let oYLocation = normalizedLatitude * 400;
oSphere.position.set(oXLocation, oYLocation, 10);
oScene.add(oSphere);
renderScene();
}
