# Cartesian3 converting terrain

**URL:** <https://community.cesium.com/t/cartesian3-converting-terrain/17013>\
**Category:** CesiumJS\
**Created:** [January 24, 2022, 11:40am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013 "2022-01-24T11:40:33Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcck](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/mcck/32/7425_2.png) [@mcck](https://community.cesium.com/u/mcck)\
**Post date:** [January 24, 2022, 11:40am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/1 "2022-01-24T11:40:33Z")

</div>

There is a Cartesian3 `{x: -1270054.670468495, y: 5643182.82695817, z: 2678382.5261573032}`  
It has no height. How to turn it into a high Cartesian3，It is similar to `heightReference: HeightReference.RELATIVE_TO_GROUND` set by entity？

Or entity is set to `heightReference: HeightReference.RELATIVE_TO_GROUND`, how to get the actual cartesian3？

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [January 25, 2022, 4:34pm UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/2 "2022-01-25T16:34:40Z")

</div>

Hi @mcck! It was my understanding that the third coordinate in Cartesian3 represented elevation. Can you please share some more details on your high-level goals here?

---

<div class="post-metadata">

**Author:** ![mcck](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/mcck/32/7425_2.png) [@mcck](https://community.cesium.com/u/mcck)\
**Post date:** [January 26, 2022, 5:14am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/3 "2022-01-26T05:14:33Z")

</div>

I want DOM to be positioned on a point。Unfortunately, the elevation of cartesian3 is 0，DOM is not positioned correctly

```auto
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
	html,body,#cesiumContainer{
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	
	#tips{
		position: fixed;
		width: 100px;
		height: 100px;
		line-height: 100px;
		background-color: #FFF;
		text-align: center;
	}
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="tips">hello</div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NDE1MWIyMC02N2VmLTQwMzktOGQyNS0wMGY0MGVhOGQ5MDciLCJpZCI6NzUzNDMsImlhdCI6MTYzODUxNjc2MH0.NZMzdh31fcCJoL8tmcd46XdxTqiV_WoL4C9B3R5N-kM';

    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });
    viewer.camera.setView({
      destination : Cesium.Cartesian3.fromDegrees(100.23040561319219, 25.623343397054466, 4000),
	  orientation : {
        heading : Cesium.Math.toRadians(-100),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
	
	
	// Add a point
	
	let cartesian3 = Cesium.Cartesian3.fromDegrees(100.1751884398384, 25.617734639164404); // Only longitude and latitude，No elevation
	
	let point = viewer.entities.add({
     position: cartesian3,
     point: {
        color: Cesium.Color.WHITE,
        pixelSize: 10,
		heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 1
      }
    });
	
	let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian3);
	let tipDom = document.getElementById('tips');
	tipDom.style.top = windowPosition.x + 'px';
	tipDom.style.left = windowPosition.y + 'px';
	
	let eventHandler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
	eventHandler.setInputAction(() => {
		let pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian3); // No elevation, tipdom positioning error
		if (pos) {
			tipDom.style.top = pos.y + 'px';
			tipDom.style.left = pos.x + 'px';
		}

	}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
	
	
  </script>
  
  
  <script>
	
	new Cesium.ScreenSpaceEventHandler(viewer.canvas).setInputAction((action) => {
		console.log("屏幕：", action.position);
		
		let cartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(action.position), viewer.scene);
		console.log("Cartesian3：", cartesian3);
		
		let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
		console.log("经纬度：", {
			latitude: Cesium.Math.toDegrees(cartographic.latitude),
			longitude: Cesium.Math.toDegrees(cartographic.longitude),
			height: cartographic.height
		});
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  </script>
 </div>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![lennart.imberg](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/lennart.imberg/32/9788_2.png) [@lennart.imberg](https://community.cesium.com/u/lennart.imberg)\
**Post date:** [January 26, 2022, 6:59am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/4 "2022-01-26T06:59:55Z")

</div>

Hey @sam.rothstein and @mcck , here is a picture what describes the xyz coordinates of cartesian. Their origin is the center of the earth:

 ![image](https://global.discourse-cdn.com/cesium/original/2X/c/ca569ed6c0e03ef9339e55a7cebfaf6025740794.jpeg)

The solution is, just add the targeted height as 3rd parameter to `Cesium.Cartesian3.fromDegrees(...);`

Best, Lennart

---

<div class="post-metadata">

**Author:** ![mcck](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/mcck/32/7425_2.png) [@mcck](https://community.cesium.com/u/mcck)\
**Post date:** [January 26, 2022, 7:12am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/5 "2022-01-26T07:12:21Z")

</div>

But I don’t have the third parameter, elevation，Can it be calculated

---

<div class="post-metadata">

**Author:** ![lennart.imberg](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/lennart.imberg/32/9788_2.png) [@lennart.imberg](https://community.cesium.com/u/lennart.imberg)\
**Post date:** [January 26, 2022, 7:31am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/6 "2022-01-26T07:31:11Z")

</div>

Oh, now I understand.

Yes, it can be calculated from your Cartesian, but the one you provided in the first post has actually a height of 4.656612873077393e-10 so its ~0.  
Anyways, here is a Sandcastle link with height-calculation: [link](https://sandcastle.cesium.com/#c=bVLLbtswEPyVhU4y4FKi3pYdo61boEUD9NAguejCSIxMlCYFknZiB/n3kqJtOKlv2tmZndmldkTBjtFnquAGBH2GFdVsu0H3IxY2QTvWKykMYYKqJpjMG9GIKLLQjirNpIAnJTewIspYLhFg5FjIXpFhzVpX99TAmrJ+bRrBz9/W8mh3yUdu3Hla2AiA15caPuGkjOM8Q0UZZ0WVzfKpa8G+hrzIUlwlqEqKWV7h0jcONSRFWaW2kScFzss0TpO3RkyQd5+7LVoptOQUcdmHHvb7+ZjtKUX6PqrHxqDfaK8o1SGOY4TLHFdVls6saTaFJEcFLss0K9IZLrIsttjJA04Wg2TCHcI/AqLCMMOoRqTrwle3xyC1RaSoL9JMfcMqaxhJAK3kUtXnkK5CDz9+3n33x4CBvVD+hx1oDTg+YnJruH3U1RXp19svq1/vaQ+sM2urdqA945s/1DH3QcrNnQzHTJN5MA0W2uw5XfoJAJ/ZZpDKwFbxEKHI0M3Aid0mety2f6lBrdZunqMuokvpomM7YN3NlT8RWk60tp2nLR9Xa4LlIrL8/6Rcko6J/rf9YTnZO9oaL289iBBaRLa8rjRS8keiPkz+Bw)

If you need heigth, either you need some source of height-information or set it to a random height.

---

<div class="post-metadata">

**Author:** ![mcck](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/mcck/32/7425_2.png) [@mcck](https://community.cesium.com/u/mcck)\
**Post date:** [January 26, 2022, 7:46am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/7 "2022-01-26T07:46:15Z")

</div>

Maybe I can’t describe it clearly, but I may have found a way

```auto
let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
let longitude = Cesium.Math.toDegrees(cartographic.longitude);
let latitude = Cesium.Math.toDegrees(cartographic.latitude);
let height = viewer.scene.globe.getHeight(cartographic);
let cartesian3Height = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

```

```auto
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
	html,body,#cesiumContainer{
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	
	#tips{
		position: fixed;
		width: 100px;
		height: 100px;
		line-height: 100px;
		background-color: #FFF;
		text-align: center;
	}
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="tips">hello</div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NDE1MWIyMC02N2VmLTQwMzktOGQyNS0wMGY0MGVhOGQ5MDciLCJpZCI6NzUzNDMsImlhdCI6MTYzODUxNjc2MH0.NZMzdh31fcCJoL8tmcd46XdxTqiV_WoL4C9B3R5N-kM';

    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });
    viewer.camera.setView({
      destination : Cesium.Cartesian3.fromDegrees(100.23040561319219, 25.623343397054466, 4000),
	  orientation : {
        heading : Cesium.Math.toRadians(-100),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
	
	
	// Add a point
	
	let cartesian3 = Cesium.Cartesian3.fromDegrees(100.1751884398384, 25.617734639164404); // Only longitude and latitude，No elevation
	
	let point = viewer.entities.add({
     position: cartesian3,
     point: {
        color: Cesium.Color.WHITE,
        pixelSize: 10,
		heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 1
      }
    });
	
	let tipDom = document.getElementById('tips');
	
	
	
	
	let eventHandler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
	eventHandler.setInputAction(() => {
	
		let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
		let longitude = Cesium.Math.toDegrees(cartographic.longitude);
		let latitude = Cesium.Math.toDegrees(cartographic.latitude);
		let height = viewer.scene.globe.getHeight(cartographic);
		let cartesian3Height = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
		
		let pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian3Height); // No elevation, tipdom positioning error
		if (pos) {
			tipDom.style.top = pos.y + 'px';
			tipDom.style.left = pos.x + 'px';
		}

	}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
	
	
  </script>
  
  
  <script>
	
	new Cesium.ScreenSpaceEventHandler(viewer.canvas).setInputAction((action) => {
		console.log("屏幕：", action.position);
		
		let cartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(action.position), viewer.scene);
		console.log("Cartesian3：", cartesian3);
		
		let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
		console.log("经纬度：", {
			latitude: Cesium.Math.toDegrees(cartographic.latitude),
			longitude: Cesium.Math.toDegrees(cartographic.longitude),
			height: cartographic.height
		});
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  </script>
 </div>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![lennart.imberg](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/lennart.imberg/32/9788_2.png) [@lennart.imberg](https://community.cesium.com/u/lennart.imberg)\
**Post date:** [January 26, 2022, 7:57am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/8 "2022-01-26T07:57:58Z")

</div>

Thats indeed a viable solution!  
Be aware that terrain needs some time to load, so until it is loaded you will get `height = undefined` with this method. But as you put it in a EventHandler it should not be a problem in this case.

Best Lennart

---

<div class="post-metadata">

**Author:** ![mcck](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/mcck/32/7425_2.png) [@mcck](https://community.cesium.com/u/mcck)\
**Post date:** [January 27, 2022, 1:27am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/9 "2022-01-27T01:27:31Z")

</div>

OK, my problem has been solved. Thank you very much

---

<div class="post-metadata">

**Author:** ![James\_B](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/james_b/32/2424_2.png) [@James\_B](https://community.cesium.com/u/James_B)\
**Post date:** [February 9, 2022, 11:18am UTC](https://community.cesium.com/t/cartesian3-converting-terrain/17013/10 "2022-02-09T11:18:32Z")

</div>

It sounds like you sorted this out but nobody explained the fundamental nature of the problem.

Cartesian3 is for representing x/y/z coordinates in 3D space relative to the center of the earth. What you’re actually talking about is GPS coordinates on the surface of the earth. Cesium represents this concept with [Cartographic](https://cesium.com/learn/cesiumjs/ref-doc/Cartographic.html). Latitude and longitude are natively stored in radians (angle across the ellipsoid’s surface), but the structure is commonly constructed using `Cartographic.fromDegrees`. If you model your position using `Cartographic`, you can easily modify the altitude (above ellipsoid surface) by changing its `height` property. Cartographics can be converted to Cartesian3 using the static `Cartograhic.toCartesian` function.
