Webgl

C:\Users\Dini\Downloads\webgl.
php
Wednesday, September 30, 2015 8:35 AM
<?php
session_start();
// Create connection
$con=mysqli_connect("localhost","root","","peta_kampus");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ruang where nama_ruang = ' $_GET[kode_ruang]'") or die
(mysql_error()) ;
if (mysqli_num_rows($result) == 0){
?> <script language="JavaScript"> alert("Ruang Tidak Ada dalam Database" );
window.location.href="../index.php";
</script>
<?php }
while($row = mysqli_fetch_array($result))
{
$nama_ruang = $row['nama_ruang'];
$posisi_x = $row['posisi_x'];
$posisi_z = $row['posisi_z'];
$posisi_y = $row['posisi_y'];
$kampus_lab = (int)str_replace('GD','',$row['id_gedung']);
$res = mysqli_query($con,"SELECT nama_lantai FROM lantai where id_lantai = ' $row
[id_lantai]'") or die(mysql_error()) ;
$res = mysqli_fetch_array($res);
$lantai_lab = (int)str_replace('Lantai','',$res['nama_lantai']);
}
$kode = $_GET["kode_ruang"];
//echo substr($kode,-4,1)."<br>";
$kampus = substr($kode,0,1);
$lantai = substr($kode,1,1);
$ruang = str_replace('B','',substr($kode,2,3));
if(strtoupper($kampus) == 'L'){
$kampus = $kampus_lab;
if($kampus == 3)
$kampus++;
}
if(strtoupper($lantai) == 'A'){
$lantai = $lantai_lab;
}
-1-
C:\Users\Dini\Downloads\webgl.php
$sql = mysqli_query($con,"SELECT * FROM `ruang` WHERE nama_ruang = ' $kode'");

$row = mysqli_fetch_array($sql);
$_SESSION['kampus'] = $row['id_gedung'];
$_SESSION['lantai'] = $row['id_lantai'];
$_SESSION['ruang'] = $row['id_ruang'];
$_SESSION['kode'] = $kode;
//print($kode);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<link rel="stylesheet" type="text/css" href="../css/style_3d.css">
<body>
<div class="wrap">
<center>
<div class="header">
Virtual 3D Peta Kampus
</div>
<div class="content">
<div id="left">
<div id="info" style=" font-size: 11pt; position:relative; color: #003bb3" >
<?php
echo
echo
echo
echo
"Kode
"Kode
"Kode
"Kode
Ruang yang dicari : ";echo $kode ."<br>";

Kampus : "; echo $kampus."<br>";
Lantai : "; echo $lantai."<br>";
Ruang : "; echo $ruang."<br>";
?>
</div>
<div id="petunjuk" style=" font-size: 11pt; position:relative; " >
Petunjuk Penggunaan : <br>
<img src="../img/arah.png" width="75" height="75"><br>
Ikuti simbol petunjuk seperti gambar di atas untuk menelusuri ruangan yang
dicari.
<br>Kemudian arahkan mouse atau pointer <br>
Gunakan shorcut w, a, s, d untuk menggerakan posisi <br>
w = untuk ke depan <br>
a = untuk ke kiri <br>
d = untuk ke kanan <br>
s = untuk ke belakang <br>
</div>
</div>
<div id="tengah">
<div align="center">
<canvas id="3darea" width="690" height="480" style=
"background-color:#000000">
</canvas>
<div style="display:block; color:#ffffff; padding:5px; position:absolute;
-2-
left:350px; top:535px; font-size: 9pt;

background-color:#000000; height:50px; width:300px; border-radius:5px;
border:1px solid #777777; opacity:0.5;" id="helptext">
Silahkan gunakan shortcut w,a,s,d pada keyboard anda untuk menggerakkan
posisi pada virtual 3D Kampus UNIKOM
</div>
<div style="display:block; color: #111111; padding:5px; position:absolute;
left:830px; top:135px; font-size: 9pt;
height:20px; width:180px; border-radius:5px;
border:1px solid #111111; opacity:0.5;" id="inforuang">
<b>Pencarian Ruangan : <?php echo $kode ?></b>
</div>
</div>
</div>
<div id="right">Gambaran Lantai Kampus UNIKOM
<div id="pos"> </div>
<div id="sketch" style="width:220px;height:225px;background:url(map/lt1.jpg)" >
<canvas id="paint"></canvas>
</div>
<div id="ketdrawdot" style="font-size: 9pt; text-align: justify" >
Keterangan : <br>
<img src="map/Ket_lain/drawdot_merah.png" height="20px" width="20"> :
Posisi Anda
<br>
<img src="map/Ket_lain/drawdot_hijau.png" height="20px" width="20"> :
Posisi Ruangan yang dicari
</div>
<div id="detek" style="font-size: 9pt; text-align: justify" >
<?php //echo $posisi_y;?>
Posisi anda : <br>
Kampus : <span id="kampus_sekarang"></span><br>
Lantai : <span id="lantai_sekarang"></span><br>
</div>
<div id="pos_cam" style="font-size: 9pt; text-align: justify" > </div>
</div>
</div>
<div class="footer"></div>
</center>
</div>
<script src="Testing/build/three.min.js"></script>
<script src=Testing/stats.min.js></script>
<script type="text/javascript" src="copperlichtdata/copperlicht.js" ></script>
<script type="text/javascript">
canvasElem = '#paint';
sketchElem = '#sketch';
canvas = document.querySelector(canvasElem);
context = this.canvas.getContext('2d');
sketch = document.querySelector(sketchElem);
sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue ('width'));
-3-
canvas.height = parseInt(sketch_style.getPropertyValue ('height'));

context.lineWidth = 1;
context.lineJoin = 'round';
context.lineCap = 'square';
var engine = startCopperLichtFromFile('3darea', 'copperlichtdata/webgl.ccbjs' );

var cubeSceneNode = null;
// this is called when loading the 3d scene has finished
engine.OnLoadingComplete = function()
{
var scene = engine.getScene();
if (scene)
{
// find the cube scene node
cubeSceneNode = scene.getSceneNodeFromName('coba');
// also, force the 3d engine to update the scene every frame
scene.setRedrawMode(CL3D.Scene.REDRAW_EVERY_FRAME );
var kode_kampus = <?php echo $kampus ?>;

var kode_lantai = <?php echo $lantai ?>;
//alert("Anda sedang mencari Ruangan : '");
alert("Anda sedang berada di depan Front Office Kampus Unikom, Tekan Enter untuk
melanjutkan");
//alert(kode_kampus);
var x;
var y;
var z;
var before = false;
//fungsi-fungsi
function detek(){
setInterval(function(){
var s = ccbGetSceneNodeFromName("Camera1");
var position = ccbGetSceneNodeProperty(s, "Position");
position = position.toString();
position = position.replace('(','').replace(')','');
var pos = position.split(',');
x = parseFloat(pos[0]);
y = parseFloat(pos[1]);
z = parseFloat(pos[2]);
//alert(z);
detek_kampus5();
detek_kampus4();
detek_kampus2();
detek_lorong();
-4-
//document.getElementById('pos').innerHTML = 'x='+x+'<br>y='+y+'<br>z='+z;
//document.getElementById('pos_cam').innerHTML = y;
document.getElementById('lantai_sekarang').innerHTML = (lantaiSekarang+
adjustLantai);
document.getElementById('kampus_sekarang').innerHTML = (kampusSekarang);
getLantai();
context.clearRect(0, 0, canvas.width, canvas.height);
drawDot(220-((z+495)/4.95),210-((x+495)/4.95), '#F00');
drawDot(220-((<?php echo $posisi_z;?>+495)/4.95),210-((<?php echo $posisi_x;
?>+495)/4.95), '#0F0');
},100);
}
lantaiAktif = 'lt1';
var kampusSekarang = 1;
var lantaiSekarang = 1;
var adjustLantai = -2;
function getLantai(){
if((y > 65) && (y < 75 )){
lantai = 'bs2';
lantaiSekarang = 1;
}else if((y > 90) && (y < 100 )){
lantai = 'bs1';
lantaiSekarang = 2;
} else if((y > 125) && (y < 135 )){
lantai = 'lt1';
lantaiSekarang = 3;
} else if((y > 160) && (y < 180 )){
lantai = 'lt2';
lantaiSekarang = 4;
} else if((y > 204) && (y < 236 )){
lantai = 'lt3';
lantaiSekarang = 5;
}
else{
}
if(lantaiAktif != lantai){
changeMap(lantai);
lantaiAktif = lantai;
}
}
function detek_kampus5(){
if ((z < -332.232758) && (z > -377.827759) && (x < 100) && (x > 60)
100.533592 ) && (y > 90.533592)){
before = true;
}
-5-
&& (y <
if ((z < -332.232758) && (z > -377.827759) && (x < 180) && (x > 100) && (y <
100.533592 ) && (y > 90.533592) && (before == true)){
before = false;
var a = ccbGetSceneNodeFromName("2DOverlay2");
ccbSetSceneNodeProperty(a, "Visible", true);
ccbSetSceneNodeProperty(a, "Text", "Anda berada di Area Kampus 5" );
setTimeout(function(){
var b = ccbGetSceneNodeFromName("2DOverlay2");
ccbSetSceneNodeProperty(b, "Visible", false);
},3000);
adjustLantai = 0;
kampusSekarang = 5;
}
if ((z < -286.240875) && (z > -329.975769) && (x < 200 ) && (x > 120) && (y <
210 ) && (y > 200)){
before = true;
}
if ((z < -286.240875) && (z > -329.975769) && (x < 244.580338 ) && (x >
227.525665) && (y < 210 ) && (y > 200) && (before == true)){
ccbSetSceneNodeProperty(a, "Text", "Anda berada di area Kampus 5" );
},3000);
adjustLantai = 0;
kampusSekarang = 5;
}
}
if ((z < 182.55249) && (z > 156.874222) && (x < -105.986763 ) && (x > 135.986763) && (y < 135.533592 ) && (y > 125.533592)){
before = true;
}
if ((z < 182.55249) && (z > 156.874222) && (x < -68.060539 ) && (x > -105.986763
) && (y < 135.533592 ) && (y > 125.533592) && (before == true)){
before = false;
},3000);
adjustLantai = 1;
kampusSekarang = 4;
-6-
}
if ((z < 160) && (z > -120) && (x < 18 ) && (x > -100) && (y < 100.533592 ) &&
(y > 90.533592)){
before = true;
}
if ((z < 61.152962) && (z > -3.686376) && (x < 57.884365 ) && (x > 19.429884)
&& (y < 100.533592 ) && (y > 90.533592) && (before == true)){
before = false;
},3000);
adjustLantai = 1;
kampusSekarang = 4;
}
}
if ((z < 477.195984) && (z > 446.764862) && (x < -432.142914 ) && (x > 460.029297) && (c == false)){
c = true;
},3000);
adjustLantai = -2;
kampusSekarang = 2;
}
else {
c = false;
}
}
function detek_lorong(){
if ((z < -124.787224) && (z > -219.825974) && (x < -359.738525 ) && (x > 398.219482) && (c == false)){
c = true;
ccbSetSceneNodeProperty(a, "Text", "Anda sedang berada di area Lorong
Unikom. " +
" Silahkan tetap ikuti petunjuk arah untuk menemukan ruangan" );
-7-
},5000);
}
else {
c = false;
}
}
//fungsi akhir
var w = ccbGetSceneNodeFromName("2DOverlay1");
ccbSetSceneNodeProperty(w, "Visible", false);
},3000);
var c = false;
//panggil fungsi-fungsi
detek();
//detek_kampus();
//alert("<?php echo $kode; ?>");

//!!!!! rute kampus 1
if(kode_kampus == 1 )
{
var k1_01 = ccbGetSceneNodeFromName("k1_01");
ccbSetSceneNodeProperty(k1_01, "Visible",true);
}
else if(kode_kampus == 2 )
{
if (kode_lantai == 3){
-8-

}
else if(kode_lantai == 4){
}
else if(kode_lantai == 5 ){
}
else{
alert("Maaf Terjadi Kesalahan ");
}
}
{
ccbSetSceneNodeProperty(k4_1, "Visible", true);
if (kode_lantai == 2){
}
-9-

}
//var k4_6 = ccbGetSceneNodeFromName("k4_6");
//ccbSetSceneNodeProperty(k4_6, "Visible", true);
//var k43_7 = ccbGetSceneNodeFromName("k4_7");
//ccbSetSceneNodeProperty(k43_7, "Visible",true);
}
}
}
-10-

}
else{
alert("Tetot");
}
}
{
if(kode_lantai == 2){
}
else if (kode_lantai == 3 ){
var camera = ccbGetSceneNodeFromName("bs1121117");
ccbSetSceneNodeProperty(camera, "Visible", true);
}
-11-

}
}
}
else {
alert("");
}
}
-12-
else{
alert("Maaf Tidak Ada Ruangan");
}
}
}
document.onkeydown = function(event)
{
var key = String.fromCharCode(event.keyCode);
// when pressed 'L', move the cube scene node a bit up
if (key == 'M' && cubeSceneNode)
cubeSceneNode.Pos.Y += 5;
// when pressed 'G', move the cube scene node a bit down
if (key == 'N' && cubeSceneNode)
cubeSceneNode.Pos.Y -= 5;
// we need to call the key handler of the 3d engine as well, so that the user is
// able to move the camera using the keys
engine.handleKeyDown(event);
};
function drawDot(x, y, color){

radius = 5;
context.beginPath();
context.strokeStyle = color;
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
context.stroke();
}
function changeMap(lantai){
switch (lantai){
case 'lt5' : document.getElementById('sketch').style.background
;break;
;break;
;break;
;break;
;break;
case 'bs1' : document.getElementById('sketch').style.background
;break;
case 'bs2' : document.getElementById('sketch').style.background
-13-
= 'url(map/lt5.jpg)'
= 'url(map/bs1.jpg)'
= 'url(map/bs2.jpg)'
;break;
}
}
</script>
<br/>
<div align="center">
</div>
</body>
</html>
-14-

Webgl

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Webgl

Hochgeladen von

Copyright:

Verfügbare Formate

C:\Users\Dini\Downloads\webgl.

Wednesday, September 30, 2015 8:35 AM

Wednesday, September 30, 2015 8:35 AM

$sql = mysqli_query($con,"SELECT * FROM `ruang` WHERE nama_ruang = ' $kode'");

Ruang yang dicari : ";echo $kode ."<br>";

Wednesday, September 30, 2015 8:35 AM

left:350px; top:535px; font-size: 9pt;

Wednesday, September 30, 2015 8:35 AM

canvas.height = parseInt(sketch_style.getPropertyValue ('height'));

var engine = startCopperLichtFromFile('3darea', 'copperlichtdata/webgl.ccbjs' );

var kode_kampus = <?php echo $kampus ?>;

Wednesday, September 30, 2015 8:35 AM

Wednesday, September 30, 2015 8:35 AM

Wednesday, September 30, 2015 8:35 AM

Wednesday, September 30, 2015 8:35 AM

//alert("<?php echo $kode; ?>");

Wednesday, September 30, 2015 8:35 AM

var k2_6 = ccbGetSceneNodeFromName("k2_6");

Wednesday, September 30, 2015 8:35 AM

ccbSetSceneNodeProperty(k4_6, "Visible", true);

Wednesday, September 30, 2015 8:35 AM

var k44_8 = ccbGetSceneNodeFromName("k4_16");

Wednesday, September 30, 2015 8:35 AM

ccbSetSceneNodeProperty(k5_13, "Visible", true);

Wednesday, September 30, 2015 8:35 AM

function drawDot(x, y, color){

Wednesday, September 30, 2015 8:35 AM

Das könnte Ihnen auch gefallen