<!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%;
}
#labelDiv {
font-size: 12px;
color: #ffd800;
position: absolute;
top: 20px;
left: 10px;
z-index: 1;
}
</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 src="./lib/dat.gui.min.js"></script>
<script>
var cmworld;
var gui;
var userLayer;
var userObj;
var dustLayer;
var dustCube;
var COfiles;
var curfiles;
var curlines;
var curcolormap;
var timerId;
var dustmat;
simulate = function ()
{
var url = curfiles[curlines];
curlines++;
if (curlines >= curfiles.length)
{
curlines = 0;
}
var loader = new THREE.OBJLoader();
loader.load(url, function (object)
{
//console.log("loaded");
var origin = new THREE.Vector3(126.45723778319276, 36.98539327036756, -1200.00198964960873127);
if (object.children[0])
{
userLayer.clear();
object.children[0].material = dustmat;
dustCube = new CMWORLD.UserObject("dust", object.children[0], origin);
dustCube.setScale(1000, 1000, 1000);
dustCube.rotate4GlobeEarth();
userLayer.add(dustCube);
}
});
}
Start = function ()
{
timerId = setInterval("simulate()", 1000);
}
Stop = function ()
{
clearInterval(timerId);
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
// 여기에 transparancy 추가...
// 투명 값은 여기서 설정
cmworld.option.terrainTransparency = false;
cmworld.option.terrainOpacity = 1;
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");
dustmat = new THREE.MeshPhongMaterial({ color: 0xc4c400 });
dustmat.transparent = true;
//dustmat.side = THREE.DoubleSide;
dustmat.opacity = 0.5;
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
$.get('dustdata/SmartCity/dustmodel.txt', function (data)
{
var lines = data.split("\n");
curlines = 0;
curfiles = lines;
});
var eye_x = 126.5;
var eye_y = 35.48;
var eye_h = 100000;
var look_x = 126.365; //127.06125831338251;
var look_y = 37.125; //37.4740406463569;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
cmworld.preUpdateEvent.addEventListener(preUpdate);
function preUpdate(params, owner)
{
}
};
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<a href="#" onclick="Start()" style="font-size:12px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Start</a>
<a href="#" onclick="Stop()" style="font-size:12px;left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Stop</a>
<!--textarea id="coordtext" rows="30" cols="30" style="background: rgb(255, 255, 255); bottom: 5px; left: 5px; width: 450px; height: 20%; position: absolute; overflow-y: scroll;"></!--textarea-->
</body>
</html>