<!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 colorindex = 0;
var userLayer;
var backimage;
var canvas;
var context;
onupdateobject = function (userObject, deltatime) {
var d = new Date();
context.clearRect(0, 0, backimage.width, backimage.height);
var text = d.getHours().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }) + " : "
+ d.getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }) + " : "
+ d.getSeconds().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
context.drawImage(backimage, 0, 0, backimage.width, backimage.height);
context.font = "36px arial bold";
context.fillStyle = "white";
context.fillText(text, 5, 40);
context.lineWidth = 1;
context.strokeStyle = "red";
context.strokeText(text, 5, 40);
userObject.updateMaterial();
}
example = function () {
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
var img = document.createElement("img");
img.onload = function (image) {
backimage = image.currentTarget;
canvas = document.createElement("canvas");
canvas.width = image.currentTarget.width;
canvas.height = image.currentTarget.height;
context = canvas.getContext("2d");
var obj = CMWORLD.UserObject.createPlane("supermodel", 127.08112527165059, 37.515042400233725, 32.68422885239124, 127.08155310743014, 37.51490774188941, 92.971704616211355, canvas, true, onupdateobject);
userLayer.add(obj);
}
img.src = './textures/a.jpg';
//
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, 5000, { 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();
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);
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
</body>
</html>