<!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 src="./lib/dat.gui.min.js"></script>
<script>
var cmworld;
var gui;
var m_FloorLayerName = "floor";
var volumnOption;
var Volumn3D;
var m_ptlist = [];
var options = function () {
this.opacity = 0.5;
this.color = "#0000ff";
this.floodingHeight = 10;
};
function SetOption() {
if (Volumn3D) {
Volumn3D.material.opacity = volumnOption.opacity
var color = parseInt(volumnOption.color.replace(/^#/, ''), 16);
Volumn3D.material.color.setHex(color);
Volumn3D.material.emissive.setHex(color);
SetHeight(volumnOption.floodingHeight);
}
}
function SetHeight(height) {
if (m_ptlist.length < 1) return;
var ptlist = m_ptlist; //이전에 scale이 이미 곱해져 있음.
var scale = 10000.0;
var earthRadius = CMWORLD.cm_const.EarthRadius;
var origin = CMWORLD.CmMathEngine.Geo2Cartesian(ptlist[0].x / scale, ptlist[0].y / scale, ptlist[0].z + earthRadius);
var shape = new THREE.Shape(ptlist);
var extrudeSettings = { amount: height, bevelEnabled: false, bevelSegments: 2, steps: 1, bevelSize: 1, bevelThickness: 1 };
var basegeo = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var pt;
for (var i = 0; i < basegeo.vertices.length; i++) {
pt = CMWORLD.CmMathEngine.Geo2Cartesian(basegeo.vertices[i].x / scale, basegeo.vertices[i].y / scale, basegeo.vertices[i].z + earthRadius);
Volumn3D.geometry.vertices[i].x = pt.x - origin.x;
Volumn3D.geometry.vertices[i].y = pt.y - origin.y;
Volumn3D.geometry.vertices[i].z = pt.z - origin.z;
}
Volumn3D.geometry.verticesNeedUpdate = true;
}
function MakeVolumn(ptlist) {
var scale = 10000.0;
var earthRadius = CMWORLD.cm_const.EarthRadius;
var origin = CMWORLD.CmMathEngine.Geo2Cartesian(ptlist[0].x, ptlist[0].y, ptlist[0].z + earthRadius);
for (var i = 0; i < ptlist.length; i++) {
ptlist[i].x *= scale;
ptlist[i].y *= scale;
}
var clr = 0x0000ff;
var height = 70;
if (volumnOption) {
clr = parseInt(volumnOption.color.replace(/^#/, ''), 16);
height = volumnOption.floodingHeight;
}
var shape = new THREE.Shape(ptlist);
var extrudeSettings = { amount: height, bevelEnabled: false, bevelSegments: 2, steps: 1, bevelSize: 1, bevelThickness: 1 };
var basegeo = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var pt;
for (var i = 0; i < basegeo.vertices.length; i++) {
pt = CMWORLD.CmMathEngine.Geo2Cartesian(basegeo.vertices[i].x / scale, basegeo.vertices[i].y / scale, basegeo.vertices[i].z + earthRadius);
basegeo.vertices[i].x = pt.x - origin.x;
basegeo.vertices[i].y = pt.y - origin.y;
basegeo.vertices[i].z = pt.z - origin.z;
}
Volumn3D = new THREE.Mesh(basegeo, new THREE.MeshToonMaterial({ color: clr, emissive: clr }));
Volumn3D.material.transparent = true;
Volumn3D.material.opacity = 0.5;
var obj = new CMWORLD.UserObject("floor", Volumn3D, new THREE.Vector3(ptlist[0].x / scale, ptlist[0].y / scale, 0));
var userLayer = getUserLayer(m_FloorLayerName);
userLayer.add(obj);
}
function getUserLayer(layerName) {
var layer = cmworld.getLayer(layerName);
if (layer) {
return layer;
}
// 없으면 만들어서 추가한다.
var userLayer = new CMWORLD.UserObjectLayer(layerName);
cmworld.addLayer(userLayer);
return userLayer;
}
window.onload = function () {
var canvas = document.querySelector("#cmworld3Canvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius * 2.5, { toptilespan: 36 });
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
var serverUri = "http://xdworld.vworld.kr:8080/XDServer3d";
cmworld.addBaseImageLayer(serverUri + "/requestLayerNode?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=tile&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180 );
cmworld.addTerrainLayer("terrain", serverUri + "/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", serverUri + "/requestLayerNode?Layer=facility_build&Level={z}&IDX={x}&IDY={y}&APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236",
serverUri + "/requestLayerObject?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=facility_build&Level={z}&IDX={x}&IDY={y}&DataFile={f}", "facility_build", 15, 15, 90, -90, -180, 180, "dat");
cmworld.addReal3DLayer("facility_build_at", serverUri + "/requestLayerNode?Layer=facility_build_at&Level={z}&IDX={x}&IDY={y}&APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236",
serverUri + "/requestLayerObject?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=facility_build_at&Level={z}&IDX={x}&IDY={y}&DataFile={f}", "facility_build_at", 0, 15, 90, -90, -180, 180, "dat");
var eye_x = 126.873;
var eye_y = 37.495;
var eye_h = 400;
var look_x = 126.87109037612153;
var look_y = 37.50091923499337;
var look_h = 50;
var agt = navigator.userAgent.toLowerCase();
if (agt.indexOf("trident") > 0) { //IE 경우
cmworld.gotoLookAt(look_x, look_y, 2500, look_x, look_y, 50);
}
else {
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
volumnOption = new options();
gui = new dat.GUI();
gui.add(volumnOption, 'opacity', 0, 1.0).onChange(SetOption);
gui.add(volumnOption, 'floodingHeight', 0, 20).onChange(SetOption);
gui.addColor(volumnOption, 'color').onChange(SetOption);
gui.open();
gui.domElement.parentElement.style.zIndex = 10000;
m_ptlist.push({ x: 126.87126385502455, y: 37.51085388130343, z: 0 });
m_ptlist.push({ x: 126.86831394754071, y: 37.50605724612568, z: 0 });
m_ptlist.push({ x: 126.86684541141935, y: 37.50072997343536, z: 0 });
m_ptlist.push({ x: 126.86675593221260, y: 37.49678349689347, z: 0 });
m_ptlist.push({ x: 126.86857197735128, y: 37.49018277977640, z: 0 });
m_ptlist.push({ x: 126.87410198191692, y: 37.49013446266565, z: 0 });
m_ptlist.push({ x: 126.87254557125800, y: 37.49703052158998, z: 0 });
m_ptlist.push({ x: 126.87301987234820, y: 37.49954011169555, z: 0 });
m_ptlist.push({ x: 126.87568275758409, y: 37.50636756854979, z: 0 });
m_ptlist.push({ x: 126.87804955601680, y: 37.51020810449385, z: 0 });
m_ptlist.push({ x: 126.87243930866391, y: 37.51296345846592, z: 0 });
MakeVolumn(m_ptlist);
};
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
</body>
</html>