<!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/cm_compile.js"></script>
<script>CMWORLD.Compile.includeCm3Library("./Cm3WebGL/")</script>
<script src="./lib/dat.gui.min.js"></script>
<script type="module">
import { Water } from './water/Water2.js';
let water;
var cmworld;
var gui;
var userLayer;
var waterPosition = [127.3, 37.52, 120];
var camPosition = [127.32405167395515, 37.55531598622405, 520];
var camLookat = [127.3, 37.52, 10];
window.onload = function () {
var canvas = document.querySelector("#cmworld3Canvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius * 2.5, { 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", 15, 15, 90, -90, -180, 180, "dat");
cmworld.gotoLookAt(camPosition[0], camPosition[1], camPosition[2], camLookat[0], camLookat[1], camLookat[2] );
initWater();
};
function initWater() {
if (!water) {
const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
water = new Water(waterGeometry, {
color: 0xffffff, // params.color,
scale: 1, // params.scale,
opacity: 0.9,
flowSpeed: 0.05, //options.flowSpeed
reflectivity: 0.5, // options.reflectivity
//clipBias: 0.5, //options.clipBias
flowDirection: new THREE.Vector2(0, 0), // params.flowX, params.flowY ),
textureWidth: 1024,
textureHeight: 1024
});
water.position.y = 1;
water.rotation.x = Math.PI * - 0.5;
userLayer = new CMWORLD.UserObjectLayer("water");
cmworld.addLayer(userLayer);
var obj1 = new CMWORLD.UserObject("water", water, new THREE.Vector3(waterPosition[0], waterPosition[1], waterPosition[2]), null);
obj1.rotate4GlobeEarth();
userLayer.add(obj1);
//GUI 추가
var params =
{
color: 0xffffff,
reflectivity: 0.5,
water_opacity: 0.9,
water_height: 120
};
gui = new dat.GUI();
var folder = gui.addFolder("홍수 시뮬레이션");
folder.addColor(params, 'color').name("물 색상").onChange(function (v){
if (!water) return;
water.material.uniforms[ 'color' ].value.set(v);
});
folder.add(params, 'reflectivity', 0, 1).name("반사율").onChange(function (v) {
if (!water) return;
water.material.uniforms[ 'reflectivity' ].value = v;
});
folder.add(params, 'water_opacity', 0.5, 1.0).name("투명도").onChange(function (v) {
if (!water) return;
water.material.uniforms[ 'opacity' ].value = v;
});
folder.add(params, 'water_height', 0, 500).name("물 높이").onChange(function (v) {
if (!userLayer.getObject('water')) return;
userLayer.getObject('water').setPosition(waterPosition[0], waterPosition[1], v);
});
folder.open();
gui.open();
}
}
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
</body>
</html>