/
index.html
115 lines (108 loc) · 3.9 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
<html>
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@c5c5dcf/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/diarmidmackenzie/aframe-multi-camera@latest/src/mirror.min.js"></script>
<script src="../../src/instanced-mesh.js"></script>
<script src="./spheres.js"></script>
<script src="./toggle-visible.js"></script>
<link rel="stylesheet" href="../styles.css">
</head>
<body>
<div class="text-overlay">
<p>Instanced Mesh together with the A-Frame animation component, shadows,
an environment map and mirrors.</p>
</div>
<a class="code-link"
target="_blank"
href="https://github.com/diarmidmackenzie/instanced-mesh/blob/main/examples/animated-spheres/index.html">
view code
</a>
<div style="position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
background: white;
padding: 10px;
border: black;
border-width: 1;
border-style: solid;">
<input type="checkbox" onchange="toggleCheckbox(this, 'mirror-back')" checked>
<label> Back mirror</label><br>
<input type="checkbox" onchange="toggleCheckbox(this, 'mirror-top')">
<label> Top mirror</label><br>
<input type="checkbox" onchange="toggleCheckbox(this, 'mirror-left')">
<label> Left mirror</label><br>
<input type="checkbox" onchange="toggleCheckbox(this, 'mirror-right')">
<label> Right mirror</label><br>
</div>
<a-scene background="color: #8ff" stats renderer="colorManagement:true">
<a-assets>
<a-cubemap id="env">
<img src="../../tests/assets/env-map/environment-left.png">
<img src="../../tests/assets/env-map/environment-left.png">
<img src="../../tests/assets/env-map/environment-top.png">
<img src="../../tests/assets/env-map/environment-bottom.png">
<img src="../../tests/assets/env-map/environment-back.png">
<img src="../../tests/assets/env-map/environment-back.png">
</a-cubemap>
</a-assets>
<a-entity id="rig" movement-controls>
<a-entity id="camera" camera position="0 1.6 0" look-controls>
</a-entity>
</a-entity>
<a-entity position="0 1.6 -5">
<a-sphere id="sphere-mesh"
radius="0.1"
material="envMap:#env; metalness:1.0; roughness:0.0"
instanced-mesh="capacity:36; updateMode: auto; drainColor: true"
shadow>
</a-sphere>
<a-entity spheres>
</a-entity>
<a-plane id="floor"
position="0 -2.5 0"
rotation="-90 0 0"
color="grey"
width ="8"
height="4"
shadow>
</a-plane>
<a-plane id="mirror-back"
position="0 0 -2"
width="8"
height="5"
mirror
side="back">
</a-plane>
<a-plane id="mirror-left"
position="-4 0 0"
rotation="0 90 0"
width="4"
height="5"
mirror
visible="false"
side="back">
</a-plane>
<a-plane id="mirror-right"
position="4 0 0"
rotation="0 -90 0"
width="4"
height="5"
mirror
visible="false"
side="back">
</a-plane>
<a-plane id="mirror-top"
position="0 2.5 0"
rotation=" 90 0 0"
width="8"
height="4"
mirror
visible="false"
side="back">
</a-plane>
<a-entity light="type:directional; castShadow:true" position="0 10 0"></a-entity>
</a-entity>
</a-scene>
</body>