<!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>
var cmworld;
var gui;
var canvasLeft;
var canvasTop;
var userLayer;
var userObj;
var bottomObj;
var symbols = [];
var animatepass;
var showState;
var animaterunning = false;
var runningtime = 0;
var subwayobjs = [];
var r2path;
var r3path;
var r7path;
var r9path;
var sym2;
var sym3;
var sym7;
var sym9;
var symbolrunning = false;
var symbolruntime = 0.0;
/*
var clippoints =
[
new THREE.Vector3(127.02498352103586, 37.49538733594115, -50),
new THREE.Vector3(127.02841145565691, 37.49642081893776, -50),
new THREE.Vector3(127.02634284047056, 37.50069242254167, -50),
new THREE.Vector3(127.02283161213305, 37.4996738224609, -50),
new THREE.Vector3(127.02498352103586, 37.49538733594115, 400),
new THREE.Vector3(127.02841145565691, 37.49642081893776, 400),
new THREE.Vector3(127.02634284047056, 37.50069242254167, 400),
new THREE.Vector3(127.02283161213305, 37.4996738224609, 400),
];
*/
pickpoint = function () {
// 작동 안함
if (event) {
if (event.altKey) {
if (cmworld) {
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
var pos = cmworld.getHitCoordinate(mousePos.x, mousePos.y);
if (pos) {
var str = "(" + pos.x.toString() + ", " + pos.y.toString() + ", " + pos.z.toString() + ")";
console.log(str);
}
}
}
}
}
/*
AnimateSymbol = function () {
symbolrunning = true;
}
*/
/*
ShowCinarioClip = function () {
// 시상에서 조금 내린다.
cmworld.setClipBoxOrigin(127.02498352103586, 37.49538733594115, 10);
for (var i = 0; i < subwayobjs.length; i++) {
subwayobjs[i].clipApply = true;
}
}
*/
// 아랫것도 검사 필요
animate = function () {
var pt;
if (animaterunning == true) {
runningtime += 0.001;
if (runningtime > 1.0)
runningtime = 0.0;
pt = animatepass.getPoint(runningtime);
// 이게 해당지점
cmworld.setClipBoxOrigin(pt.x, pt.y, pt.z);
//여깃부터는 심볼
}
if (symbolrunning == true) {
symbolruntime += 0.003;
if (symbolruntime > 1.0) {
symbolruntime = 0.0;
symbolrunning = false;
return;
}
pt = r2path.getPoint(symbolruntime);
sym2.position = pt.clone();
sym2.calcWorldPosition();
pt = r3path.getPoint(symbolruntime);
sym3.position = pt.clone();
sym3.calcWorldPosition();
pt = r7path.getPoint(symbolruntime);
sym7.position = pt.clone();
sym7.calcWorldPosition();
pt = r9path.getPoint(symbolruntime);
sym9.position = pt.clone();
sym9.calcWorldPosition();
}
}
// 아래는 파이프를 그리기 위한 기능이라 필요 -> 여기는 불필요
loadPipeline = function () {
/*
//var filename = ".//model//GangnamPipe//GangnamPipe.obj";
//var mtlname = ".//model//GangnamPipe//GangnamPipe.mtl";
var filename = "./model/GangnamPipe/GangnamPipe01.obj";
var mtlname = "./model/GangnamPipe/GangnamPipe01.mtl";
var loader = new THREE.OBJLoader();
loader.load(filename, function (object) {
//var origin = new THREE.Vector3(127.0243307481833, 37.49700125656423, 150);
var origin = new THREE.Vector3(127.02433, 37.4950, -10);
var obj = new CMWORLD.UserObject("pipe", object, origin);
obj.clipApply = false;
obj.rotate4GlobeEarth();
//obj.object.rotateZ(-90 * CMWORLD.cm_const.Deg2Rad);
obj.object.rotateX(-90 * CMWORLD.cm_const.Deg2Rad);
obj.object.rotateY(-20 * CMWORLD.cm_const.Deg2Rad);
obj.object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.geometry.computeVertexNormals();
var r = Math.random() * 2;
r = Math.round(r);
if (r == 0.0) {
child.material.emissive.setHex(0x00FF00);
child.material.color.setHex(0x00FF00);
}
else if (r == 1.0) {
child.material.emissive.setHex(0x0000FF);
child.material.color.setHex(0x00FF00);
}
else {
child.material.emissive.setHex(0xFF0000);
child.material.color.setHex(0x00FF00);
}
}
});
//computeNormal(obj.object);
userLayer.add(obj);
});
*/
}
// 강남역 로드
var subwayobjs = []; //
loadgangnam = function ()
{
var siteRootFolder = CMWORLD.Compile.getSiteRootUrl();
var onLoad3dsfinished = function (name, url, meshArray)
{
if (meshArray == null)
return;
var B1Bottom = 9;
var B2Bottom = 5;
var FloorHeight = 3;
var alt = 0;
if (url != null)
{
if (url.indexOf("AF01_CL.3DS") > 0)
{
alt = 17;
}
else if (url.indexOf("AF01_FC.3DS") > 0)
{
alt = 17;
}
else if (url.indexOf("AB01_AB02.3DS") > 0)
{
// 1,2층 계단.
alt = B2Bottom;
}
else if (url.indexOf("AB01_AF01.3DS") > 0)
{
// 출입구에서 내려오는 계단.
alt = B1Bottom + 0.5;
}
else if (url.indexOf("AB01_CL.3DS") > 0)
{
alt = B1Bottom + FloorHeight;
}
else if (url.indexOf("AB01_FC.3DS") > 0)
{
alt = B1Bottom - 0.2;
}
else if (url.indexOf("AB01_FL.3DS") > 0)
{
// 출입구에서 내려오는 계단 손잡이 벽.
alt = B1Bottom - 0.4;
}
else if (url.indexOf("AB01_WL.3DS") > 0)
{
alt = B1Bottom;
}
else if (url.indexOf("AB02_CL.3DS") > 0)
{
// 천장.
alt = B2Bottom + FloorHeight;
}
else if (url.indexOf("AB02_FC.3DS") > 0)
{
// 지하철 타는곳의 자판기 소화전 같은 시설물
alt = B2Bottom;
}
else if (url.indexOf("AB02_FL.3DS") > 0)
{
// 바닥.
alt = B2Bottom;
}
else if (url.indexOf("AB02_WL.3DS") > 0)
{
// 벽
alt = B2Bottom;
}
}
for (var i = 0; i < meshArray.length; i++)
{
var mesh = meshArray[i];
var lon = 127.0278005279;
var lat = 37.4979705289;
// vworld 모델 데이터 기준으로 지구 중심축 방향으로 세웠다.
var quaternionX = new THREE.Quaternion();
var quaternionY = new THREE.Quaternion();
// 좌표의 시작이 -Z축부터 CCW 방향으로 돈다.
quaternionY.setFromAxisAngle(new THREE.Vector3(0, 1, 0), -(180 - lon) * CMWORLD.CmMathEngine.Deg2Rad);
quaternionX.setFromAxisAngle(new THREE.Vector3(1, 0, 0), -lat * CMWORLD.CmMathEngine.Deg2Rad);
var quaternion_Rotate = THREE.Quaternion.prototype.multiplyQuaternions(quaternionY, quaternionX);
mesh.quaternion.copy(quaternion_Rotate);
// material setting
{
var material = null;
var fileurl = null;
{
// 아래 코드 수상하다...
if (mesh.material.type == 'MultiMaterial')
{
// 왜 무조건 첫번째걸 변경? 다중 텍스쳐도 있을 텐데...?
material = mesh.material.materials[0];
// 작업중 170517
material.opacity = 0.25;
}
else
{
material = mesh.material;
// 작업중 170517
material.opacity = 0.25;
}
var imageName = material.imageName;
fileurl = siteRootFolder + "/model/gangnam_station/" + imageName;
var loader = new THREE.TextureLoader();
loader.setCrossOrigin("Anonymous");
var tex = loader.load(fileurl);
tex.minFilter = THREE.LinearFilter;
tex.needUpdate = true;
tex.imageName = material.imageName;
// 맨처음에는 0부터 시작이다.
//tex.level = 0;
// 가지고 있는 가장 높은 레벨을 기록한다.
// 모르면, 가장 높을것 같은 수치.
//tex.endlevel = 10;
var mat = new THREE.MeshPhongMaterial({ map: tex, specular: 0, shininess: 0 });
// to 개발팀: 이걸 조정하세요
// Station Opacity
mat.opacity = 0.25;
mat.transparent = true;
mat.needsUpdate = true;
mat.side = THREE.DoubleSide;
mesh.material = mat;
}
}
var obj = new CMWORLD.UserObject("hi", mesh, new THREE.Vector3(lon, lat, alt), null);
userLayer.add(obj);
subwayobjs.push(obj);
}
};
/* 잠실 좌표
var modelresoucrFolder = "/model/jamsil_station/";
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_AB01.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_AB02.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_AF01.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_FL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_WL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_FL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_WL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AF01_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB01_AB01.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB01_BBO2.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB01_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB01_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB01_FL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB01_WL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB02_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB02_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB02_FL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "BB02_WL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
*/
var modelresoucrFolder = "/model/";
//CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "GN1_486.3ds", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
// 강남 좌표x
var modelresoucrFolder = "/model/gangnam_station/";
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_AB02.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_AF01.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
//CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_FL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB01_WL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
//CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_FL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AB02_WL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AF01_CL.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
//CMWORLD.CmWorld3.load3DS(siteRootFolder + modelresoucrFolder + "AF01_FC.3DS", siteRootFolder + modelresoucrFolder, onLoad3dsfinished);
}
var Boreholes = null;
function addPipeShape(shape, color, x, y, z, len)
{
var extrudeSettings = { amount: -len };
// extruded shape
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: color }));
mesh.scale.set(1, 1, 1);
var cmObj1 = new CMWORLD.UserObject("pipe", mesh, new THREE.Vector3(x, y, z), null);
// cmworld 표면에 맞도록 회전.
cmObj1.rotate4GlobeEarth();
userLayer.add(cmObj1);
if (Boreholes == null)
{
Boreholes = [];
}
Boreholes.push(cmObj1);
}
ShowBorehole = function () {
if (Boreholes) {
var visible = !Boreholes[0].visible;
for (var i = 0; i < Boreholes.length; i++) {
Boreholes[i].visible = visible;
}
}
else {
var points = [];
var s = 0.01;
points.push(new THREE.Vector2(s, s));
points.push(new THREE.Vector2(s, -s));
points.push(new THREE.Vector2(-s, -s));
points.push(new THREE.Vector2(-s, s));
var box = new THREE.Shape(points);
var origin = new THREE.Vector3(127.03093, 37.5030, 50);
var range = 0.002;
var colors = [];
colors[0] = new THREE.Color(0x0000ff);
colors[1] = new THREE.Color(0xff00ff);
colors[2] = new THREE.Color(0x99ffff);
colors[3] = new THREE.Color(0x9900ff);
colors[4] = new THREE.Color(0x550ff0);
var quaternionRotation = new THREE.Quaternion();
quaternionRotation.setFromAxisAngle(new THREE.Vector3(0, 0, 1), 40 * CMWORLD.CmMathEngine.Deg2Rad);
var dist = 0.0005;
for (var lat = origin.y - range; lat < (origin.y + range) ; lat += dist)
{
for (var lon = origin.x - range; lon < origin.x + range; lon += dist)
{
var ttttt = new THREE.Vector3(lon, lat, 0);
var ttttt2 = ttttt.clone();
ttttt2.sub(origin);
ttttt2.applyQuaternion(quaternionRotation);
ttttt2.add(ttttt);
var zzz = origin.z;
for (var coun = 0; coun < 5; coun++) {
var h = (Math.random() * 100) * Math.random();
addPipeShape(box, colors[coun], ttttt2.x, ttttt2.y, zzz, h);
zzz -= h;
}
}
}
}
}
var material_CloudCircle = null;
onCloudCircleUpdate = function (userobject, deltatime) {
}
var cmObj_UnderGround = null;
ShowUnderGround = function (event)
{
if (cmObj_UnderGround)
{
cmObj_UnderGround.visible = !cmObj_UnderGround.visible;
}
else
{
var scale = 200;
var origin = new THREE.Vector3(127.0248, 37.4945, -scale + 17);
var time = performance.now() * 0.0005;
{
var geometry = new THREE.InstancedBufferGeometry();
geometry.copy(new THREE.CircleBufferGeometry(1, 6));
var particleCount = 100000;
var translateArray = new Float32Array(particleCount * 3);
var scaleArray = new Float32Array(particleCount);
var colorsArray = new Float32Array(particleCount * 3);
for (var i = 0, i3 = 0, l = particleCount; i < l; i++, i3 += 3) {
translateArray[i3 + 0] = Math.random() * 3 - 1.5;
translateArray[i3 + 1] = Math.random() * 3 - 1.5;
translateArray[i3 + 2] = Math.random() * 2 - 1;
}
geometry.addAttribute("translate", new THREE.InstancedBufferAttribute(translateArray, 3, 1));
geometry.addAttribute("scale", new THREE.InstancedBufferAttribute(scaleArray, 1, 1).setDynamic(true));
geometry.addAttribute("color", new THREE.InstancedBufferAttribute(colorsArray, 3, 1).setDynamic(true));
var depthShader = THREE.ShaderLib['depth'];
var shaderDocument = document;//.getElementById('shadercode').contentWindow.document;
var material = new THREE.RawShaderMaterial({
uniforms: {
map: { type: "t", value: new THREE.TextureLoader().load("./textures/circle.png") },
},
vertexShader: shaderDocument.getElementById('vshader').textContent,
fragmentShader: shaderDocument.getElementById('fshader').textContent,
depthTest: true,
depthWrite: true
});
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(scale, scale, scale);
material_CloudCircle = material;
var translates = geometry.getAttribute('translate');
var translatesArray = translates.array;
var scales = geometry.getAttribute('scale');
var scalesArray = scales.array;
var colors = geometry.getAttribute('color');
var colorsArray = colors.array;
var color = new THREE.Color(0xffffff);
for (var i = 0, i3 = 0, l = scalesArray.length; i < l; i++, i3 += 3) {
var x = translatesArray[i3 + 0] + time;
var y = translatesArray[i3 + 1] + time;
var z = translatesArray[i3 + 2] + time;
var scale = Math.sin(x * 0.1) + Math.sin(y * 1.2) + Math.sin(z * 5.3);
scalesArray[i] = scale + 5;
color.setHSL(scale / 5, 1, 0.5);
colorsArray[i3 + 0] = color.r;
colorsArray[i3 + 1] = color.g;
colorsArray[i3 + 2] = color.b;
}
scales.needsUpdate = true;
colors.needsUpdate = true;
cmObj_UnderGround = new CMWORLD.UserObject("cloud circles", mesh, origin.clone(), onCloudCircleUpdate);
cmObj_UnderGround.setRotate(20);
// cmworld 표면에 맞도록 회전.
cmObj_UnderGround.rotate4GlobeEarth();
userLayer.add(cmObj_UnderGround);
}
}
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
canvas.onclick = pickpoint;
var vworld_mode = true;
if (vworld_mode) {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
// 여기에 transparancy 추가...
// 투명 값은 여기서 설정
cmworld.option.terrainTransparency = true;
cmworld.option.terrainOpacity = 0.25
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.addReal3DLayer("indoor_build", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?Layer=indoor_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=indoor_build&Level={z}&IDX={x}&IDY={y}&DataFile={f}", "indoor_build", 0, 15, 90, -90, -180, 180, "dat");
*/
}
else {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius);
// 영상레이어
cmworld.addBaseImageLayer("http://cmworld.net:5050/CmWorld/CmWorldServlet?T=world_raster&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180);
// 지형레이어
cmworld.addTerrainLayer("terrain", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=dem30m&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180, "CBT");
}
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
// 여기에 transparancy 추가...
// 투명 값은 여기서 설정
cmworld.option.terrainTransparency = true;
cmworld.option.terrainOpacity = 0.25
// Pipe 처리
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
loadPipeline();
loadgangnam();
// By taixup
// Opacity를 위한 User Interface 용
var params = { terrainOpacity: 1.0, stationOpacity: 1.0 };
var terrainOpacity;
var stationOpacity;
gui = new dat.GUI();
gui.add(params, 'terrainOpacity', 0, 1).onChange
(
function ()
{
if (cmworld)
{
// 뭔가 부족
cmworld.setTerrainTransparancy(params.terrainOpacity);
}
}
);
gui.add(params, 'stationOpacity', 0, 1).onChange
(
function () {
//
for (var i = 0; i < subwayobjs.length; i++)
{
subwayobjs[i].object.material.opacity = params.stationOpacity
if (subwayobjs[i].object.material.opacity < 1.0)
subwayobjs[i].object.material.transparent = true;
else
subwayobjs[i].object.material.transparent = false;
subwayobjs[i].object.material.needsUpdate = true;
}
}
);
gui.open();
var eye_x = 127.0284353974798;
var eye_y = 37.496689215013305;
var eye_h = 196.27;
var look_x = 127.02473476897276;
var look_y = 37.49943701520611;
var look_h = 13.42819338105619;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
cmworld.preUpdateEvent.addEventListener(preUpdate);
function preUpdate( params, owner ) {
animate();
}
};
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<script id="vshader" type="x-shader/x-vertex">
precision highp float;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute vec2 uv;
attribute vec3 normal;
attribute vec3 translate;
attribute float scale;
attribute vec3 color;
varying vec2 vUv;
varying vec3 vColor;
varying float vFragDepth;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( translate, 1.0 );
mvPosition.xyz += position * scale;
vUv = uv;
vColor = color;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fshader" type="x-shader/x-fragment">
precision highp float;
uniform sampler2D map;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vec4 diffuseColor = texture2D( map, vUv );
gl_FragColor = vec4( diffuseColor.xyz * vColor, diffuseColor.w );
if ( diffuseColor.w < 0.5 ) discard;
}
</script>
</body>
</html>