<!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 animatepass;
var flypass;
var animaterunning = false;
var flyrunning = false;
var runningtime = 0;
var flyrunningtime = 0;
var terrainEnabled = true;
var buildingEnabled = true;
var subwayEnabled = true;
var movingFlyCenterObject = false;
var undergroundCubeLayer;
var vectorlayer;
var flyCubeLayer;
var clipboxtarget;
setClipState = function (obj, enabled)
{
if (obj)
{
if (obj instanceof THREE.Object3D)
{
obj.traverse(function (child)
{
if (child instanceof THREE.Mesh)
{
var mat = child.material;
mat["clipping"] = enabled;
if (enabled == true)
{
mat["clippingPlanes"] = cmworld.clipBox.localPlanes;
mat["clipIntersection"] = cmworld.clipBox.clipIntersection;
}
else
{
mat["clippingPlanes"] = cmworld.clipBox.hidePlanes;
mat["clipIntersection"] = cmworld.clipBox.clipIntersection;
}
mat.needsUpdate = true;
child.needsUpdate = true;
}
});
}
}
}
createCube3DClipLayer = function ()
{
//undergroundCubeLayer = cmworld.addCube3DLayer("underground", "http://demo.cmworld.net/cube3d/cbr/{z}/{y}/{x}/{y}_{x}_{f}.cbr", 0, 14, -10, 10000, 4194304, "raster", "cbr");
//undergroundCubeLayer = cmworld.addCube3DLayer("underground", "http://" + location.hostname + "/cube3d/cbr/{z}/{y}/{x}/{y}_{x}_{f}.cbr", 0, 14, -10, 10000, 4194304, "raster", "cbr");
undergroundCubeLayer = cmworld.addCube3DLayer("underground", "http://demo.cmworld.net/cube3d/cbr/{z}/{y}/{x}/{y}_{x}_{f}.cbr", 0, 15, -100, 10000, 4194304, "raster", "cbr");
undergroundCubeLayer.textureFilter = THREE.LinearFilter;
undergroundCubeLayer.minRenderLevel = 10;
undergroundCubeLayer.maxRenderLevel = 15;
undergroundCubeLayer.DistinguishedFactor = 3.0;
undergroundCubeLayer.renderFrame = true;
undergroundCubeLayer.renderOnlyFrame = false;
undergroundCubeLayer.pointColors[1] = new THREE.Color(0x6fBF44);
undergroundCubeLayer.pointColors[2] = new THREE.Color(0x54272A);
undergroundCubeLayer.pointColors[3] = new THREE.Color(0x578700);
undergroundCubeLayer.pointColors[7] = new THREE.Color(0xB97536);
undergroundCubeLayer.pointColors[8] = new THREE.Color(0xBF9C86);
undergroundCubeLayer.pointColors[9] = new THREE.Color(0x6C5E5B);
//undergroundCubeLayer.pointColors[0] = new THREE.Color(0xffffff);
undergroundCubeLayer.pointColors[4] = new THREE.Color(0xff0000);
undergroundCubeLayer.pointColors[5] = new THREE.Color(0x00ff00);
undergroundCubeLayer.pointColors[6] = new THREE.Color(0x0000ff);
undergroundCubeLayer.defaultColor = new THREE.Color(0x6C5E5B);
undergroundCubeLayer.fillDefaultColor = true;
//undergroundCubeLayer.terrainClipType = CMWORLD.Cube3DTerrainClipType.None;
undergroundCubeLayer.terrainClipType = CMWORLD.Cube3DTerrainClipType.ClipOverground;
//undergroundCubeLayer.terrainClipType = CMWORLD.Cube3DTerrainClipType.ClipUnderground;
// 사용자 객체를 만들자
var geo = new THREE.SphereGeometry(0.01);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geo, material);
mesh.frustumCulled = false;
clippingcenter = new CMWORLD.UserObject("center", mesh, new THREE.Vector3(127.04559889936567, 37.49056149432855, 60), null);
//clippingcenter = new CMWORLD.UserObject("center", mesh, new THREE.Vector3(126.80601882986258, 37.57555672226788, 10), null);
userLayer.add(clippingcenter);
undergroundCubeLayer.addTargetObject("center", clippingcenter, 14, 200);
//undergroundCubeLayer.addTargetClipbox("clipunder", 14, 200);
clipboxtarget = undergroundCubeLayer.targetObject["center"];
/*this.targetObject
지표 = 0
하늘 = 1
바다 = -2
땅속 = 21 ~ 26
*/
}
addToLine = function (str)
{
var lines = coordtext.value + str;
coordtext.value = lines;
//coordtext.focus();
//coordtext.setSelectionRange(coordtext.value.length,coordtext.value.length);
}
addClipPlane = function ()
{
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawSimpleline);
cmworld.mouse.userDrawHandler.displayMeasureText = false;
cmworld.mouse.userDrawHandler.callbackEndEditing = function (editingPointList, currObjectType)
{
if (CMWORLD.GisObjectType.simpleline == currObjectType)
{
if (editingPointList.length < 2)
return;
cmworld.clipBox2.addClipplane(editingPointList[0], editingPointList[1]);
cmworld.clipBox2.ClipboxEnabled = true;
//flyCubeLayer.ResetIntersectState();
}
cmworld.mouse.userDrawHandler.clear();
cmworld.measureLayer.clear();
cmworld.reDrawOverlayMap();
// 취소
return false;
//return true;
}
}
mouseClick = function (event)
{
if (event)
{
if (event.shiftKey)
{
if (cmworld)
{
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
var pos = cmworld.getHitCoordinate(mousePos.x, mousePos.y);
if (pos)
{
var coordtext = document.getElementById("coordtext");
if (coordtext)
{
var str = "(" + pos.x.toString() + ", " + pos.y.toString() + ", " + pos.z.toString() + ")\n";
addToLine(str);
}
}
}
}
else if (event.ctrlKey)
{
if (cmworld)
{
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
if (cmworld.mouse.isClick(mousePos) == false)
return;
var pos = cmworld.getHitCoordinate(mousePos.x, mousePos.y);
if (pos)
{
if (cmworld.clipBox)
{
cmworld.clipBox.setLocalPosition(pos.y, pos.x, pos.z);
if (clipboxtarget)
{
clipboxtarget.setClipPlanePosition();
}
}
}
}
}
}
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
canvas.onclick = mouseClick;
var vworld_mode = true;
if (vworld_mode) {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
// 여기에 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");
}
else {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius);
// 영상레이어
cmworld.addBaseImageLayer("http://cmworld.net:5050/CmWorld/CmWorldServlet?T=world_raster&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180);
// 지형레이어
cmworld.addTerrainLayer("terrain", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=dem30m&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180, "CBT");
}
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
// 여기에 transparancy 추가...
// 투명 값은 여기서 설정
cmworld.option.terrainTransparency = false;
cmworld.option.terrainOpacity = 1;
// Opacity를 위한 User Interface 용
var params =
{
terrain: true,
building: true,
subway: true,
pipeline: true,
clipIntersection: cmworld.clipBox.clipIntersection,
animate: animaterunning,
opacity: 1.0,
animatefly: flyrunning,
gotoPosition: movingFlyCenterObject
};
gui = new dat.GUI();
var folder = gui.addFolder("Layer Clipping");
folder.add(params, 'terrain').onChange(
function (v)
{
terrainEnabled = v;
});
folder.add(params, 'building').onChange(
function (v)
{
buildingEnabled = v;
var layer = cmworld.getLayer("facility_build");
if (layer != null)
{
layer.visible = v;
}
});
var folder2 = gui.addFolder("Clipping Setting");
folder2.add(params, 'animate').name('animate clipbox').onChange(
function (value)
{
animaterunning = value;
checkAnimate();
});
folder2.add(params, 'clipIntersection').name('clip intersection').onChange(
function (value)
{
cmworld.clipBox.clipIntersection = value;
});
folder2.add(params, 'opacity', 0, 1).name("terrain opacity").onChange
(
function ()
{
if (cmworld)
{
cmworld.setTerrainTransparancy(params.opacity);
}
});
folder2.add(params, 'gotoPosition').name('goto position').onChange(
function (value) {
movingFlyCenterObject = value;
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
createCube3DClipLayer();
/*
var eye_x = 127.0284353974798;
var eye_y = 37.493689215013305;
var eye_h = 196.27;
var look_x = 127.02757826432276;
var look_y = 37.49802454065084;
var look_h = 13.42819338105619;
*/
// 강서
/*
var eye_x = 126.80654514519867;
var eye_y = 37.565380333346845;
var eye_h = 500;
var look_x = 126.80601882986258;
var look_y = 37.57555672226788;
var look_h = 10;
*/
// 강남
var eye_x = 127.05;
var eye_y = 37.48;
var eye_h = 500;
var look_x = 127.04559889936567; //127.06125831338251;
var look_y = 37.49056149432855; //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)
{
if (cmworld.clipBox)
{
if (animaterunning == true)
{
runningtime += 0.0005;
if (runningtime > 1.0)
runningtime = 0.0;
pt = animatepass.getPoint(runningtime);
// 이게 해당지점
cmworld.clipBox.setLocalPosition(pt.y, pt.x, pt.z);
}
}
if (flyrunning == true)
{
flyrunningtime += 0.0005;
if (flyrunningtime > 1.0)
flyrunningtime = 0.0;
pt = flypass.getPoint(flyrunningtime);
// 이게 해당지점
cmworld.clipBox.setLocalPosition(pt.y, pt.x, pt.z);
}
}
};
makeClipbox = function ()
{
var localgeo = new THREE.BoxGeometry(200, 200, 200);
var localmesh = new THREE.Mesh(localgeo, new THREE.MeshPhongMaterial({ color: 0xffffff, opacity: 0.2, transparent: true }));
cmworld.clipBox.localMesh = localmesh;
//cmworld.clipBox.setLocalPosition(37.498077610324195, 127.0274561940137, 42.15379375000016);
//cmworld.clipBox.setLocalPosition(37.498077610324195, 127.0274561940137, 102.15379375000016);
cmworld.clipBox.setLocalPosition(37.49056149432855, 127.04559889936567, 62.15379375000016);
//cmworld.clipBox.setLocalPosition(37.57555672226788, 126.80601882986258, 10);
cmworld.clipBox.needLocalClipboxUpdate = true;
cmworld.rootScene.add(cmworld.clipBox.localMesh);
cmworld.clipBox.localClipboxEnabled = true;
/*
if (clipboxtarget)
{
clipboxtarget.setClipPlanePosition();
}
*/
}
makeClipImage = function ()
{
if (clipboxtarget)
{
clipboxtarget.makeClipImage();
}
}
changeColors = function ()
{
if (undergroundCubeLayer)
{
undergroundCubeLayer.pointColors = [];
undergroundCubeLayer.pointColors[1] = new THREE.Color(0x070326);
undergroundCubeLayer.pointColors[2] = new THREE.Color(0x25204F);
undergroundCubeLayer.pointColors[3] = new THREE.Color(0x47436B);
undergroundCubeLayer.pointColors[7] = new THREE.Color(0x6C6888);
//undergroundCubeLayer.pointColors[8] = new THREE.Color(0xAAA9B6);
//undergroundCubeLayer.pointColors[9] = new THREE.Color(0xBEC18D);
if (clipboxtarget)
{
clipboxtarget.makeClipImage();
}
}
}
checkAnimate = function ()
{
if (animatepass == undefined)
{
var pathpoints = [];
/*
pathpoints.push(new THREE.Vector3(127.0274561940137, 37.498077610324195, 42.15379375000016)),
pathpoints.push(new THREE.Vector3(127.0274561940137, 37.498077610324195, 30)),
pathpoints.push(new THREE.Vector3(127.0274561940137, 37.498077610324195, 0)),
pathpoints.push(new THREE.Vector3(127.0274561940137, 37.498077610324195, 50)),
pathpoints.push(new THREE.Vector3(127.0274561940137, 37.498077610324195, 100)),
pathpoints.push(new THREE.Vector3(127.0274561940137, 37.498077610324195, 17.770679811947048)),
pathpoints.push(new THREE.Vector3(127.02419248142476, 37.49716467964495, 12.214464443735778)),
pathpoints.push(new THREE.Vector3(127.0228035873738, 37.49983570161439, 12.821062065660954)),
pathpoints.push(new THREE.Vector3(127.028660924021, 37.50111859808611, 36.06227322015911)),
pathpoints.push(new THREE.Vector3(127.03020520787288, 37.496981317930754, 28.27079238090664)),
pathpoints.push(new THREE.Vector3(127.02899277466136, 37.4960762939164, 18.820372722111642)),
pathpoints.push(new THREE.Vector3(127.02726693707825, 37.494954961783975, 16.878087333403528)),
pathpoints.push(new THREE.Vector3(127.02611874148117, 37.49615467408969, 15.145359858870506)),
pathpoints.push(new THREE.Vector3(127.02608512216023, 37.49859802318132, 16.248056579381227)),
pathpoints.push(new THREE.Vector3(127.02700778314758, 37.49820433203146, 17.17902781162411)),
pathpoints.push(new THREE.Vector3(127.0274561940137, 37.498077610324195, 17.770679811947048)),
*/
pathpoints.push(new THREE.Vector3(127.04325741129018, 37.49123738095383, 55.68720994424075)),
pathpoints.push(new THREE.Vector3(127.04325741129018, 37.49123738095383, 5.68720994424075)),
pathpoints.push(new THREE.Vector3(127.04325741129018, 37.49123738095383, 55.68720994424075)),
pathpoints.push(new THREE.Vector3(127.04404546754316, 37.49077481256402, 90.021320912987)),
pathpoints.push(new THREE.Vector3(127.04301978326939, 37.489409456938496, 74.11334399972111)),
pathpoints.push(new THREE.Vector3(127.04216317959703, 37.48965402846808, 50.172050890512764)),
pathpoints.push(new THREE.Vector3(127.04231897458436, 37.49068006111507, 39.335042625665665)),
pathpoints.push(new THREE.Vector3(127.04325741129018, 37.49123738095383, 55.68720994424075)),
animatepass = new THREE.CatmullRomCurve3(pathpoints);
}
}
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<a href="#" onclick="makeClipbox()" style="font-size:12px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Make Clipbox</a>
<a href="#" onclick="makeClipImage()" style="font-size:12px;left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Make UndergroundImage</a>
<a href="#" onclick="changeColors()" style="font-size:12px;left: 10px; top: 50px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Change UndergroundColor</a>
<a href="#" onclick="addClipPlane()" style="font-size:12px;left: 10px; top: 70px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Add Clip plane</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>