-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (97 loc) · 4.13 KB
/
index.html
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
122
123
124
<!doctype html>
<html>
<head>
<title>ENTER Mölndal</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=no"
/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta property="og:image" content="assets/enter-promo.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/nqd3uyv.css">
<!-- Uncomment to include the polyfill for webvr, does not yet seem to work reliably tho. Not needed for "magic window" style AR -->
<!-- <script src="lib/webvr-polyfill.js"></script>
<script>
window.WebVRConfig = { CARDBOARD_UI_DISABLED: true};
</script>-->
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="speaker"></div>
<div id="container"></div>
<!-- Include the threejs custom build -->
<script src="lib/three.js/three.custom.min.js"></script>
<!-- Include the Hammer.js library -->
<script src="lib/hammer.js/hammer.min.js"></script>
<!-- Include the ForgeJS library -->
<script src="lib/forge/forge.js"></script>
<!-- Include jQuery for transition effects-->
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/webrtc-adapter-latest.js"></script>
<!-- <script src="lib/artoolkit/artoolkit.min.js"></script> -->
<!-- <script src="lib/artoolkit/artoolkit.debug.js"></script>
<script src="lib/artoolkit/artoolkit.api.js"></script>
<script src="lib/artoolkit/artoolkit.three.js"></script> -->
<!-- <script src="lib/html2canvas.min.js"></script> -->
<script src="lib/util.js"></script>
<!-- <script src="lib/adapter-latest.js"></script> -->
<script language="javascript" type="text/javascript">
var viewer;
var story;
var editor = getParameterByName('editor');
loadJSON('kvarnbyn22.json', function (response) {
// Parse JSON string into object
story = JSON.parse(response);
loadPlugins(story, editor);
loadLocalizations(story);
// Creation of the FORGE.Viewer
viewer = new FORGE.Viewer("container", story);
function onEndedHandler() {
viewer.story.nextScene();
}
function onSceneLoadCompleteHandler() {
var media = viewer.story.scene.media;
var tags = viewer.story.scene.tags;
if (tags && tags.indexOf("AUTO_TRANSITION") && media.type === FORGE.MediaType.VIDEO) {
var video = media.displayObject;
video.onEnded.add(onEndedHandler);
}
}
function onReadyHandler() {
viewer.story.onSceneLoadComplete.add(onSceneLoadCompleteHandler);
}
viewer.onReady.addOnce(onReadyHandler);
});
//Transition function called by Forge when a hotspot is clicked
//@uid string is the target scene uid
var sceneTransition = function (uid) {
//Get string of the CSS transition time in seconds
var transitionTime = jQuery("#container").css('transition-duration');
console.log("Duration is", transitionTime);
//Transform this string into a number in ms
transitionTime = parseFloat(transitionTime) * 1000;
//Change the CSS state of the container
jQuery("#container").addClass("transition");
//Get camera data to manipulate according to your needs
var fov = viewer.camera.fov;
//Transform fov while transitioning
var fovZoomed = fov / 1.1;
//Keep yaw
var yaw = viewer.camera.yaw;
//Keep pitch
var pitch = viewer.camera.pitch;
//Make the camera change its settings
//Learn more at https://releases.forgejs.org/latest/doc/jsdoc/FORGE.Camera.html#lookAt
viewer.camera.lookAt(yaw, pitch, 0, fovZoomed, transitionTime, false, "linear");
//Wait the end of the transition time to display the target scene
setTimeout(function () {
viewer.story.loadScene(uid);
jQuery("#container").removeClass("transition");
}, transitionTime);
// viewer.camera.lookAt(0, 0, 0, 90, 2200, false, 'easeInOutCubic');
// viewer.story.loadScene('scene-1');
};
</script>
</body>
</html>