<!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 gui;
var userLayer;
var userObj;
var animatepass;
var flypass;
var animaterunning = false;
var flyrunning = false;
var runningtime = 0;
var flyrunningtime = 0;
var movingFlyCenterObject = false;
var flyrunningWithCamera = false;
var flyrunningWithCameraPosition = new THREE.Vector3(127.03054537064818, 37.49183071153476, 100);
var terrainEnabled = true;
var buildingEnabled = true;
var subwayEnabled = true;
var pipeEnabled = true;
var clippingcenter = null;
var flycenter = null;
var undergroundCubeLayer;
var vectorlayer;
var flyCubeLayer;
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;
}
});
}
}
}
onupdateobject = function (userObject, deltatime) {
var pt = userObject.getPosition();
$("#txtLabel").text("좌표: (" + pt.x.toFixed(6) + ", " + pt.y.toFixed(6) + ", " + pt.z.toFixed(1) + ")");
}
createCube3DLayer2 = function ()
{
flyCubeLayer = cmworld.addCube3DLayer("fly", "http://demo.cmworld.net/cube3d/cbr_vector/{z}/{y}/{x}/{y}_{x}_{f}.cbr", 0, 16, -10, 10000, 4194304, "vector", "cbr");
flyCubeLayer.renderFrame = true;
flyCubeLayer.renderOnlyFrame = 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.02992490492944, 37.49314254229226, 10), onupdateobject );
userLayer.add(flycenter);
//flyCubeLayer.addTargetCamera("camera", 16, 200);
flyCubeLayer.addTargetObject("fly", flycenter, 16, 10);
/*
지표 = 0
하늘 = 1
바다 = -2
땅속 = 21 ~ 26
*/
}
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) {
flycenter.setPosition(pos.x, pos.y, pos.z);
}
}
}
}
}
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;
cmworld.option.showFPS(true);
// Opacity를 위한 User Interface 용
var params =
{
terrain: true,
building: true,
subway: true,
pipeline: true,
clipIntersection: cmworld.clipBox.clipIntersection,
animate: animaterunning,
opacity: 1.0,
animatefly: flyrunning,
animateflyWithCamera: flyrunningWithCamera,
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;
}
});
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);
});
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);
}
});
var folder3 = gui.addFolder("vector Cube Setting");
folder3.add(params, 'animatefly').name('fly obj').onChange(
function (value)
{
flyrunning = value;
if (flyrunning == true) {
var pt = flycenter.getPosition();
cmworld.gotoLookAt(127.03054537064818, 37.49183071153476, 100, pt.x, pt.y, 20);
}
checkFly();
});
folder3.add(params, 'animateflyWithCamera').name('with camera').onChange(
function (value) {
//flyrunningWithCameraPosition = cmworld.getCamera().getPositionGeo();
flyrunningWithCamera = value;
});
folder3.add(params, 'gotoPosition').name('goto position').onChange(
function (value) {
movingFlyCenterObject = value;
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
createCube3DLayer2();
var eye_x = 127.03054537064818;
var eye_y = 37.49183071153476;
var eye_h = 250;
var look_x = 127.02992490492944;
var look_y = 37.49314254229226;
var look_h = 20;
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;
var prevPt;
if (flyrunningtime > 0.001) prevPt = flypass.getPoint(flyrunningtime - 0.001);
var pt = flypass.getPoint(flyrunningtime);
// 이게 해당지점
if (flycenter) {
flycenter.setPosition(pt.x, pt.y, pt.z);
if (flyrunningWithCamera == true) {
if (prevPt) {
prevPt.sub(pt);
flyrunningWithCameraPosition.x -= prevPt.x;
flyrunningWithCameraPosition.y -= prevPt.y;
//cmworld.gotoLookAt(flyrunningWithCameraPosition.x, flyrunningWithCameraPosition.y, 60, pt.x, pt.y, 20);
cmworld.gotoGeo(pt.x, pt.y, pt.z + 300);
}
}
}
}
}
};
makeClipbox = function ()
{
var localgeo = new THREE.BoxGeometry(100, 100, 100);
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, 62.15379375000016);
cmworld.clipBox.needLocalClipboxUpdate = true;
cmworld.rootScene.add(cmworld.clipBox.localMesh);
cmworld.clipBox.localClipboxEnabled = true;
}
checkFly = function ()
{
if (flypass == undefined)
{
var pathpoints = [];
pathpoints.push(new THREE.Vector3(127.02992490492944, 37.49314254229226, 20)),
pathpoints.push(new THREE.Vector3(127.02945098278445, 37.49412820422488, 40)),
pathpoints.push(new THREE.Vector3(127.02945098278445, 37.49412820422488, 80)),
pathpoints.push(new THREE.Vector3(127.02789657061916, 37.497385165373416, 20)),
pathpoints.push(new THREE.Vector3(127.02713379383667, 37.49716289011995, 40)),
pathpoints.push(new THREE.Vector3(127.0281612963301, 37.49503707804059, 50)),
pathpoints.push(new THREE.Vector3(127.0290934000677, 37.4931661423123, 30)),
pathpoints.push(new THREE.Vector3(127.02992490492944, 37.49314254229226, 20)),
flypass = new THREE.CatmullRomCurve3(pathpoints);
}
}
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)),
animatepass = new THREE.CatmullRomCurve3(pathpoints);
}
}
</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>
</body>
</html>