<!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>
var cmworld;
var userLayer;
var userObj;
var movingFlyCenterObject = false;
var flyrunningWithCamera = false;
var flyrunningWithCameraPosition = new THREE.Vector3(127.03054537064818, 37.49183071153476, 100);
var clippingcenter = null;
var flycenter = null;
var undergroundCubeLayer;
var vectorlayer;
var flyCubeLayer;
var viridis;
onupdateobject = function (userObject, deltatime) {
var pt = userObject.getPosition();
$("#txtLabel").text("좌표: (" + pt.x.toFixed(6) + ", " + pt.y.toFixed(6) + ", " + pt.z.toFixed(1) + ")");
}
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;
}
}
clearClipPlane = function ()
{
cmworld.clipBox2.clearClipPlanes();
}
ModeNormal = function ()
{
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.normal);
}
createCube3DLayer2 = function ()
{
var loader = new THREE.TextureLoader();
viridis = new loader.load('textures/cm_viridis.png',
function (texture)
{
});
//flyCubeLayer = cmworld.addCube3DLayer("underground", "http://demo.cmworld.net/cube3d/cbr/{z}/{y}/{x}/{y}_{x}_{f}.cbr", 0, 14, -100, 10000, 4194304, "rasterclip", "cbr");
flyCubeLayer = cmworld.addCube3DLayer("underground", "http://demo.cmworld.net/cube3d/cbr/{z}/{y}/{x}/{y}_{x}_{f}.cbr", 0, 15, -100, 10000, 4194304, "rasterclip", "cbr");
//flyCubeLayer.textureFilter = THREE.NearestFilter;
flyCubeLayer.textureFilter = THREE.LinearFilter;
flyCubeLayer.minRenderLevel = 10;
flyCubeLayer.maxRenderLevel = 15;
flyCubeLayer.DistinguishedFactor = 3.0;
flyCubeLayer.pointColors[1] = new THREE.Color(0x6fBF44);
flyCubeLayer.pointColors[2] = new THREE.Color(0x54272A);
flyCubeLayer.pointColors[3] = new THREE.Color(0x578700);
flyCubeLayer.pointColors[7] = new THREE.Color(0xB97536);
flyCubeLayer.pointColors[8] = new THREE.Color(0xBF9C86);
flyCubeLayer.pointColors[9] = new THREE.Color(0x6C5E5B);
//undergroundCubeLayer.pointColors[0] = new THREE.Color(0xffffff);
flyCubeLayer.pointColors[4] = new THREE.Color(0xff0000);
flyCubeLayer.pointColors[5] = new THREE.Color(0x00ff00);
flyCubeLayer.pointColors[6] = new THREE.Color(0x0000ff);
flyCubeLayer.defaultColor = new THREE.Color(0x6C5E5B);
flyCubeLayer.fillDefaultColor = true;
flyCubeLayer.renderFrame = false;
flyCubeLayer.renderOnlyFrame = false;
flyCubeLayer.tileLikeDisplay = true;
//flyCubeLayer.terrainClipType = CMWORLD.Cube3DTerrainClipType.None;
flyCubeLayer.terrainClipType = CMWORLD.Cube3DTerrainClipType.ClipOverground;
//flyCubeLayer.terrainClipType = CMWORLD.Cube3DTerrainClipType.ClipUnderground;
flyCubeLayer.colorMap = viridis;
// 사용자 객체를 만들자
var geo = new THREE.SphereGeometry(10);
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, 200);
/*
지표 = 0
하늘 = 1
바다 = -2
땅속 = 21 ~ 26
*/
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
// 여기에 transparancy 추가...
// 투명 값은 여기서 설정
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");
//canvas.onclick = mouseClick;
cmworld.option.showFPS(true);
//cmworld.setTerrainTransparancy(0.5);
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
var gg = new THREE.BoxGeometry(1, 1, 1);
createCube3DLayer2();
// 강서
/*
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);
// 이게 해당지점
if (clippingcenter)
clippingcenter.setPosition(pt.x, pt.y, pt.z);
cmworld.clipBox.setLocalPosition(pt.y, pt.x, pt.z);
}
*/
}
}
};
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;
*/
}
</script>
</head>
<body>
<canvas id="preview" width="1024" height="32 "style="background-color:white;;width:1024px; height:32px; z-index: 21000;"></canvas>
<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>
<a href="#" onclick="addClipPlane()" style="left: 10px; top: 20px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">Add Clip Plane</a>
<a href="#" onclick="clearClipPlane()" style="left: 10px; top: 40px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">Clear Clip Plane</a>
</body>
</html>