-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
163 lines (154 loc) · 8.54 KB
/
test.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<script src="./aframe/dist/aframe-v1.1.0.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="./AR-js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<!-- Component registration -->
<script>
AFRAME.registerComponent('alpha-test', {
dependencies: ['material'],
init: function () {
this.el.getObject3D('mesh').material.alphaTest = 0.5;
}
});
</script>
<a-scene embedded arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
vr-mode-ui="enabled: false;">
<a-assets>
<!-- models -->
<a-asset-item id="m-01" src="./_assets/models/04-1.glb"></a-asset-item>
<a-asset-item id="m-02" src="./_assets/models/04-2.glb"></a-asset-item>
<a-asset-item id="m-03" src="./_assets/models/04-3.glb"></a-asset-item>
<a-asset-item id="m-04" src="./_assets/models/04-4.glb"></a-asset-item>
<a-asset-item id="m-05" src="./_assets/models/04-5.glb"></a-asset-item>
<a-asset-item id="m-06" src="./_assets/models/04-6.glb"></a-asset-item>
<!-- images -->
<img id="i-01" src="./_assets/images/01.png">
<img id="i-02" src="./_assets/images/02.png">
<img id="i-03" src="./_assets/images/03.png">
<img id="i-04" src="./_assets/images/04.png">
<img id="i-05" src="./_assets/images/05.png">
<img id="i-06" src="./_assets/images/06.png">
<img id="i-07" src="./_assets/images/07.png">
<img id="i-08" src="./_assets/images/08.png">
<img id="i-09" src="./_assets/images/09.png">
<img id="i-10" src="./_assets/images/10.png">
<!-- mixins -->
<!-- Image material -->
<a-mixin id="img-material" material="shader: flat; transparent: true; opacity: 0.35;"></a-mixin>
<!-- Image animation -->
<a-mixin id="img-animation" scale="3 3 3" animation="property: object3D.rotation.z; from: -60 to: 60; dir: alternate; dur: 5000; easing: linear; loop: true;"></a-mixin>
<a-mixin id="img01" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-01;">
</a-mixin>
<a-mixin id="img02" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-02;">
</a-mixin>
<a-mixin id="img03" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-03;">
</a-mixin>
<a-mixin id="img04" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-04;">
</a-mixin>
<a-mixin id="img05" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-05;">
</a-mixin>
<a-mixin id="img06" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-06;">
</a-mixin>
<a-mixin id="img07" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-07;">
</a-mixin>
<a-mixin id="img08" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-08;">
</a-mixin>
<a-mixin id="img09" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-09;">
</a-mixin>
<a-mixin id="img10" rotation="0 0 0" geometry="primitive: plane; width: 1; height: 1" material="src: #i-10;">
</a-mixin>
<a-mixin id="ground">
<a-circle color="#566573" radius="2" rotation="-90 0 0" shadow="receive: true"></a-circle>
</a-mixin>
</a-assets>
<!-- ar markers -->
<a-marker type="barcode" value="1" size="0.15">
<a-entity gltf-model="#m-01" shadow="cast: true" position="0 0 0" scale="200 200 200"
animation="property: object3D.rotation.y; to: 360; dur: 5000; loop: true"
animation__2="property: object3D.position.x; to: .25; dir: alternate; dur: 5000; easing: easeInOutElastic; loop: true"
></a-entity>
<a-entity mixin="ground"></a-entity>
</a-marker>
<a-marker type="barcode" value="2" size="0.15">
<a-entity gltf-model="#m-02" shadow="cast: true" position="0 0 0" scale="200 200 200"
animation="property: object3D.rotation.y; to: 360; dur: 5000; loop: true"></a-entity>
<a-circle color="#566573" radius="1.5" rotation="-90 0 0" shadow="receive: true"></a-circle>
<!-- <a-entity mixin="ground"></a-entity> -->
</a-marker>
<a-marker type="barcode" value="4" size="0.15">
<a-entity gltf-model="#m-03" shadow="cast: true" position="0 0 0" scale="200 200 200"
animation="property: object3D.rotation.y; to: 360; dur: 5000; loop: true"></a-entity>
<!-- <a-circle color="#566573" radius="1.5" rotation="-90 0 0" shadow="receive: true"></a-circle> -->
<a-entity mixin="ground"></a-entity>
</a-marker>
<a-marker type="barcode" value="7" size="0.15">
<a-entity gltf-model="#m-04" shadow="cast: true" position="0 0 0" scale="200 200 200"
animation="property: object3D.rotation.y; to: 360; dur: 5000; loop: true"></a-entity>
<!-- <a-circle color="#566573" radius="1.5" rotation="-90 0 0" shadow="receive: true"></a-circle> -->
<a-entity mixin="ground"></a-entity>
</a-marker>
<a-marker type="barcode" value="8" size="0.15">
<a-entity gltf-model="#m-05" shadow="cast: true" position="0 0 0" scale="200 200 200"
animation="property: object3D.rotation.y; to: 360; dur: 5000; loop: true"></a-entity>
<!-- <a-circle color="#566573" radius="1.5" rotation="-90 0 0" shadow="receive: true"></a-circle> -->
<a-entity mixin="ground"></a-entity>
</a-marker>
<a-marker type="barcode" value="9" size="0.15">
<a-entity gltf-model="#m-06" shadow="cast: true" position="0 0 0" scale="200 200 200"
animation="property: object3D.rotation.y; to: 360; dur: 5000; loop: true"></a-entity>
<!-- <a-circle color="#566573" radius="1.5" rotation="-90 0 0" shadow="receive: true"></a-circle> -->
<a-entity mixin="ground"></a-entity>
</a-marker>
<a-entity id="image-carousel"
animation="property: object3D.rotation.y; to: 360; dur: 30000; easing: linear; loop: true;"
animation__2="property: object3D.position.y; from: -1.0; to: 1.5; dur: 5000; easeInOut: easeInOutSine; dir: alternate; loop: true;">
<a-entity rotation="0 0 0">
<a-entity mixin="img01 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 36 0">
<a-entity mixin="img02 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 72 0">
<a-entity mixin="img03 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 108 0">
<a-entity mixin="img04 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 144 0">
<a-entity mixin="img05 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 180 0">
<a-entity mixin="img06 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 216 0">
<a-entity mixin="img07 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 252 0">
<a-entity mixin="img08 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 288 0">
<a-entity mixin="img09 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
<a-entity rotation="0 324 0">
<a-entity mixin="img10 img-material img-animation" position="0 0 -10">
</a-entity>
</a-entity>
</a-entity>
<!-- Non tracked content :: review look-at="#camera" -->
<!-- animation="property: object3D.position.y; to: -5; dir: alternate; dur: 7500; easing: easeInOutSine; elasticity: 100; loop: true; repeat: indefinite" -->
<a-entity camera>
</a-entity>
</a-scene>
</body>
</html>