<!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%;
}
</style>
<script src="./Cm3WebGL/lib/jquery-3.5.1.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>
var cmworld;
var gui;
var userLayer;
var fenceObj;
var heliModel;
var heliModel2;
var runningAni = false;
var attitude = [];
var positions = [];
var curPos = -1;
var firstPersonMode = false;
var axesHelper;
var lastUpdateTime;
var prePosition;
init = function ()
{
if (userLayer == null)
{
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
}
userLayer.clear();
let eye_x = 127.451973;
let eye_y = 36.784113;
let eye_h = 1000;
let look_x = 127.451973;
let look_y = 36.794113;
let look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
let helperObj = new THREE.AxesHelper(200);
axesHelper = new CMWORLD.UserObject('axis', helperObj, new THREE.Vector3(0,0,0), null);
userLayer.add(axesHelper);
loadHeliModel();
}
fenceExample = function ()
{
$.get('data/ifas/20201210_093553_iqar_631_1.log', function (data)
{
var lines = data.split("\n");
dustdata = [];
let pt;
let vvs1 = [];
let vvs2 = [];
let preAlt = -100;
let orgGeo = new THREE.Vector3();
positions = [];
for (var i = 0; i < lines.length; i++)
//for (var i = 0; i < 100; i++)
{
var gpstoken = lines[i].split(",");
if (gpstoken.length > 24)
{
pt = new THREE.Vector3(Number(gpstoken[3]), Number(gpstoken[2]), Number(gpstoken[4]));
if (positions.length == 0)
{
orgGeo.set(pt.x, pt.y, pt.z);
}
positions.push(pt);
vvs1.push(Number(gpstoken[7]));
vvs2.push(Number(gpstoken[8]));
}
}
let att = [];
att.push({ name: "alt", values: vvs1 });
att.push({ name: "none", values: vvs2 });
let fence = CMWORLD.FenceLineFactory.Make(positions, att);
if (fence)
{
fenceObj = new CMWORLD.UserObject('fence', fence, orgGeo, null);
userLayer.add(fenceObj);
}
//createCube3DLayer();
});
$.get('data/ifas/20201210_093553_fdau_631.csv', function (data)
{
var lines = data.split("\n");
dustdata = [];
let pts = [];
let pt;
let vvs1 = [];
let vvs2 = [];
// heading 5
// roll 10
// pitch 11
attitude = [];
for (var i = 0; i < lines.length; i++)
{
var gpstoken = lines[i].split(",");
if (gpstoken.length > 24)
{
pt = new THREE.Vector3(Number(gpstoken[11]), Number(gpstoken[5]), Number(gpstoken[10]));
attitude.push(pt);
}
}
});
}
setFenceColor = function ()
{
if (fenceObj)
{
let cm = new CMWORLD.CmColorMap();
cm.addColor(0, 255, 0, 255, 0.0);
cm.addColor(255, 0, 0, 255, 200.0);
cm.addColor(0, 0, 255, 255, 600.0);
cm.addColor(255, 255, 255, 255, 1000.0);
CMWORLD.FenceLineFactory.setFenceLineColor(fenceObj.getMesh(), "alt", cm, true);
}
}
function saveAsImage()
{
var imgData, imgNode;
try
{
var strMime = "image/jpeg";
imgData = cmworld.renderer.domElement.toDataURL(strMime);
saveFile(imgData.replace(strMime, "image/octet-stream"), "test.jpg");
} catch (e)
{
console.log(e);
return;
}
}
var saveFile = function (strData, filename)
{
var link = document.createElement('a');
if (typeof link.download === 'string')
{
document.body.appendChild(link); //Firefox requires the link to be in the body
link.download = filename;
link.href = strData;
link.click();
document.body.removeChild(link); //remove the link when done
} else
{
location.replace(uri);
}
}
function loadHeliModel()
{
if (heliModel)
return;
const manager = new THREE.LoadingManager();
let mtlloader = new THREE.MTLLoader(manager);
mtlloader.setPath('./data/ifas/');
mtlloader.load('heli_03.mtl', function (materials)
{
materials.preload();
let objloader = new THREE.OBJLoader(manager);
objloader.setMaterials(materials);
objloader.setPath('./data/ifas/');
objloader.load('heli_03.obj',
function (object)
{
let gpos = new THREE.Vector3(127.451973, 36.794113, 165.341003);
object.scale.set(0.2, 0.2, 0.2);
//object.scale.set(10, 10, 10);
heliModel = new CMWORLD.UserObject('heli', object, gpos, null);
heliModel.rotate4GlobeEarth();
//heliModel.lookAt(gpos.x, gpos.y + 0.01, gpos.z);
lookAt(heliModel, gpos.x, gpos.y + 0.01, gpos.z);
//heliModel.visible = false;
userLayer.add(heliModel);
gpos.x -= 1;
let obj2 = object.clone();
obj2.scale.set(10, 10, 10);
heliModel2 = new CMWORLD.UserObject('heli2', obj2, gpos, null);
heliModel2.rotate4GlobeEarth();
//heliModel2.lookAt(gpos.x, gpos.y + 0.01, gpos.z);
lookAt(heliModel2, gpos.x, gpos.y + 0.01, gpos.z);
//heliModel.visible = false;
userLayer.add(heliModel2);
},
null,
null);
});
}
function runHeliAnimation()
{
loadHeliModel();
if (heliModel)
{
if (runningAni == false)
{
runningAni = true;
cmworld.option.worldTimer.start();
lastUpdateTime = cmworld.option.worldTimer.now();
}
else
{
runningAni = false;
}
}
}
function setPositionAndAngle(uobj, lon, lat, alt, heading, roll, pitch)
{
uobj.setPosition(lon, lat, alt);
let cpos = CMWORLD.CmMathEngine.Geo2Cartesian(lon, lat, alt + CMWORLD.cm_const.EarthRadius);
lookAt(uobj, lon, lat + 0.01, alt);
//uobj.lookAt(lon, lat + 0.01, alt);
let eu = new THREE.Euler(pitch * CMWORLD.cm_const.Deg2Rad, heading * CMWORLD.cm_const.Deg2Rad, roll* CMWORLD.cm_const.Deg2Rad, 'XYZ');
let qu = new THREE.Quaternion();
qu.setFromEuler(eu);
uobj.object.quaternion.multiply(qu);
}
function lookAt(obj, lon, lat, alt)
{
if (alt < 60000)
alt += CMWORLD.cm_const.EarthRadius;
let target = CMWORLD.CmMathEngine.Geo2Cartesian(lon, lat, alt);
let gpos = obj.getPosition();
let pos = CMWORLD.CmMathEngine.Geo2Cartesian(gpos.x, gpos.y, gpos.z + CMWORLD.cm_const.EarthRadius);
let dir = target.sub(pos);
dir.normalize();
pos = new THREE.Vector3();
pos.addVectors(dir, obj.object.position);
obj.object.lookAt(pos);
}
function gotoLookAt(prepos_x, prepos_y, prepos_z, newpos_x, newpos_y, newpos_z)
{
let cpos = cmworld.getCamera().cameraPositionGeo.clone();
let ch = cmworld.getCamera().getAltitude();
cpos.z -= CMWORLD.cm_const.EarthRadius;
let diff = new THREE.Vector3(prepos_x - newpos_x, prepos_y - newpos_y, prepos_z - newpos_z);
if (diff.x != 0 || diff.y != 0 || diff.z != 0)
{
let dirTarget = new THREE.Vector3();
let newEyeWorld = new CMWORLD.CmMathEngine.Geo2Cartesian(cpos.x, cpos.y, cpos.z + CMWORLD.cm_const.EarthRadius);
let ray = new THREE.Ray(newEyeWorld, cmworld.getCamera().mainCamera.getWorldDirection(dirTarget));
let target = new THREE.Vector3();
let sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), CMWORLD.cm_const.EarthRadius);
target = ray.intersectSphere(sphere, target);
target = CMWORLD.CmMathEngine.Cartesian2Geo(target.x, target.y, target.z);
target.z -= CMWORLD.cm_const.EarthRadius;
target.x -= diff.x;
target.y -= diff.y;
target.z -= diff.z;
let eyepos = new THREE.Vector3(cpos.x - diff.x, cpos.y - diff.y, cpos.z - diff.z);
cmworld.gotoLookAt(eyepos.x, eyepos.y, eyepos.z, target.x, target.y, target.z);
}
}
function SetFirstPersonMode()
{
firstPersonMode = !firstPersonMode;
//cmworld.setWalkingMode(firstPersonMode);
}
function onCmWorldUpdate()
{
if (runningAni == false)
{
return;
}
if (heliModel)
{
let ppos = null;
if (prePosition)
{
ppos = prePosition.clone();
}
curPos++;
if (curPos >= positions.length || curPos >= attitude.length)
curPos = 0;
setPositionAndAngle(heliModel, positions[curPos].x, positions[curPos].y, positions[curPos].z,
360-attitude[curPos].y, -attitude[curPos].z, -attitude[curPos].x);
axesHelper.setPosition(positions[curPos].x, positions[curPos].y, positions[curPos].z);
axesHelper.object.setRotationFromEuler(heliModel.object.rotation);
prePosition = positions[curPos];
if (firstPersonMode == true)
{
let gpos = new THREE.Vector3(positions[curPos].x, positions[curPos].y, positions[curPos].z + 100);
// forward vector를 얻어오자.
cmworld.getCamera().setPositionGeo(gpos.x, gpos.y, gpos.z + CMWORLD.cm_const.EarthRadius);
cmworld.getCamera().mainCamera.setRotationFromEuler(heliModel.object.rotation);
heliModel.visible = false;
}
else
{
if (ppos)
{
gotoLookAt(ppos.x, ppos.y, ppos.z, prePosition.x, prePosition.y, prePosition.z);
}
// 카메라가 객체를 쫓아감.
heliModel.visible = true;
}
}
lastUpdateTime = cmworld.option.worldTimer.now();
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworldCanvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, 10000, { toptilespan: 36 }, onCmWorldUpdate);
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
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");
//cmworld.option.showFPS(true);
cmworld.option.showUnderGround = true;
init();
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="fenceExample()" style="right: 10px; top: 20px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Flight Path</a>
<a href="#" onclick="setFenceColor()" style="right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Set Fence Color</a>
<a href="#" onclick="saveAsImage()" style="right: 10px; top: 60px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Save As Image</a>
<a href="#" onclick="runHeliAnimation()" style="right: 10px; top: 80px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Run Animation</a>
<a href="#" onclick="SetFirstPersonMode()" style="right: 10px; top: 100px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">First Person Mode</a>
</body>
</html>