Pyramid mapbox example:
Create the map and set the anchor and center of the map near the pyramid site. The anchor is basically our [0,0,0] in babylon.js. The anchor is set slightly to the left where the small blue sphere and the red box are located just to demonstrate what x value will we get for our mesh.
const mapOptions: MapOptions = {
container: "map",
style: "mapbox://styles/mapbox/standard",
config: {
basemap: {
theme: "monochrome",
},
},
zoom: 18,
center: [31.12054933420165, 29.97597456565051],
pitch: 60,
antialias: true,
};
const map = new mapboxgl.Map(mapOptions);
const anchor = {
lng: 31.12054933420165,
lat: 29.97597456565051,
};
Let’s add the pyramid of Khafre which is located at lng: 31.13084933520165, lat: 29.97597456565051
const pyramidPosition = latLngToVector3Relative(
{ lng: 31.13084933520165, lat: 29.97597456565051, altitude: 0 },
{ ...anchor, altitude: 0 }
);
const pyramid = CreateCylinder(
"pyramid",
{
diameterTop: 0,
diameterBottom: 215.5,
height: 143.5,
tessellation: 4,
},
scene
);
pyramid.position = pyramidPosition;
pyramid.rotation = new Vector3(0, Math.PI / 4, 0);
const pyramidMaterial = new StandardMaterial("pyramid-material", scene);
pyramidMaterial.diffuseColor = new Color3(0, 1, 0);
pyramidMaterial.alpha = 0.5;
pyramid.material = pyramidMaterial;
