<!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 spotlightpath = null;
var pointlightpath = null;
var st = 0;
var stick = 0.01;
var pt = 0;
var ptick = 0.002;
function onupdateobject(userObject, deltatime) {
// Position을 원래 지점을 중심으로 좌우로 바꿔 보자.
if (spotlightpath) {
var pos = spotlightpath.getPoint(st);
userObject.setPosition( pos.x,pos.y,pos.z);
st = st + stick;
if (st > 1) {
st = 1;
stick = -0.01;
}
if (st < 0) {
st = 0;
stick = 0.01;
}
}
}
function onupdatepointlight(userObject, deltatime) {
return;
if (pointlightpath) {
var pos = pointlightpath.getPoint(pt);
userObject.position.x = pos.x;
userObject.position.y = pos.y;
userObject.position.z = pos.z;
userObject.calcWorldPosition();
pt = pt + ptick;
if (pt > 1) {
pt = 1;
ptick = -0.002;
}
if (pt < 0) {
pt = 0;
ptick = 0.002;
}
}
}
function example() {
var userLayer = cmworld.getLayer("lights");
if (userLayer == null) {
userLayer = new CMWORLD.UserObjectLayer("lights");
}
userLayer.clear();
spotlightpath = new THREE.LineCurve3(new THREE.Vector3(127.08170026885196, 37.514861672838784, 22.494735240004957),
new THREE.Vector3(127.08163544509294, 37.51402118030422, 15.358095726929605));
var points = [];
points.push(new THREE.Vector3(127.08107970146887, 37.515393126974985, 25.165089768357575));
points.push(new THREE.Vector3(127.08061488297753, 37.51430875314632, 25.150525817647576));
points.push(new THREE.Vector3(127.08272633187934, 37.513753770489274, 26.486457394436002));
points.push(new THREE.Vector3(127.0832166850677, 37.514776751089435, 25.147140047512949));
points.push(new THREE.Vector3(127.08129484376077, 37.51538427616677, 25.210114761255682));
pointlightpath = new THREE.CatmullRomCurve3(points);
cmworld.addLayer(userLayer);
cmworld.enableSunLight(true);
cmworld.setAmbientColor(0x111111);
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 3, 0, 0, 0);
var lighttarget = new THREE.Object3D();
var obj = new CMWORLD.UserObject("lighttarget", lighttarget, new THREE.Vector3(127.08304541369497, 37.515508546661586, 15.313188095577061), onupdateobject);
userLayer.add(obj);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.distance = 200;
spotLight.angle = 10;
spotLight.castShadow = true;
spotLight.shadow.darkness = 0.70;
spotLight.intensity = 2;
spotLight.angle = Math.PI / 10;
spotLight.target = lighttarget;
var obj = new CMWORLD.UserObject("spot1", spotLight, new THREE.Vector3(127.08170026885196, 37.514861672838784, 127.685133373364806), null);
userLayer.add(obj);
var step = 0.001;
var pointlight = new THREE.PointLight(0xff0000, 1, 500);
pointlight.castShadow = true;
obj = new CMWORLD.UserObject("point1", pointlight, new THREE.Vector3(127.08107970146887, 37.515393126974985, 15.165089768357575), onupdatepointlight);
userLayer.add(obj);
//var helper = new THREE.SpotLightHelper(spotLight);
//GlobalOption.scene.add(helper);
var eye_x = 127.08174188396235;
var eye_y = 37.51231017799103;
var eye_h = 200;
var look_x = 127.08174188396235;
var look_y = 37.51505310508758;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
function eveningscene() {
var layer = cmworld.getLayer("lights");
if( layer )
{
layer.clear();
var lightHeight = 0;
var lightPos = [];
lightPos.push(new THREE.Vector3(127.07813809533553, 37.51645796832846, 14.261655086651444 + lightHeight));
lightPos.push(new THREE.Vector3(127.07847984683701, 37.516434759315764, 14.219840464182198 + lightHeight));
lightPos.push(new THREE.Vector3(127.0788121003733, 37.516409631899876, 14.282249722629786 + lightHeight));
lightPos.push(new THREE.Vector3(127.07912043277196, 37.51637693197655, 14.345503480173647 + lightHeight));
lightPos.push(new THREE.Vector3(127.07941115018765, 37.51634732081462, 14.396556237712502 + lightHeight));
lightPos.push(new THREE.Vector3(127.07980166067114, 37.51630327084268, 14.576409575529397 + lightHeight));
lightPos.push(new THREE.Vector3(127.08021702286379, 37.51627283154816, 14.391848648898304 + lightHeight));
lightPos.push(new THREE.Vector3(127.08055137798868, 37.51624632276708, 14.34750865213573 + lightHeight));
lightPos.push(new THREE.Vector3(127.08088169120012, 37.51621719085038, 14.350483493879437 + lightHeight));
lightPos.push(new THREE.Vector3(127.08130839051688, 37.51618616867628, 14.377285748720169 + lightHeight));
/*
for (var i = 0; i < lightPos.length; i++) {
var pointlight = new THREE.PointLight(0xffffff, 0.5, 15);
pointlight.castShadow = true;
obj = new CMWORLD.UserObject("point" + i.toString(), pointlight, lightPos[i], null );
layer.add(obj);
}*/
for (var i = 0; i < lightPos.length; i++) {
var lighttarget = new THREE.Object3D();
var obj = new CMWORLD.UserObject("lighttarget", lighttarget, lightPos[i], null );
layer.add(obj);
var spotLight = new THREE.SpotLight(0xff00ff);
spotLight.distance = 200;
spotLight.castShadow = true;
spotLight.shadow.darkness = 0.70;
spotLight.intensity = 0.7;
spotLight.angle = Math.PI / 5;
spotLight.target = obj;
var spotPos = lightPos[i].clone();
spotPos.z += 100;
var obj = new CMWORLD.UserObject("spot1", spotLight, spotPos, null);
}
}
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { 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);
example();
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="example()" style="right: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">초기화</a>
<a href="#" onclick="eveningscene()" style="right: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">야경</a>
</body>
</html>