<!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/lib/msgpack.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 cubeLayer;
var userLayer;
var userObj;
var needChangeColor = false;
function changeCubeColor()
{
needChangeColor = true;
}
function createCube3DLayer()
{
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
cubeLayer = cmworld.addCube3DLayer("virtual", "", 0, 17, -10, 10000, 4194304, "virtual", "");
cubeLayer.renderFrame = true;
cubeLayer.cubeBeforeUpdate = function (cube, cubemesh)
{
var cinfo = cube.cubeInfo;
if (cinfo.row % 2 == 0)
{
cubemesh.material.color.setHex(0x00ff00);
cubemesh.material.needsUpdate = true;
}
};
cubeLayer.cubeBeforeLayerRender = function(cubelayer)
{
}
cubeLayer.cubeBeforeCubeRender = function (cube, cubemesh)
{
if (needChangeColor == true)
{
var cinfo = cube.cubeInfo;
if (cinfo.col % 2 == 1)
{
cubemesh.material.color.setHex(0x0000ff);
cubemesh.material.needsUpdate = true;
}
}
}
cubeLayer.cubeAfterCubeRender = function (cube, cubemesh)
{
}
cubeLayer.cubeAfterLayerRender = function (cubelayer)
{
needChangeColor = false;
}
var geo = new THREE.SphereGeometry(1);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geo, material);
flycenter = new CMWORLD.UserObject("fly", mesh, new THREE.Vector3(127.02913489835643, 37.49499387684867, 20), null);
userLayer.add(flycenter);
//cubeLayer.addTargetCamera("camera", 16, 120);
cubeLayer.addTargetObject("fly", flycenter, 17, 20);
}
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);
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");
cmworld.option.showFPS(true);
createCube3DLayer();
cmworld.gotoLookAt(127.02985699102842, 37.49327260338736, 6378166, 127.02913489835643, 37.49499387684867, 6378137);
cmworld.preUpdateEvent.addEventListener(preUpdate);
function preUpdate(params, owner)
{
}
};
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<!--<a id="txtLabel" href="#" style="font-size:32px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">현재고도: 10,000,000 m</a>-->
<a href="#" style="font-size:14px;left: 10px;bottom: 20px;position: absolute;z-index: 10000;color: black;background-color: white;text-decoration: none;padding: 10px;">3차원 입체 격자 가시화 시스템 Version 1.1</a>
<a href="#" onclick="changeCubeColor()" style="right: 10px; top: 30px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">changeCubeColor</a>
</body>
</html>