<!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 userLayer;
var userObj;
var animatepass;
var flypass;
var animaterunning = false;
var flyrunning = false;
var runningtime = 0;
var flyrunningtime = 0;
var undergroundTarget = null;
var terrainEnabled = true;
var buildingEnabled = true;
var subwayEnabled = true;
var pipeEnabled = true;
var underLayerEnabled = true;
var renderFrameEnabled = true;
var clippingcenter = null;
var movingFlyCenterObject = false;
var undergroundCubeLayer;
var vectorlayer;
var flyCubeLayer;
mouseClick = function (event) {
if (event) {
if (movingFlyCenterObject == true) {
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 (clippingcenter)
clippingcenter.setPosition(pos.x, pos.y, pos.z);
if (cmworld.clipBox)
cmworld.clipBox.setLocalPosition(pos.y, pos.x, pos.z);
}
}
}
}
}
loadPipeline = function ()
{
//var filename = ".//model//GangnamPipe//GangnamPipe.obj";
//var mtlname = ".//model//GangnamPipe//GangnamPipe.mtl";
var filename = "./model/GangnamPipe/GangnamPipe01.obj";
var mtlname = "./model/GangnamPipe/GangnamPipe01.mtl";
var loader = new THREE.OBJLoader();
loader.load(filename, function (object)
{
//var origin = new THREE.Vector3(127.0243307481833, 37.49700125656423, 150);
var origin = new THREE.Vector3(127.02433, 37.4950, -10);
var obj = new CMWORLD.UserObject("pipeline", object, origin);
obj.clipApply = false;
obj.rotate4GlobeEarth();
//obj.object.rotateZ(-90 * CMWORLD.cm_const.Deg2Rad);
obj.object.rotateX(-90 * CMWORLD.cm_const.Deg2Rad);
obj.object.rotateY(-20 * CMWORLD.cm_const.Deg2Rad);
obj.object.traverse(function (child)
{
if (child instanceof THREE.Mesh)
{
child.geometry.computeVertexNormals();
var r = Math.random() * 2;
r = Math.round(r);
if (r == 0.0)
{
child.material.emissive.setHex(0x00FF00);
child.material.color.setHex(0x00FF00);
}
else if (r == 1.0)
{
child.material.emissive.setHex(0x0000FF);
child.material.color.setHex(0x00FF00);
}
else
{
child.material.emissive.setHex(0xFF0000);
child.material.color.setHex(0x00FF00);
}
CMWORLD.Material.addClippingAttri(child.material);
}
});
//computeNormal(obj.object);
userLayer.add(obj);
});
}
loadgangnam = function ()
{
var siteRootFolder = CMWORLD.Compile.getSiteRootUrl();
var onLoad3dsfinished = function (name, url, meshArray)
{
if (meshArray == null)
return;
var B1Bottom = 9;
var B2Bottom = 5;
var FloorHeight = 3;
var alt = 0;
if (url != null)
{
if (url.indexOf("AF01_CL.3DS") > 0)
{
alt = 17;
}
else if (url.indexOf("AF01_FC.3DS") > 0)
{
alt = 17;
}
else if (url.indexOf("AB01_AB02.3DS") > 0)
{
// 1,2층 계단.
alt = B2Bottom;
}
else if (url.indexOf("AB01_AF01.3DS") > 0)
{
// 출입구에서 내려오는 계단.
alt = B1Bottom + 0.5;
}
else if (url.indexOf("AB01_CL.3DS") > 0)
{
alt = B1Bottom + FloorHeight;
}
else if (url.indexOf("AB01_FC.3DS") > 0)
{
alt = B1Bottom - 0.2;
}
else if (url.indexOf("AB01_FL.3DS") > 0)
{
// 출입구에서 내려오는 계단 손잡이 벽.
alt = B1Bottom - 0.4;
}
else if (url.indexOf("AB01_WL.3DS") > 0)
{
alt = B1Bottom;
}
else if (url.indexOf("AB02_CL.3DS") > 0)
{
// 천장.
alt = B2Bottom + FloorHeight;
}
else if (url.indexOf("AB02_FC.3DS") > 0)
{
// 지하철 타는곳의 자판기 소화전 같은 시설물
alt = B2Bottom;
}
else if (url.indexOf("AB02_FL.3DS") > 0)
{
// 바닥.
alt = B2Bottom;
}
else if (url.indexOf("AB02_WL.3DS") > 0)
{
// 벽
alt = B2Bottom;
}
}
for (var i = 0; i < meshArray.length; i++)
{
var mesh = meshArray[i];
var lon = 127.0278005279;
var lat = 37.4979705289;
// vworld 모델 데이터 기준으로 지구 중심축 방향으로 세웠다.
var quaternionX = new THREE.Quaternion();
var quaternionY = new THREE.Quaternion();
// 좌표의 시작이 -Z축부터 CCW 방향으로 돈다.
quaternionY.setFromAxisAngle(new THREE.Vector3(0, 1, 0), -(180 - lon) * CMWORLD.CmMathEngine.Deg2Rad);
quaternionX.setFromAxisAngle(new THREE.Vector3(1, 0, 0), -lat * CMWORLD.CmMathEngine.Deg2Rad);
var quaternion_Rotate = THREE.Quaternion.prototype.multiplyQuaternions(quaternionY, quaternionX);
mesh.quaternion.copy(quaternion_Rotate);
{
var material = null;
var fileurl = null;
{
if (mesh.material.type == 'MultiMaterial')
{
material = mesh.material.materials[0];
}
else
{
material = mesh.material;
}
var imageName = material.imageName;
fileurl = siteRootFolder + "/model/gangnam_station/" + imageName;
var loader = new THREE.TextureLoader();
loader.setCrossOrigin("Anonymous");
var tex = loader.load(fileurl);
tex.minFilter = THREE.LinearFilter;
tex.needUpdate = true;
tex.imageName = material.imageName;
// 맨처음에는 0부터 시작이다.
//tex.level = 0;
// 가지고 있는 가장 높은 레벨을 기록한다.
// 모르면, 가장 높을것 같은 수치.
//tex.endlevel = 10;
var mat = new THREE.MeshPhongMaterial({ map: tex, specular: 0, shininess: 0 });
mat.needsUpdate = true;
mat.side = THREE.DoubleSide;
mat["clippingPlanes"] = cmworld.clipBox.localPlanes;
mat["clipIntersection"] = cmworld.clipBox.clipIntersection;
mesh.material = mat;
}
}
mesh.onBeforeRender = function (renderer, scene, camera, geometry, material, group)
{
}
var obj = new CMWORLD.UserObject("subway", mesh, new THREE.Vector3(lon, lat, alt), null);
userLayer.add(obj);
}
};
var modelresoucrFolder = "/model/";
//CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "GN1_486.3ds", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
// 강남 좌표x
var modelresoucrFolder = "/model/gangnam_station/";
var model;
var lon = 127.0278005279;
var lat = 37.4979705289;
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_AB02.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_AF01.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
//CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_FL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_WL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
//CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_FL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_WL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AF01_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
//CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AF01_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
}
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;
}
});
}
}
}
createCube3DLayer = 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, "rasterclip", "cbr");
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);
// 사용자 객체를 만들자
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.04547670166997, 37.48944588385043, 60), null);
userLayer.add(clippingcenter);
//undergroundCubeLayer.addTargetCamera("camera", 14, 100);
undergroundCubeLayer.addTargetObject("center", clippingcenter, 14, 200);
undergroundTarget = undergroundCubeLayer.targetObject["center"];
/*
지표 = 0
하늘 = 1
바다 = -2
땅속 = 21 ~ 26
*/
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
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;
canvas.onclick = mouseClick;
// Opacity를 위한 User Interface 용
var params =
{
terrain: true,
building: true,
subway: true,
pipeline: true,
underground: true,
frame: true,
clipIntersection: cmworld.clipBox.clipIntersection,
animate: animaterunning,
opacity: 1.0,
animatefly: flyrunning,
gotoPosition: movingFlyCenterObject,
soil1: true,
soil2: true,
soil3: true,
soil7: true,
soil8: true,
soil9: true
};
gui = new dat.GUI();
var folder = gui.addFolder("Layer Clipping");
folder.add(params, 'terrain').onChange(
function (v)
{
terrainEnabled = v;
if (terrainEnabled == true)
cmworld.addTerrainScene();
else
cmworld.removeTerrainScene();
});
folder.add(params, 'building').onChange(
function (v)
{
buildingEnabled = v;
var layer = cmworld.getLayer("facility_build");
if (layer != null)
{
layer.visible = v;
}
});
folder.add(params, 'subway').onChange(
function (v)
{
subwayEnabled = v;
var obj = UserLayer.getObject('subway');
setClipState(obj.object, v);
});
folder.add(params, 'pipeline').onChange(
function (v)
{
pipeEnabled = v;
var obj = UserLayer.getObject('pipeline');
setClipState(obj.object, v);
});
folder.add(params, 'underground').onChange(
function (v) {
underLayerEnabled = v;
undergroundCubeLayer.renderOnlyFrame = !underLayerEnabled;
if (underLayerEnabled == false) {
undergroundCubeLayer.renderFrame = false;
renderFrameEnabled = false;
movingFlyCenterObject = false;
var pos = new THREE.Vector3(130, 30, 0);
if (clippingcenter)
clippingcenter.setPosition(pos.x, pos.y, pos.z);
if (cmworld.clipBox)
cmworld.clipBox.setLocalPosition(pos.y, pos.x, pos.z);
}
});
folder.add(params, 'frame').onChange(
function (v) {
renderFrameEnabled = v;
undergroundCubeLayer.renderFrame = renderFrameEnabled;
});
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;
});
var folder3 = gui.addFolder("Soil Layer");
folder3.add(params, 'soil1').name('붕적토층').onChange(
function (value) {
showSoilLayer(1, value);
});
folder3.add(params, 'soil2').name('풍화토층').onChange(
function (value) {
showSoilLayer(2, value);
});
folder3.add(params, 'soil3').name('풍화암층').onChange(
function (value) {
showSoilLayer(3, value);
});
folder3.add(params, 'soil7').name('보통암층').onChange(
function (value) {
showSoilLayer(7, value);
});
folder3.add(params, 'soil8').name('연암층').onChange(
function (value) {
showSoilLayer(8, value);
});
folder3.add(params, 'soil9').name('경암층').onChange(
function (value) {
showSoilLayer(9, value);
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
loadPipeline();
loadgangnam();
createCube3DLayer();
var eye_x = 127.05;
var eye_y = 37.48;
var eye_h = 500;
var look_x = 127.04547670166997;
var look_y = 37.48944588385043;
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);
// 이게 해당지점
if (clippingcenter)
clippingcenter.setPosition(pt.x, pt.y, pt.z);
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);
// 이게 해당지점
if (clippingcenter)
clippingcenter.setPosition(pt.x, pt.y, pt.z);
}
}
};
makeClipbox = function ()
{
if (cmworld.clipBox.localMesh == null) {
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.rootScene.add(cmworld.clipBox.localMesh);
cmworld.clipBox.needLocalClipboxUpdate = true;
}
if (cmworld.clipBox.localClipboxEnabled == true) {
cmworld.clipBox.localClipboxEnabled = false;
$("#clipbox").text("Show Clipbox");
}
else {
if (clippingcenter) {
var pt = clippingcenter.getPosition();
cmworld.clipBox.setLocalPosition(pt.y, pt.x, pt.z);
}
else
cmworld.clipBox.setLocalPosition(37.498077610324195, 127.0274561940137, 62.15379375000016);
cmworld.clipBox.localClipboxEnabled = true;
$("#clipbox").text("Hide Clipbox");
}
}
checkAnimate = function ()
{
if (animatepass == undefined)
{
var pathpoints = [];
/*
pathpoints.push(new THREE.Vector3(127.0274561940137, 37.498077610324195, 62.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);
}
}
gotoGangnam = function ()
{
//cmworld.gotoGeo(127.02752182989633, 37.4980306546615, 10000);
cmworld.gotoLookAt(127.02, 37.49, 1000, 127.02752182989633, 37.4980306546615, 10);
}
var clrs = [];
clrs[1] = 0x6fBF44;
clrs[2] = 0x54272A;
clrs[3] = 0x578700;
clrs[7] = 0xB97536;
clrs[8] = 0xBF9C86;
clrs[9] = 0x6C5E5B;
showSoilLayer = function (id, bVisible) {
if (bVisible == true) {
if (undergroundCubeLayer.pointColors[id] == null)
undergroundCubeLayer.pointColors[id] = new THREE.Color(clrs[id]);
}
else {
if (undergroundCubeLayer.pointColors[id] != null) delete undergroundCubeLayer.pointColors[id];
}
undergroundTarget.reset();
//undergroundCubeLayer.
}
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<a id="clipbox" href="#" onclick="makeClipbox()" style="font-size:12px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Show Clipbox</a>
<a href="#" onclick="gotoGangnam()" style="font-size:12px;left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">강남역</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.0</a>
</body>
</html>