<!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-2.2.0.min.js"></script>
<script src="./Cm3WebGL/cm_compile.js"></script>
<script>
CMWORLD.Compile.includeCm3Library("./Cm3WebGL/");
</script>
<script>
var cmworld;
var gui;
var userLayer;
var hilbertScalefactor = 0.001;
var hilbertScale = 0.1;
init = function()
{
if( userLayer == null )
{
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
}
userLayer.clear();
}
addcurve = function (name, ptlist, color) {
var earthRadius = CMWORLD.cm_const.EarthRadius;
var earthpts = [];
var origin = CMWORLD.CmMathEngine.Geo2Cartesian(ptlist[0].x, ptlist[0].y, ptlist[0].z + earthRadius)
for (var i = 0; i < ptlist.length; i++) {
var pt = CMWORLD.CmMathEngine.Geo2Cartesian(ptlist[i].x, ptlist[i].y, ptlist[i].z + earthRadius);
pt.x = pt.x - origin.x;
pt.y = pt.y - origin.y;
pt.z = pt.z - origin.z;
earthpts.push(pt);
}
var randomSpline = new THREE.CatmullRomCurve3(earthpts);
var extrudeSettings = {
steps: 200,
bevelEnabled: false,
extrudePath: randomSpline
};
var pts = [], numPts = 5;
for (var i = 0; i < numPts * 2; i++) {
var l = i % 2 == 1 ? 1 : 2;
var a = i / numPts * Math.PI;
pts.push(new THREE.Vector3(Math.cos(a) * l, Math.sin(a) * l, l ));
}
var shape = new THREE.Shape(pts);
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var material2 = new THREE.MeshLambertMaterial({ color: color, wireframe: false });
var mesh = new THREE.Mesh(geometry, material2);
var obj = new CMWORLD.UserObject(name, mesh, new THREE.Vector3(ptlist[0].x, ptlist[0].y, ptlist[0].z));
userLayer.add(obj);
}
curveExample = function () {
addcurve("1",
[
new THREE.Vector3(127.0799604911314, 37.51204520560778, 64.042545029893517),
new THREE.Vector3(127.08026907454185, 37.51246594713586, 65.387156971730292),
new THREE.Vector3(127.08055898434802, 37.51272709864432, 65.74553408101201),
new THREE.Vector3(127.08073241754926, 37.513020422907104, 65.259078756906092),
new THREE.Vector3(127.08092113666363, 37.513458060374674, 65.225857456214726),
new THREE.Vector3(127.08111568032083, 37.51374561402145, 65.417504243552685),
new THREE.Vector3(127.08122396020417, 37.51423268965022, 66.555781048722565)],
0xff8800);
addcurve("2",
[
new THREE.Vector3(127.0810681840114, 37.5119329969162, 74.144113779067993),
new THREE.Vector3(127.08128601733961, 37.512409105142886, 77.939757961779833),
new THREE.Vector3(127.0815926771561, 37.51294277881857, 75.28973682411015),
new THREE.Vector3(127.08187040020877, 37.513440928686, 75.169383552856743),
new THREE.Vector3(127.08218728582315, 37.5139410321471, 76.011962137185037)],
0x00ff88);
addcurve("3",
[
new THREE.Vector3(127.08187883524158, 37.51185418652384, 34.25681774970144),
new THREE.Vector3(127.081975834574, 37.51223854870383, 35.07149467524141),
new THREE.Vector3(127.08226027081622, 37.51254071129296, 35.254531641490757),
new THREE.Vector3(127.08250851480298, 37.51286205491893, 35.585421460680664),
new THREE.Vector3(127.0825553599883, 37.51307755185187, 35.20221547037363),
new THREE.Vector3(127.08286338436375, 37.513380592853856, 35.176088826730847),
new THREE.Vector3(127.082857030148, 37.51379360368558, 36.45603223145008)],
0x8800ff);
var eye_x = 127.08174188396235;
var eye_y = 37.51231017799103;
var eye_h = 200;
var look_x = 127.08174188396235;
var look_y = 37.51231017799103;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
hilbert3D = function (center, size, iterations, v0, v1, v2, v3, v4, v5, v6, v7) {
// Default Vars
var center = undefined !== center ? center : new THREE.Vector3(0, 0, 0),
size = undefined !== size ? size : 10,
half = size / 2,
iterations = undefined !== iterations ? iterations : 1,
v0 = undefined !== v0 ? v0 : 0,
v1 = undefined !== v1 ? v1 : 1,
v2 = undefined !== v2 ? v2 : 2,
v3 = undefined !== v3 ? v3 : 3,
v4 = undefined !== v4 ? v4 : 4,
v5 = undefined !== v5 ? v5 : 5,
v6 = undefined !== v6 ? v6 : 6,
v7 = undefined !== v7 ? v7 : 7
;
var vec_s = [
new THREE.Vector3(center.x - half, center.y + half, center.z - half),
new THREE.Vector3(center.x - half, center.y + half, center.z + half),
new THREE.Vector3(center.x - half, center.y - half, center.z + half),
new THREE.Vector3(center.x - half, center.y - half, center.z - half),
new THREE.Vector3(center.x + half, center.y - half, center.z - half),
new THREE.Vector3(center.x + half, center.y - half, center.z + half),
new THREE.Vector3(center.x + half, center.y + half, center.z + half),
new THREE.Vector3(center.x + half, center.y + half, center.z - half)
];
var vec = [
vec_s[v0],
vec_s[v1],
vec_s[v2],
vec_s[v3],
vec_s[v4],
vec_s[v5],
vec_s[v6],
vec_s[v7]
];
// Recurse iterations
if (--iterations >= 0) {
var tmp = [];
Array.prototype.push.apply(tmp, hilbert3D(vec[0], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1));
Array.prototype.push.apply(tmp, hilbert3D(vec[1], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3));
Array.prototype.push.apply(tmp, hilbert3D(vec[2], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3));
Array.prototype.push.apply(tmp, hilbert3D(vec[3], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5));
Array.prototype.push.apply(tmp, hilbert3D(vec[4], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5));
Array.prototype.push.apply(tmp, hilbert3D(vec[5], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7));
Array.prototype.push.apply(tmp, hilbert3D(vec[6], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7));
Array.prototype.push.apply(tmp, hilbert3D(vec[7], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7));
// Return recursive call
return tmp;
}
// Return complete Hilbert Curve.
return vec;
}
hilbertlinesOnupdateobject = function (userobject, deltatime) {
if (userobject) {
if (userobject.name == "1") {
userobject.object.rotateOnAxis(new THREE.Vector3(1, 0, 0), 1.0 * CMWORLD.cm_const.Deg2Rad);
}
else if (userobject.name == "2") {
hilbertScale = hilbertScale + hilbertScalefactor;
if (hilbertScale > 0.15) {
hilbertScalefactor = -0.001;
hilbertScale = 0.15;
}
if (hilbertScale < 0.05) {
hilbertScalefactor = 0.001;
hilbertScale = 0.05;
}
userobject.object.scale.set(hilbertScale, hilbertScale, hilbertScale);
}
else if (userobject.name == "3") {
}
//userobject.object.updateMatrixWorld();
}
}
hilbertlinesExample = function () {
var geometry = new THREE.Geometry(),
geometry2 = new THREE.Geometry(),
geometry3 = new THREE.Geometry(),
points = hilbert3D(new THREE.Vector3(0, 0, 0), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7),
colors = [], colors2 = [], colors3 = [];
for (i = 0; i < points.length; i++) {
geometry.vertices.push(points[i]);
colors[i] = new THREE.Color(0xffffff);
colors[i].setHSL(0.6, 1.0, Math.max(0, (200 - points[i].x) / 400) * 0.5 + 0.5);
colors2[i] = new THREE.Color(0xffffff);
colors2[i].setHSL(0.3, 1.0, Math.max(0, (200 + points[i].x) / 400) * 0.5);
colors3[i] = new THREE.Color(0xffffff);
colors3[i].setHSL(i / points.length, 1.0, 0.5);
}
geometry2.vertices = geometry3.vertices = geometry.vertices;
geometry.colors = colors;
geometry2.colors = colors2;
geometry3.colors = colors3;
// lines
material = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors });
dashmat = new THREE.LineDashedMaterial({ color: 0xffaa00, dashSize: 30, gapSize: 50, linewidth: 0.5, scale: hilbertScale });
var d = 225;
line1 = new THREE.Line(geometry, material);
line1.scale.x = line1.scale.y = line1.scale.z = hilbertScale;
var obj1 = new CMWORLD.UserObject("1", line1, new THREE.Vector3(126.924, 37.5219, 100), hilbertlinesOnupdateobject);
userLayer.add(obj1);
line2 = new THREE.Line(geometry2, material);
line2.scale.x = line2.scale.y = line2.scale.z = hilbertScale;
var obj2 = new CMWORLD.UserObject("2", line2, new THREE.Vector3(126.925, 37.5219, 100), hilbertlinesOnupdateobject);
userLayer.add(obj2);
line3 = new THREE.Line(geometry3, dashmat);
line3.scale.x = line3.scale.y = line3.scale.z = hilbertScale;
var obj3 = new CMWORLD.UserObject("3", line3, new THREE.Vector3(126.926, 37.5219, 100), hilbertlinesOnupdateobject);
userLayer.add(obj3);
var eye_x = 126.925;
var eye_y = 37.5219;
var eye_h = 1000;
var look_x = 126.928;
var look_y = 37.5219;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, 10000, { toptilespan: 36 });
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);
init();
curveExample();
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="curveExample()" style="right: 10px; top: 20px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">curve</a>
<a href="#" onclick="hilbertlinesExample()" style="right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">hilbertlines</a>
</body>
</html>