tedp
Version:
terra dp init
83 lines (66 loc) • 2.23 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>镜头信息</title>
<script src="./dist/tumap.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#mapContainer{
position:absolute;
width:100%;
height:100%;
}
.cameraInfo{
position:absolute;
left:5px;
min-width: 100px;
min-height: 40px;
background:rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.8);
border-radius: 6px;
overflow: hidden;
color:#fff;
font-size:13px;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--地图容器-->
<div id="mapContainer"></div>
<div class="cameraInfo">
<div id="cameraLocation"></div>
<div id="cameraRotation"></div>
<div id="cameraDistance">
</div>
</div>
<script>
var map = TUMap.createMap({
//地图容器
id:"mapContainer",
//UE4服务地址 必须设置 当前示例以地址栏地址 为服务地址 ，用户需要替换为自己的服务地址
url:window.parent.window.exampleServerUrl ,//"http://localhost:81/",
//初始化完成回调函数
onInit: function(){
refreshCamera();
},
//镜头变化触发
onCameraChange: function(){
refreshCamera();
}
}) ;
//初始化完成处理
function refreshCamera(){
var camera = map.camera ;//镜头信息通过地图实例的 camera 属性对象获取
document.getElementById("cameraLocation").innerHTML = `镜头坐标(x,y,z)：${camera.location.x},${camera.location.y},${camera.location.z}`;
document.getElementById("cameraRotation").innerText = `镜头旋转(x,y,z)：${camera.rotation.roll},${camera.rotation.pitch},${camera.rotation.yaw}`;
document.getElementById("cameraDistance").innerText = `镜头垂直距离：${camera.distance}` ;
}
</script>
</body>
</html>