<!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;
}
#cmworldCanvas {
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="./Cm3WebGL/lib/loaders/MTLLoader.js"></script>
<script src="./Cm3WebGL/lib/loaders/OBJLoader.js"></script>
<script src="./Cm3WebGL/lib/loaders/PCDLoader.js"></script>
<script src="./lib/dat.gui.min.js"></script>
<script>
var cmworld;
var gui;
var userLayer;
var canvasLeft;
var canvasTop;
var modelObj;
var cityHallObj;
var Vegetation01Obj;
var Vegetation02Obj;
var TreeObj;
var PowerLineObj;
var PowerTowerObj;
var terrainEnabled = true;
var buildingEnabled = true;
var pickUndergroundMode = 0;
var groundObj;
makeCrossSection = function (editingPointList)
{
let bufferDist = 100;
let ept = [];
if (CMWORLD.CmMathEngine.IsClockwise(editingPointList) == true)
{
// 포인트 목록을 뒤집어야 한다.
for (var i = editingPointList.length - 1; i >= 0; i--)
{
ept.push(new THREE.Vector3(editingPointList[i].x, editingPointList[i].y, editingPointList[i].z));
}
}
else
{
for (var i = 0; i < editingPointList.length; i++)
{
ept.push(new THREE.Vector3(editingPointList[i].x, editingPointList[i].y, editingPointList[i].z));
}
}
if (editingPointList[editingPointList.length - 1].x != editingPointList[0].x ||
editingPointList[editingPointList.length - 1].y != editingPointList[0].y)
{
ept.push(new THREE.Vector3(editingPointList[0].x, editingPointList[0].y, editingPointList[0].z));
}
//let mesh = crossSectionMaker.makeCrossSectionImage(eptTM, desttr, './data/kigam/seoul/', 500, 0.5, 5, -10, 500);
let meshlist = cmworld.clipBox.makePlaneGeometryFromPointList(ept, 0, 100);
// 기존 거는 지워야 한다.
cmworld.clipBox.clearLocalClipbox();
meshlist.name = "clipLocalMesh";
cmworld.clipBox.clipIntersection = false;
//meshlist.visible = false;
cmworld.clipBox.localMesh = meshlist;
cmworld.clipBox.setLocalPosition(editingPointList[0].y, editingPointList[0].x, -10);
cmworld.clipBox.localMeshisWorldObject = true;
cmworld.clipBox.hideLocalMesh = false;
cmworld.clipBox.needLocalClipboxUpdate = true;
cmworld.clipBox.localClipboxEnabled = true;
}
makeClipPlane = function ()
{
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawPolygon);
cmworld.mouse.userDrawHandler.displayMeasureText = false;
cmworld.mouse.userDrawHandler.callbackEndEditing = function (editingPointList, currObjectType)
{
if (CMWORLD.GisObjectType.polygon == currObjectType)
{
// editingPointList에 목록이 담겨 온다.
// 최상위 놈이와 최하위 높이를 고려해야 한다.
if (editingPointList.length < 3)
{
return;
}
makeCrossSection(editingPointList);
setClipState(modelObj, true);
}
cmworld.mouse.userDrawHandler.clear();
cmworld.measureLayer.clear();
cmworld.reDrawOverlayMap();
// 취소
return false;
//return true;
}
}
clearClipPlane = function ()
{
cmworld.clipBox.clearLocalClipbox();
}
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;
}
});
}
}
}
mouseClick = function (event)
{
if (event)
{
if (pickUndergroundMode == 1)
{
pickUndergroundMode = 0;
if (cmworld)
{
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
//var p = ctx.getImageData(mousePos.x, mousePos.y, 1, 1).data;
//var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
//$('#status').html(coord + "<br>" + hex);
//console.log(hex);
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.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);
}
}
}
}
}
}
}
LoadArroundCityHall = function ()
{
if (cityHallObj)
{
cityHallObj.visible = !cityHallObj.visible;
return;
}
const manager = new THREE.LoadingManager();
let mtlloader = new THREE.MTLLoader(manager);
mtlloader.setPath('http://demo.cmworld.net/lidar/data/aroundcityhall/');
mtlloader.load('CH3D.mtl', function (materials)
{
materials.preload();
let objloader = new THREE.OBJLoader(manager);
objloader.setMaterials(materials);
objloader.setPath('http://demo.cmworld.net/lidar/data/aroundcityhall/');
objloader.load('CH3D.obj',
function (object)
{
var origin = new THREE.Vector3(127.10626813312851, 36.81706021590388, 49);
cityHallObj = new CMWORLD.UserObject("cityhall", object, origin);
cityHallObj.rotate4GlobeEarth();
userLayer.add(cityHallObj);
},
null,
null);
});
}
LoadLidarMesh = function ()
{
if (modelObj)
{
modelObj.visible = !modelObj.visible;
return;
}
$.get('http://demo.cmworld.net/lidar/data/aroundcityhall_notexture/obj.csv', function (data)
{
let objinfo = [];
let lines = data.split("\n");
var objname;
var objlon;
var objlat;
var objalt;
let objlist = [];
const manager = new THREE.LoadingManager();
let objloader = new THREE.OBJLoader(manager);
objloader.setPath('http://demo.cmworld.net/lidar/data/aroundcityhall_notexture/');
let objobj;
for (let i = 0; i < lines.length; i++)
{
let objtokken = lines[i].split(",");
objname = objtokken[0];
objlon = Number(objtokken[1]);
objlat = Number(objtokken[2]);
objalt = Number(objtokken[3]);
objlist.push({ name: objname, lon: objlon, lat: objlat, alt: objalt })
}
for (let i = 0; i < objlist.length; i++)
{
objloader.load(objlist[i].name,
//objloader.load('ID_231.obj',
function (object)
{
//var origin = new THREE.Vector3(127.10445341056382, 36.815418987587947, 100);
var origin = new THREE.Vector3(objlist[i].lon, objlist[i].lat, objlist[i].alt + 10);
if (object instanceof THREE.Group)
{
for (let i = 0; i < object.children.length; i++)
{
objobj = new CMWORLD.UserObject(objlist[i].name, object.children[i], origin);
objobj.object.material.side = THREE.DoubleSide;
objobj.object.geometry.computeVertexNormals();
//modelObj.setScale(100, 100, 100);
objobj.rotate4GlobeEarth();
userLayer.add(objobj);
}
}
},
null,
null);
}
});
}
GroundLoad = function ()
{
if (groundObj)
{
groundObj.visible = !groundObj.visible;
return;
}
let loader = new CMWORLD.CmPCDBinLoader();
loader.load('http://demo.cmworld.net/lidar/data/pcd/VUX_Ground_1.bin',
function (data)
{
//var origin = CMWORLD.CmMathEngine.Geo2Cartesian(127.10445341056382, 36.815418987587947, 100);
//var origin = new THREE.Vector3(data.x127.10445341056382, 36.815418987587947, 50);
var origin = new THREE.Vector3(data.x, data.y, data.z + 10);
groundObj = new CMWORLD.UserObject('groundObj', data.mesh, origin);
////modelObj.setScale(1000, 1000, 1000);
groundObj.rotate4GlobeEarth();
userLayer.add(groundObj);
},
function (reason)
{
});
}
TreeLoad1 = function ()
{
if (Vegetation01Obj)
{
Vegetation01Obj.visible = !Vegetation01Obj.visible;
return;
}
let loader = new CMWORLD.CmPCDBinLoader();
loader.load('http://demo.cmworld.net/lidar/data/pcd/VUX_High Vegetation01_01.bin',
function (data)
{
//var origin = CMWORLD.CmMathEngine.Geo2Cartesian(127.10445341056382, 36.815418987587947, 100);
//var origin = new THREE.Vector3(data.x127.10445341056382, 36.815418987587947, 50);
var origin = new THREE.Vector3(data.x, data.y, data.z + 10);
Vegetation01Obj = new CMWORLD.UserObject('Vegertation02', data.mesh, origin);
////modelObj.setScale(1000, 1000, 1000);
Vegetation01Obj.rotate4GlobeEarth();
userLayer.add(Vegetation01Obj);
},
function (reason)
{
});
}
TreeLoad2 = function ()
{
if (Vegetation02Obj)
{
Vegetation02Obj.visible = !Vegetation02Obj.visible;
return;
}
let loader = new CMWORLD.CmPCDBinLoader();
loader.load('http://demo.cmworld.net/lidar/data/pcd/VMX_High Vegetation02_02.bin',
function (data)
{
//var origin = CMWORLD.CmMathEngine.Geo2Cartesian(127.10445341056382, 36.815418987587947, 100);
//var origin = new THREE.Vector3(data.x127.10445341056382, 36.815418987587947, 50);
var origin = new THREE.Vector3(data.x, data.y, data.z + 10);
Vegetation02Obj = new CMWORLD.UserObject('Vegetation02', data.mesh, origin);
////modelObj.setScale(1000, 1000, 1000);
Vegetation02Obj.rotate4GlobeEarth();
userLayer.add(Vegetation02Obj);
},
function (reason)
{
});
}
TreeLoad3 = function ()
{
if (TreeObj)
{
TreeObj.visible = !TreeObj.visible;
return;
}
let loader = new CMWORLD.CmPCDBinLoader();
loader.load('http://demo.cmworld.net/lidar/data/pcd/TREE_02.bin',
function (data)
{
var origin = new THREE.Vector3(data.x, data.y, data.z + 10);
TreeObj = new CMWORLD.UserObject('Tree', data.mesh, origin);
TreeObj.rotate4GlobeEarth();
userLayer.add(TreeObj);
},
function (reason)
{
});
}
PowerLoad = function ()
{
if (PowerLineObj)
{
PowerLineObj.visible = !PowerLineObj.visible;
PowerTowerObj.visible = !PowerTowerObj.visible;
return;
}
let loader = new CMWORLD.CmPCDBinLoader();
loader.load('http://demo.cmworld.net/lidar/data/pcd/Power Lines.bin',
function (data)
{
var origin = new THREE.Vector3(data.x, data.y, data.z + 10);
PowerLineObj = new CMWORLD.UserObject('PowerLine', data.mesh, origin);
PowerLineObj.rotate4GlobeEarth();
userLayer.add(PowerLineObj);
},
function (reason)
{
});
loader.load('http://demo.cmworld.net/lidar/data/pcd/PowerTower.bin',
function (data)
{
var origin = new THREE.Vector3(data.x, data.y, data.z + 10);
PowerTowerObj = new CMWORLD.UserObject('PowewTower', data.mesh, origin);
PowerTowerObj.rotate4GlobeEarth();
userLayer.add(PowerTowerObj);
},
function (reason)
{
});
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworldCanvas");
canvasLeft = canvas.offsetLeft;
canvasTop = canvas.offsetTop;
//canvas.onclick = example;
canvas.onclick = mouseClick;
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
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");
*/
var params =
{
terrain: true,
building: true,
subway: true,
pipeline: true,
clipIntersection: false, //cmworld.clipBox.clipIntersection,
opacity: 1.0,
};
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, '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);
}
});
gui.open();
var eye_x = 127.12167890688931;
var eye_y = 36.826598005467895;
var eye_h = 2000;
var look_x = 127.11167890688931;
var look_y = 36.816598005467895;
var look_h = 0;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<iframe id="mappop" frameborder="0" scrolling="yes" style="left: 0px; top: 0px; width: 512px; height: 551px; overflow: hidden; display: none; position: absolute; z-index: 10000;"></iframe>
<a href="#" onclick="makeClipPlane()" style="left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Make Clip plane</a>
<a href="#" onclick="clearClipPlane()" style="left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Clear Clip plane</a>
<a href="#" onclick="LoadLidarMesh()" style="left: 10px; top: 50px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Liadar Mesh</a>
<a href="#" onclick="LoadArroundCityHall()" style="left: 10px; top: 70px; position: absolute; z-index: 10000; color: rgb(182, 255, 0)">시청부근</a>
<a href="#" onclick="TreeLoad1()" style="left: 10px; top: 90px; position: absolute; z-index: 10000; color: rgb(182, 255, 0)">가로수1</a>
<a href="#" onclick="TreeLoad2()" style="left: 10px; top: 110px; position: absolute; z-index: 10000; color: rgb(182, 255, 0)">가로수2</a>
<a href="#" onclick="TreeLoad3()" style="left: 10px; top: 130px; position: absolute; z-index: 10000; color: rgb(182, 255, 0)">숲</a>
<a href="#" onclick="PowerLoad()" style="left: 10px; top: 150px; position: absolute; z-index: 10000; color: rgb(182, 255, 0)">송전탑</a>
<a href="#" onclick="GroundLoad()" style="left: 10px; top: 170px; position: absolute; z-index: 10000; color: rgb(182, 255, 0)">지면</a>
</body>
</html>