<!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 runningtime = 0;
var undergroundTarget = null;
var terrainEnabled = true;
var buildingEnabled = true;
var subway_uiEnabled = true;
var subway_wjEnabled = true;
var clippingcenter = null;
var movingFlyCenterObject = false;
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);
}
}
}
}
}
//의정부 127.0469089 37.7387111
//화정역 126.8328507 37.63460384
loadgangnam = function () {
var siteRootFolder = CMWORLD.Compile.getSiteRootUrl();
var onLoad3dsfinished = function (name, url, meshArray) {
if (meshArray == null) return;
var alt = 22;
for (var i = 0; i < meshArray.length; i++) {
var mesh = meshArray[i];
var lon = 127.04646; //127.0469089;
var lat = 37.73864; //37.7387111
// 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;
if (!imageName) continue;
fileurl = siteRootFolder + "/model/ui_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 });*/
var mat = new THREE.MeshLambertMaterial({ wireframe: false });
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_ui", mesh, new THREE.Vector3(lon, lat, alt), null);
userLayer.add(obj);
}
};
// 강남 좌표x
var modelresoucrFolder = "/model/ui_station/";
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "ui.3ds", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "whajungstation.3ds", siteRootFolder + modelresoucrFolder,
function (name, url, meshArray) {
if (meshArray == null) return;
var alt = -6;
for (var i = 0; i < meshArray.length; i++) {
var mesh = meshArray[i];
var lon = 126.83298; //126.83298507
var lat = 37.634585; //37.63460384;
// 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 mat = new THREE.MeshLambertMaterial({ wireframe: false }); //color: new THREE.Color(0xff0000),
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_wj", mesh, new THREE.Vector3(lon, lat, alt), null);
userLayer.add(obj);
}
}
);
}
setClipState222 = 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;
}
});
}
}
}
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/XDServer/requestLayerNode?APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9&Layer=tile_mo_HD&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "jpg", false);
cmworld.addTerrainLayer("terrain", "http://xdworld.vworld.kr:8080/XDServer/requestLayerNode?APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9&Layer=dem&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "");
cmworld.addReal3DLayer("facility_build", "http://xdworld.vworld.kr:8080/XDServer/requestLayerNode?Layer=facility_build&Level={z}&IDX={x}&IDY={y}&APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9",
"http://xdworld.vworld.kr:8080/XDServer/requestLayerObject?APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9&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,
의정부역: true,
화정역: true,
clipIntersection: cmworld.clipBox.clipIntersection,
opacity: 1.0,
gotoPosition: movingFlyCenterObject
};
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, '의정부역').onChange(
function (v)
{
subway_uiEnabled = v;
var obj = userLayer.getObject('subway_ui');
if (obj != null) {
obj.visible = v;
}
});
folder.add(params, '화정역').onChange(
function (v) {
subway_uiEnabled = v;
var obj = userLayer.getObject('subway_wj');
if (obj != null) {
obj.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);
}
});
folder2.add(params, 'gotoPosition').name('goto position').onChange(
function (value) {
movingFlyCenterObject = value;
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
loadgangnam();
//의정부 127.0469089 37.7387111
var eye_x = 127.0469089;
var eye_y = 37.7387111;
var eye_h = 300;
var look_x = 127.0469089;
var look_y = 37.7387111;
var look_h = 10;
//화정역 126.8329; //8507; lat = 37.63460384;
//var eye_x = 126.8329;
//var eye_y = 37.63460384;
//var eye_h = 100;
//var look_x = 126.8329;
//var look_y = 37.63460384;
//var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
};
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.7387111, 127.0469089, 62);
cmworld.clipBox.localClipboxEnabled = true;
$("#clipbox").text("Hide Clipbox");
}
}
checkAnimate = function ()
{
if (animatepass == undefined)
{
var pathpoints = [];
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);
}
}
gotoUI = function ()
{
//cmworld.gotoGeo(127.02752182989633, 37.4980306546615, 10000);
cmworld.gotoLookAt(127.0469089, 37.7387111, 400, 127.0469089, 37.7387111, 10);
}
gotoWJ = function () {
//cmworld.gotoGeo(127.02752182989633, 37.4980306546615, 10000);
cmworld.gotoLookAt(126.8329, 37.63460384, 400, 126.8329, 37.63460384, 10);
}
</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="gotoUI()" style="font-size:12px;left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">의정부역</a>
<a href="#" onclick="gotoWJ()" style="font-size:12px;left: 10px; top: 50px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">화정역</a>
</body>
</html>