<!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 animaterunning = false;
var runningtime = 0;
var terrainEnabled = true;
var buildingEnabled = true;
var subwayEnabled = true;
var pipeEnabled = true;
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;
}
});
}
}
}
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;
// Opacity를 위한 User Interface 용
var params =
{
terrain: true,
building: true,
subway: true,
pipeline:true,
clipIntersection: cmworld.clipBox.clipIntersection,
animate: animaterunning,
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;
});
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);
}
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
loadPipeline();
loadgangnam();
var eye_x = 127.0284353974798;
var eye_y = 37.493689215013305;
var eye_h = 196.27;
var look_x = 127.02757826432276;
var look_y = 37.49802454065084;
var look_h = 13.42819338105619;
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.001;
if (runningtime > 1.0)
runningtime = 0.0;
pt = animatepass.getPoint(runningtime);
// 이게 해당지점
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;
}
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 href="#" onclick="makeClipbox()" style="font-size:12px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Make Clipbox</a>
</body>
</html>