<!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;
}
#cmworldCanvas {
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 cmworld = null;
var gui;
var interval_id = -1;
var colorindex = 0;
ambientcolorchange = function () {
if (cmworld) {
colorindex++;
if (colorindex > 3) {
colorindex = 0;
}
if (colorindex == 0) {
cmworld.setAmbientColor(0x555555);
}
else if (colorindex == 1) {
cmworld.setAmbientColor(0xff0000);
}
else if (colorindex == 2) {
cmworld.setAmbientColor(0x00ff00);
}
else if (colorindex == 3) {
cmworld.setAmbientColor(0x0000ff);
}
}
}
AmbientLight = function () {
init();
interval_id = setInterval(ambientcolorchange, 1000);
cmworld.option.worldTimer.reset();
cmworld.option.worldTimer.setSpeed(10000);
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
cmworld.option.worldTimer.start();
}
DayNight = function () {
init();
var eye_x = 126.925;
var eye_y = 37.5219;
var eye_h = 1000;
var look_x = 126.928;
var look_y = 37.5219;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
cmworld.enableSunLight(true);
cmworld.setAmbientColor(0x11111111);
cmworld.option.worldTimer.reset();
cmworld.option.worldTimer.setSpeed(10000);
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
cmworld.option.worldTimer.start();
}
init = function()
{
if( cmworld)
{
cmworld.option.worldTimer.stop();
cmworld.option.worldTimer.reset();
}
if( interval_id >= 0 )
{
clearInterval(interval_id);
interval_id = -1;
}
}
window.onload = function () {
init();
var canvas = document.querySelector("#cmworldCanvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
cmworld.addTileImageLayer("base", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=tile&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "jpg", false);
cmworld.addTerrainLayer("terrain", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=dem&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "");
cmworld.addReal3DLayer("facility_build", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?Layer=facility_build&Level={z}&IDX={x}&IDY={y}&APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236",
"http://xdworld.vworld.kr:8080/XDServer3d/requestLayerObject?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=facility_build&Level={z}&IDX={x}&IDY={y}&DataFile={f}", "facility_build", 0, 15, 90, -90, -180, 180, "dat");
cmworld.option.showFPS(true);
AmbientLight();
var eye_x = 127.08174188396235;
var eye_y = 37.51231017799103;
var eye_h = 200;
var look_x = 127.08174188396235;
var look_y = 37.51505310508758;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="AmbientLight()" style="right: 10px; top: 20px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">AmbientLight</a>
<a href="#" onclick="DayNight()" style="right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Day&Night</a>
</body>
</html>