-
Notifications
You must be signed in to change notification settings - Fork 0
/
frame.html
78 lines (62 loc) · 3.18 KB
/
frame.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
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script>
AFRAME.registerComponent('play-pause', {
init: function() {
var myVideo = document.querySelector('#cell');
var videoControls = document.querySelector('#videoControls');
this.el.addEventListener('click', function() {
if (myVideo.paused) {
myVideo.play();
videoControls.setAttribute('src', '#play');
}
})
}
})
</script>
</head>
<body>
<a-scene>
<a-assets>
<img id="floor" src="img/floor.jpg" alt="">
<img id="sky" src="img/sky.jpg" alt="">
<img id="brick" src="img/TexturesCom_BrickSmallNew0122_M.jpg" alt="">
<img id="doors" src="img/TexturesCom_DoorsOrnate0407_1_M.jpg" alt="">
<img id="play" src="img/play.png" alt="">
<img id="pause" src="img/pause.jpg" alt="">
<video src="The Body VR_ Journey Inside a Cell - 360 Gameplay.mp4" id="cell" loop="true"></video>
</a-assets>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
<a-video src="#cell" width="18" height="18" position="0 3 9"></a-video>
<a-image id="videoControls" src="#play" position="0 1 -2" scale="0 -3 0" scale="0.5 0.5 1" play-pause></a-image>
<a-sky src="#sky" rotation="0 64 0"></a-sky>
<!--Ground-->
<a-plane material="color: #999999;
src:#floor;
repeat:5000 5000;" rotation="-90 0 0
normal-map: #floor" scale="10000 10000 1"></a-plane>
<a-entity position="0 0 8">
<a-camera></a-camera>
</a-entity>
<!--a-box primitive-->
<a-box color="#008000" width="4" height="2" depth="0.2" position="1 3 -5" rotation="110 5 0" scale="2 1 1">
<!-- a-circle inside the a-box primitive. Like a child entity-->
<a-circle color="#f73bbf" position="2 0.7 -0.04" side="double" rotation="80 0 0"></a-circle>
</a-box>
<a-circle color="#f73bbf" side="double" position="-2 3 -5">
</a-circle>
<a-cylinder color="#301b1b" height="3" radius="2" segments-radial="6" open-ended="true" side="double" position="0 3 2" rotation="0 -90 100" scale="3 2 2"></a-cylinder>
<a-entity rotation="0 3 0" animation="property: rotation; to: 0 360 10; loop: true; dur: 10000">
<a-box position="0.5 10 10" color="red" width="4" height="6" depth="2" side="double"></a-box>
</a-entity>
<a-box color="darkgrey" width="20" height="10" depth="0.2" position="-30 3 -5" rotation="0 0 0" scale="2 1 1" side="double" src="#brick">
<a-box color="dark" width="2" height="8" depth="0.1" position="0 0 4" rotation="0 90 0" scale="2 1 1" side="double" src="#doors">
</a-box>
<a-video src="#cell" width="8" height="8" position="9 3 -9"></a-video>
<a-image id="videoControls" src="#play" position="0 1 -2" scale="0 -3 0" scale="0.5 0.5 1" play-pause></a-image>
</a-scene>
</body>
</html>