<!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 flyrunning = false;
var runningtime = 0;
var flyrunningtime = 0;
var buildingEnabled = true;
var flycenter = null;
var undergroundCubeLayer;
var vectorlayer;
var flyCubeLayer;
loadApplicationModel = function(url, ID)
{
if (flyCubeLayer)
{
var loader = new THREE.TDSLoader();
loader.load(url, function (object)
{
flyCubeLayer.addApplicationMesh(ID, object, true);
});
}
}
createCube3DLayer2 = function ()
{
flyCubeLayer = cmworld.addCube3DLayer("fly", "http://demo.cmworld.net/cube3d/cbr_user/{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(0.1);
var material = new THREE.MeshBasicMaterial({ color: 0xcccccc });
var mesh = new THREE.Mesh(geo, material);
flycenter = new CMWORLD.UserObject("fly", mesh, new THREE.Vector3(127.02749114834126, 37.49777555301, 20), null);
userLayer.add(flycenter);
//flyCubeLayer.addTargetCamera("camera", 16, 120);
flyCubeLayer.addTargetObject("fly", flycenter, 16, 20);
/*
지표 = 0
하늘 = 1
바다 = -2
땅속 = 21 ~ 26
*/
loadApplicationModel("model/tree/tree2.3ds", 1); //가로수
loadApplicationModel("model/tree/tree3.3ds", 2);
loadApplicationModel("model/tree/streetLamp.3ds", 3); //가로등
loadApplicationModel("model/tree/treeLittle2.3ds", 4); //공원 나무
loadApplicationModel("model/tree/bench.3ds", 5); //공원 벤치
loadApplicationModel("model/tree/treeLittle.3ds", 6); //공원 나무2
loadApplicationModel("model/tree/fountain.3ds", 7); // 분수
loadApplicationModel("model/tree/yazaa.3ds", 8); //야자나무
loadApplicationModel("model/tree/flower.3ds", 9); //꽃
loadApplicationModel("model/tree/treeLittle2.3ds", 10); //가장자리 나무
loadApplicationModel("model/helycopter/uh60.3ds", 11); //헬기
loadApplicationModel("model/fire/amb02.3ds", 12); //구급차
loadApplicationModel("model/fire/fir01.3ds", 13); //소방차1
loadApplicationModel("model/fire/com.3ds", 14); //소방차2
loadApplicationModel("model/facility/antennas.3ds", 15); //안테나
loadApplicationModel("model/facility/tv2.3ds", 16); //전광판
loadApplicationModel("model/car/CAMARO.3ds", 17); //자동차1
loadApplicationModel("model/car/FordTransit.3ds", 18); //자동차2
loadApplicationModel("model/car/car3.3ds", 19); //자동차3
}
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.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");
// Opacity를 위한 User Interface 용
var params =
{
terrain: true,
building: true,
frame: true,
clipIntersection: cmworld.clipBox.clipIntersection,
opacity: 1.0,
animatefly: flyrunning
};
gui = new dat.GUI();
var folder = gui.addFolder("Layer Setting");
folder.add(params, 'building').onChange(
function (v)
{
buildingEnabled = v;
var layer = cmworld.getLayer("facility_build");
if (layer != null)
{
layer.visible = v;
}
});
folder.add(params, 'frame').name('frame').onChange(
function (value) {
flyCubeLayer.renderFrame = value;
});
var folder3 = gui.addFolder("vector Cube Setting");
folder3.add(params, 'animatefly').name('fly obj').onChange(
function (value)
{
flyrunning = value;
checkFly();
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
createCube3DLayer2();
cmworld.gotoLookAt(127.02985699102842, 37.49327260338736, 6378166, 127.02913489835643, 37.49499387684867, 6378137);
cmworld.preUpdateEvent.addEventListener(preUpdate);
function preUpdate(params, owner)
{
if (!flycenter) return;
//if (flyrunning == true) {
// flyrunningtime += 0.0005;
// if (flyrunningtime > 1.0)
// flyrunningtime = 0.0;
// cpt = flypass.getPoint(flyrunningtime);
// // 이게 해당지점
// if (flycenter) {
// var pt = cmworld.getCamera().cameraPositionGeo;
// var pt2 = cpt; // cmworld.getCamera().lookAtPositionGeo;
// pt2.z += CMWORLD.cm_const.EarthRadius;
// var x = pt.x + (pt.x - pt2.x) / 5;
// var y = pt.y + (pt.y - pt2.y) / 5;
// var z = pt.z + (pt.z - pt2.z) / 5 - CMWORLD.cm_const.EarthRadius;
// //cmworld.gotoGeo(x, y, z);
// flycenter.setPosition(cpt.x, cpt.y, cpt.z);
// cmworld.gotoLookAt(x, y, z, cpt.x, cpt.y, cpt.z);
// }
//}
//else
{
var pt = cmworld.getCamera().cameraPositionGeo;
var pt2 = cmworld.getCamera().lookAtPositionGeo;
var x = pt.x - (pt.x - pt2.x) / 5;
var y = pt.y - (pt.y - pt2.y) / 5;
var z = pt.z - (pt.z - pt2.z) / 5 - CMWORLD.cm_const.EarthRadius;
flycenter.setPosition(x, y, z);
}
}
};
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)),
pathpoints.push(new THREE.Vector3(127.03008849747317, 37.49280316218923, 20));
pathpoints.push(new THREE.Vector3(127.0301085398516, 37.49274046253729, 20));
pathpoints.push(new THREE.Vector3(127.02997949671072, 37.49298445900121, 20));
pathpoints.push(new THREE.Vector3(127.0299073862157, 37.493141955217965, 20));
pathpoints.push(new THREE.Vector3(127.02982680961637, 37.49331791182277, 20));
pathpoints.push(new THREE.Vector3(127.02975668900838, 37.49348996976347, 20));
pathpoints.push(new THREE.Vector3(127.02967948360597, 37.49363961963081, 20));
pathpoints.push(new THREE.Vector3(127.02959393849702, 37.49380747987348, 20));
pathpoints.push(new THREE.Vector3(127.02952302544483, 37.494000163747955, 20));
pathpoints.push(new THREE.Vector3(127.02943188177217, 37.49418023057748, 20));
pathpoints.push(new THREE.Vector3(127.0293330384331, 37.49435816088106, 20));
pathpoints.push(new THREE.Vector3(127.02923424195012, 37.49453600676841, 20));
pathpoints.push(new THREE.Vector3(127.02914592930026, 37.49470989702294, 20));
pathpoints.push(new THREE.Vector3(127.02906807730434, 37.494879873636286, 20));
pathpoints.push(new THREE.Vector3(127.02897979513801, 37.49505369848646, 20));
pathpoints.push(new THREE.Vector3(127.0289151733355, 37.495213679776555, 20));
pathpoints.push(new THREE.Vector3(127.02888392722326, 37.495376433044406, 20));
pathpoints.push(new THREE.Vector3(127.02879216937222, 37.495576807880646, 20));
pathpoints.push(new THREE.Vector3(127.02873030241378, 37.49573080652743, 20));
pathpoints.push(new THREE.Vector3(127.02865589857254, 37.495874360907415, 20));
pathpoints.push(new THREE.Vector3(127.02857037505666, 37.496042180623164, 20));
pathpoints.push(new THREE.Vector3(127.02847926123968, 37.49622221122049, 20));
pathpoints.push(new THREE.Vector3(127.02840691720812, 37.496380171181556, 20));
pathpoints.push(new THREE.Vector3(127.02832063830428, 37.496568558921446, 20));
pathpoints.push(new THREE.Vector3(127.0282301246659, 37.49672836025173, 20));
pathpoints.push(new THREE.Vector3(127.02813823154747, 37.49692900136215, 20));
flypass = new THREE.CatmullRomCurve3(pathpoints);
}
}
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
</body>
</html>