<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>CmWorld3 Sample</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#cmworld3Canvas {
width: 100%;
height: 100%;
}
</style>
<script src="./Cm3WebGL/lib/jquery-2.2.0.min.js"></script>
<script src="./Cm3WebGL/cm_compile.js"></script>
<script>
CMWORLD.Compile.includeCm3Library("./Cm3WebGL/");
</script>
<script>
var cmworld3Viewer;
window.onload = function () {
var canvas = document.querySelector("#cmworld3Canvas");
// canvas 지정, 시작 위치 지정
cmworld3Viewer = new CMWORLD.CmWorld3(canvas, 0, 0, CMWORLD.cm_const.EarthRadius * 1.5 );
// 영상 및 지형 레이어 추가.
cmworld3Viewer.addTileImageLayer("base", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=world_raster&L={z}&X={x}&Y={y}", 0, 12, 90, -90, -180, 180, "jpg", false);
cmworld3Viewer.addTerrainLayer("terrain", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=dem30m&L={z}&X={x}&Y={y}", 0, 12, 90, -90, -180, 180, "CBT");
cmworld3Viewer.showAxis(true);
};
function gotoCamera() {
if (cmworld3Viewer != null) {
cmworld3Viewer.gotoGeo(127, 37, 2000);
}
}
function animationmoveCamera() {
if (cmworld3Viewer != null) {
for (var i = 0; i < 1 ; i++) {
var eyePos = new THREE.Vector3( 0, -1, 1);
var lookatPos = new THREE.Vector3(0, 0, 0);
//var result = CMWORLD.CmCameraGlobe.calcLocalHeadingTiltOnCmWorldOriginPlane(eyePos, lookatPos);
//console.log(result);
}
//result = CMWORLD.CmCameraGlobe.calcHeadingTilt(127, 37, 1000, 127, 37.001, 2000);
//console.log(result);
// heading은 맞고, tilt가 안맞음.
//cmworld3Viewer.gotoLookAt(128, 38, 1000, 127, 38, 0 );
// heading은 맞고, tilt가 안맞음.
result = CMWORLD.CmCameraGlobe.calcHeadingTilt( new THREE.Vector3(127, 38, 1000), new THREE.Vector3(127, 38, 0) );
console.log(result);
cmworld3Viewer.gotoLookAt(127, 38, 1000, 127, 38, 0);
// heading은 맞고, tilt가 안맞음.
//result = CMWORLD.CmCameraGlobe.calcHeadingTilt(127, 39, 1000, 127, 38, 0);
//cmworld3Viewer.gotoLookAt(127, 39, 1000, 127, 38, 0);
}
}
function lookatCamera() {
if (cmworld3Viewer != null) {
var eyePos = new THREE.Vector3(127, 37, 2000);
var lookatPos = new THREE.Vector3(127, 37, 0);
cmworld3Viewer.gotoLookAt( eyePos.x, eyePos.y, eyePos.z, lookatPos.x, lookatPos.y, lookatPos.z );
}
}
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<a href="#" onclick="gotoCamera()" style="right: 10px; top: 20px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">goto</a>
<a href="#" onclick="animationmoveCamera()" style="right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">move</a>
<a href="#" onclick="lookatCamera()" style="right: 10px; top: 60px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">lookat</a>
</body>
</html>