1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<html>
<?php
session_start();
if (!empty($_POST['linksJson'])) {
$_SESSION['linksJson'] = $_POST['linksJson'];
}
$photos = array(
array(
'id' => 'P1',
'path' => '01.jpeg',
'defaultView' => '0, 0, 5000',
),
array(
'id' => 'P2',
'path' => '02.jpg',
'defaultView' => '0, 0, 5000',
),
array(
'id' => 'P3',
'path' => 'tunnel.jpg',
'defaultView' => '0, 0, 5000',
),
);
$photos = json_decode(json_encode($photos));
if (empty($_SESSION['linksJson'])) {
$links = array(
array('id' => 'L1', 'photoId' => 'P1', 'coordinate' => '-4834.12, -870.41, -892.01', 'linkTo' => 'P2'),
array('id' => 'L2', 'photoId' => 'P1', 'coordinate' => '222.59, -639.66, 4943.64', 'linkTo' => 'P3'),
array('id' => 'L3', 'photoId' => 'P2', 'coordinate' => '-4482.21, -1278.53, -1784.01', 'linkTo' => 'P1'),
array('id' => 'L4', 'photoId' => 'P3', 'coordinate' => '1301.27, -178.89, -4813.35', 'linkTo' => 'P1'),
);
$links = json_decode(json_encode($links));
} else {
$links = json_decode($_SESSION['linksJson']);
}
unset($_SESSION['linksJson']);
unset($_POST['linksJson']);
?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstarp.css">
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div id="pcontainer"></div>
</div>
</div>
</body>
<script src="js/three.min.js"></script>
<script src="js/panolens.onsolution.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>
var viewer = new PANOLENS.Viewer({ output: 'return', controlButtons: ['fullscreen'], autoHideInfospot: false });
var panoramas = {};
var panoramaId = '<?php echo $photos[0]->id; ?>';
var infospotId = null;
function init() {
setPanoramas();
setInfospots();
}
function setPanoramas() {
<?php foreach ($photos as $photo) { ?>
panoramas['<?php echo $photo->id; ?>'] = new PANOLENS.ImagePanorama('photo/<?php echo $photo->path; ?>');
panoramas['<?php echo $photo->id; ?>'].addEventListener('leave', function () {
viewer.tweenControlCenter(new THREE.Vector3(<?php echo $photo->defaultView; ?>), 0);
});
viewer.add(panoramas['<?php echo $photo->id; ?>']);
<?php } ?>
}
function setInfospots() {
<?php foreach ($links as $link) { ?>
<?php if (empty($link->linkTo)) { ?>
var infospot = new PANOLENS.Infospot(500, PANOLENS.DataImage.info);
<?php } else { ?>
var infospot = new PANOLENS.Infospot(500, PANOLENS.DataImage.Arrow);
infospot.addEventListener('click', function () {
panoramaId = '<?php echo $link->linkTo; ?>';
viewer.setPanorama(panoramas['<?php echo $link->linkTo; ?>']);
});
<?php } ?>
infospot.position.set(<?php echo $link->coordinate; ?>);
infospot.addEventListener('hoverenter', function () {
infospotId = '<?php echo $link->id; ?>';
});
infospot.addEventListener('hoverleave', function () {
infospotId = null;
});
panoramas['<?php echo $link->photoId; ?>'].add(infospot);
<?php } ?>
}
$(function () {
init();
})
</script>
</html>
|