forked from SLI-UNIL/Egine-VR-Experience
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (84 loc) · 5.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Égine-vr</title>
<meta name="description" content="Égine-vr — A-Frame">
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>
<script>
AFRAME.registerComponent('toggle-visibility', {
init: function () {
const targetEl = document.querySelector('#info-plane');
this.el.addEventListener('click', function () {
const isVisible = targetEl.getAttribute('visible');
targetEl.setAttribute('visible', !isVisible);
});
}
});
AFRAME.registerComponent('rotate-object', {
init: function () {
const targetEl = document.querySelector('#E11');
this.el.addEventListener('click', function () {
const currentRotation = targetEl.getAttribute('rotation');
const newRotation = {
x: (currentRotation.x + 180) % 360,
y: currentRotation.y,
z: currentRotation.z
};
targetEl.setAttribute('rotation', newRotation);
});
}
});
</script>
</head>
<body>
<a-scene>
<a-camera id="camera" position="0.488 1.6 0.4">
<a-entity
cursor="fuse: true; fuseTimeout: 2000"
position="0 0 -0.15"
geometry="primitive: ring; radiusInner: 0.0025; radiusOuter: 0.0050"
material="color: black; shader: flat"
mouse>
</a-entity>
<a-entity raycaster="objects: .clickable"></a-entity>
</a-camera>
<a-assets>
<a-obj-model id="museumRoom" src="assets/museumRoom_2.obj"></a-obj-model>
<a-obj-model id="E11" src="assets/RealityCapture_aphaia_2_13.obj"></a-obj-model>
<audio id="backgroundDrone" src="assets/backgroundnoise.wav" preload="auto" loop></audio>
<audio id="museumTalk" src="assets/quiet-museum-gallery.wav"></audio>
<audio id="audioClick" src="assets/selectsound.wav"></audio>
<a-image id="infoIcon" src="assets/InfoPng.png"></a-image>
<a-image id="moveIcon" src="assets/moveIcon.png"/></a-image>
<a-image id="museumTexture" src="assets/herringbone_parquet.jpg"></a-image>
<a-image id="statueTexture" src="assets/RealityCapture_E11_texture.jpeg"></a-image>
<a-image id="museumSky" src="assets/museumplein_8k.png"></a-image>
<a-image id ="infoPlane" src="Assets/afficheEgine.png"></a-image>
</a-assets>
<a-sky src="#museumSky" rotation="0 -130 0"></a-sky>
<a-plane id="info-plane" visible="false" position="-0.073 2.441 -2" rotation="" width="1" height="1" material="src: Assets/afficheEgine.png" geometry="width: 2.88; height: 1.622"></a-plane>
<a-entity position="0 0.85884 -1.02409" id="statue">
<a-box material="color: #fff" scale="2.67884 1 1"></a-box>
<a-box material="color: #fff" scale="2.67884 1 1" position="0 -0.03739 0.06632"></a-box>
<a-obj-model src="#E11" rotation="-86.4536 -178.2025 -6.3501" material="src: #statueTexture" position="0.283 0.25003 0.37344"></a-obj-model>
</a-entity>
<a-entity id="logo" class="clickable" geometry="primitive: plane" material="src: assets/InfoPng.png; transparent: true" position="0.812 1.01426 -0.45565" scale="0.172 0.155 1" animation__click="property: scale; startEvents: raycaster-intersected; dur: 2000; to: 0.2121 0.18535 1" sound="src: assets/selectsound.wav; on: click; refDistance: 4; rolloffFactor: 4" animation__unclick="property: scale; startEvents: raycaster-intersected-cleared; dur: 2000; to: 0.172 0.155 1" toggle-visibility="">
</a-entity>
<a-entity id="room" scale="2.47066 1 4.15664" position="-0.02901 0 15.84216">
<a-obj-model src="#museumRoom" material="side: double" position="0 0.91783 -4.23871" rotation="0 270 0" scale="0.2 0.66 0.21" obj-model=""></a-obj-model>
<a-plane position="0 0.677 -5.172" rotation="-90 0 0" width="10" height="10" material="src: #museumTexture; repeat: 5 5;"></a-plane>
</a-entity>
<a-entity id="lighting">
<a-light type="ambient" color="#4f6487"></a-light>
<a-entity light="type: spot; color: #c7c5c2; target: #statue; angle: 10; penumbra: 0.2; castShadow: true; intensity: 1.16; shadowBias: -0.03; shadowCameraFar: 500.29; shadowCameraNear: 0.35" position="-0.17672 9.65902 1.81204"></a-entity>
<a-entity light="type: spot; color: #c7c5c2; target: #statue; angle: 10; penumbra: 0.2; castShadow: true; intensity: 0.09; shadowBias: -0.03; shadowCameraFar: 500.29; shadowCameraNear: 0.35" position="2.18571 -1.43496 -2.59824" scale="1 -3.60243 1"></a-entity>
<a-entity light="type: spot; color: #c7c5c2; target: #back-wall-room; angle: 10; penumbra: 0.2; castShadow: true; intensity: 1.16; shadowBias: -0.03; shadowCameraFar: 500.29; shadowCameraNear: 0.35" position="-0.17672 14.26921 -0.69796"></a-entity>
<a-light type="ambient" color="#b5b5b5" position="0.49692 1.89276 -9.20801"></a-light>
</a-entity>
<a-entity sound="src: #museumTalk; autoplay: true; loop: true; volume: 0.75"></a-entity>
</a-scene>
</body>
</html>