|
|
@@ -7,56 +7,138 @@
|
|
7
|
7
|
<link href="demo.css" rel="stylesheet">
|
|
8
|
8
|
<script src="../../dist/encantar.min.js"></script>
|
|
9
|
9
|
<script src="https://cdn.jsdelivr.net/npm/aframe@1.4.2/dist/aframe-v1.4.2.min.js"></script>
|
|
10
|
|
- <script src="../assets/aframe-particle-system-component.min.js"></script>
|
|
11
|
|
- <script src="demo.js"></script>
|
|
12
|
10
|
<script src="../../plugins/aframe-with-encantar.js"></script>
|
|
|
11
|
+ <script src="../../plugins/extras/aframe-scan-gimmick-for-encantar.js"></script>
|
|
|
12
|
+ <script src="../../plugins/extras/aframe-gltf-anim.js"></script>
|
|
13
|
13
|
</head>
|
|
14
|
14
|
<body>
|
|
15
|
|
- <div id="ar-viewport">
|
|
16
|
|
- <div id="ar-hud" hidden>
|
|
17
|
|
- <img id="scan" src="../assets/scan.png">
|
|
18
|
|
- <a id="about" href="NOTICE.html"></a>
|
|
19
|
|
- </div>
|
|
20
|
|
- </div>
|
|
21
|
|
- <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
|
|
22
|
|
- <video id="my-video" hidden muted loop playsinline autoplay>
|
|
23
|
|
- <source src="../assets/my-video.webm" type="video/webm" />
|
|
24
|
|
- <source src="../assets/my-video.mp4" type="video/mp4" />
|
|
25
|
|
- </video>
|
|
26
|
|
-
|
|
27
|
|
- <!-- This is a scene -->
|
|
28
|
|
- <a-scene ar-scene>
|
|
29
|
|
- <a-camera ar-camera></a-camera>
|
|
30
|
|
-
|
|
31
|
|
- <!-- Whatever you add to <ar-root> will appear in AR -->
|
|
32
|
|
- <ar-root>
|
|
33
|
|
-
|
|
34
|
|
- <!-- Ground plane -->
|
|
35
|
|
- <a-plane position="0 -0.5 -0.5" rotation="-90 0 0" width="2" height="1" color="indigo">
|
|
36
|
15
|
|
|
37
|
|
- <!-- 3D model -->
|
|
38
|
|
- <a-entity gltf-model="#my-3d-model"></a-entity>
|
|
|
16
|
+ <!-- The AR scene -->
|
|
|
17
|
+ <a-scene ar-session="stats: true; gizmos: true">
|
|
|
18
|
+
|
|
|
19
|
+ <!--
|
|
|
20
|
+ +============================+
|
|
|
21
|
+ | Let's set up an AR session |
|
|
|
22
|
+ +============================+
|
|
|
23
|
+ -->
|
|
|
24
|
+
|
|
|
25
|
+ <!-- The inputs that will feed the AR engine -->
|
|
|
26
|
+ <ar-sources>
|
|
|
27
|
+
|
|
|
28
|
+ <!-- Use a webcam -->
|
|
|
29
|
+ <!--
|
|
|
30
|
+ <ar-camera-source></ar-camera-source>
|
|
|
31
|
+ -->
|
|
|
32
|
+
|
|
|
33
|
+ <!-- Use a video element (see <a-assets>) -->
|
|
|
34
|
+ <ar-video-source video="#my-video"></ar-video-source>
|
|
|
35
|
+
|
|
|
36
|
+ </ar-sources>
|
|
|
37
|
+
|
|
|
38
|
+ <!-- The trackers we'll be using in AR -->
|
|
|
39
|
+ <ar-trackers>
|
|
|
40
|
+
|
|
|
41
|
+ <!-- We'll track images -->
|
|
|
42
|
+ <ar-image-tracker>
|
|
|
43
|
+
|
|
|
44
|
+ <!-- List the images that you intend to track
|
|
|
45
|
+ Make sure to follow the guidelines for images (see the docs) -->
|
|
|
46
|
+ <ar-reference-image name="mage" src="../assets/mage.webp"></ar-reference-image>
|
|
|
47
|
+ <ar-reference-image name="cat" src="../assets/cat.webp"></ar-reference-image>
|
|
|
48
|
+
|
|
|
49
|
+ </ar-image-tracker>
|
|
|
50
|
+
|
|
|
51
|
+ </ar-trackers>
|
|
|
52
|
+
|
|
|
53
|
+ <!-- The AR viewport -->
|
|
|
54
|
+ <ar-viewport>
|
|
|
55
|
+
|
|
|
56
|
+ <!-- A 2D overlay displayed in front of the AR scene -->
|
|
|
57
|
+ <ar-hud>
|
|
|
58
|
+
|
|
|
59
|
+ <!-- The about button -->
|
|
|
60
|
+ <a id="about" href="NOTICE.html"></a>
|
|
|
61
|
+
|
|
|
62
|
+ <!-- The scan gimmick -->
|
|
|
63
|
+ <a-entity ar-scan-gimmick="opacity: 0.75"></a-entity>
|
|
|
64
|
+
|
|
|
65
|
+ </ar-hud>
|
|
|
66
|
+
|
|
|
67
|
+ </ar-viewport>
|
|
39
|
68
|
|
|
40
|
|
- <!-- Particles -->
|
|
41
|
|
- <a-entity rotation="90 0 0">
|
|
42
|
|
- <a-entity position="0.75 0 0" particle-system="texture: ../assets/particle.png; color: #03f; opacity: 0.33; size: 20; maxAge: 0.64; velocityValue: 0 6.5 0; velocitySpread: 0 0 0; accelerationSpread: 2 0 2; particleCount: 2000"></a-entity>
|
|
43
|
|
- <a-entity position="-0.75 0 0" particle-system="texture: ../assets/particle.png; color: #f70; opacity: 0.33; size: 20; maxAge: 0.64; velocityValue: 0 6.5 0; velocitySpread: 0 0 0; accelerationSpread: 2 0 2; particleCount: 2000"></a-entity>
|
|
|
69
|
+
|
|
|
70
|
+
|
|
|
71
|
+
|
|
|
72
|
+ <!--
|
|
|
73
|
+ +=================================================+
|
|
|
74
|
+ | Now let's create the virtual elements |
|
|
|
75
|
+ | Whatever you add to <ar-root> will appear in AR |
|
|
|
76
|
+ +=================================================+
|
|
|
77
|
+ -->
|
|
|
78
|
+
|
|
|
79
|
+ <!-- A 3D camera adapted for AR -->
|
|
|
80
|
+ <ar-camera></ar-camera>
|
|
|
81
|
+
|
|
|
82
|
+ <!-- The mage-->
|
|
|
83
|
+ <ar-root reference-image="mage">
|
|
|
84
|
+
|
|
|
85
|
+ <!-- Switch from top view to front view -->
|
|
|
86
|
+ <a-entity rotation="-90 0 0" position="0 -0.5 0">
|
|
|
87
|
+
|
|
|
88
|
+ <!-- Light -->
|
|
|
89
|
+ <a-light type="ambient" intensity="1.5"></a-light>
|
|
|
90
|
+
|
|
|
91
|
+ <!-- 3D model -->
|
|
|
92
|
+ <a-entity
|
|
|
93
|
+ gltf-model="#mage-model" gltf-anim="clip: Idle"
|
|
|
94
|
+ rotation="90 0 0" scale="0.7 0.7 0.7">
|
|
44
|
95
|
</a-entity>
|
|
45
|
96
|
|
|
46
|
|
- <!-- Rotating text -->
|
|
47
|
|
- <a-entity animation="property: rotation.z; from: 0; to: 360; dur: 2000; loop: true; easing: linear">
|
|
48
|
|
- <a-text value="It works!" font="mozillavr" color="#fe3" scale="-1 -1 1" rotation="-90 0 0" position="0 0.40 1" align="center"></a-text>
|
|
49
|
|
- <a-text value="Cool!" font="mozillavr" color="#8ef" scale="1 1 1" rotation="90 0 0" position="0 -0.40 1" align="center"></a-text>
|
|
|
97
|
+ <!-- Magic circle -->
|
|
|
98
|
+ <a-plane width="4" height="4"
|
|
|
99
|
+ material="src: #magic-circle; color: #beefff; side: double; shader: flat; transparent: true; opacity: 1"
|
|
|
100
|
+ animation="property: object3D.rotation.z; from: 360; to: 0; dur: 4000; loop: true; easing: linear">
|
|
|
101
|
+ </a-plane>
|
|
|
102
|
+
|
|
|
103
|
+ </a-entity>
|
|
|
104
|
+
|
|
|
105
|
+ </ar-root>
|
|
|
106
|
+
|
|
|
107
|
+ <!-- The cat -->
|
|
|
108
|
+ <ar-root reference-image="cat">
|
|
|
109
|
+ <a-entity rotation="-90 0 0" position="0 -0.5 0">
|
|
|
110
|
+ <a-light type="ambient" intensity="1.5"></a-light>
|
|
|
111
|
+
|
|
|
112
|
+ <a-entity
|
|
|
113
|
+ gltf-model="#cat-model" gltf-anim="clip: Cheer"
|
|
|
114
|
+ rotation="90 0 0" scale="0.7 0.7 0.7">
|
|
50
|
115
|
</a-entity>
|
|
51
|
116
|
|
|
52
|
|
- </a-plane>
|
|
|
117
|
+ <a-plane width="4" height="4"
|
|
|
118
|
+ material="src: #magic-circle; color: #ffa; side: double; shader: flat; transparent: true; opacity: 1"
|
|
|
119
|
+ animation="property: object3D.rotation.z; from: 360; to: 0; dur: 8000; loop: true; easing: linear">
|
|
|
120
|
+ </a-plane>
|
|
53
|
121
|
|
|
|
122
|
+ <a-entity position="0 -0.5 2">
|
|
|
123
|
+ <a-plane width="3" height="1.5" rotation="90 0 0"
|
|
|
124
|
+ material="src: #it-works; color: #fff; side: double; shader: flat; transparent: true; opacity: 1">
|
|
|
125
|
+ </a-plane>
|
|
|
126
|
+ </a-entity>
|
|
|
127
|
+ </a-entity>
|
|
54
|
128
|
</ar-root>
|
|
55
|
129
|
|
|
56
|
130
|
<!-- Declare external media files here -->
|
|
57
|
131
|
<a-assets>
|
|
58
|
|
- <a-asset-item id="my-3d-model" src="../assets/my-3d-model.glb"></a-asset-item>
|
|
|
132
|
+ <a-asset-item id="cat-model" src="../assets/cat.glb"></a-asset-item>
|
|
|
133
|
+ <a-asset-item id="mage-model" src="../assets/mage.glb"></a-asset-item>
|
|
|
134
|
+ <img id="magic-circle" src="../assets/magic-circle.png">
|
|
|
135
|
+ <img id="it-works" src="../assets/it-works.png">
|
|
|
136
|
+ <video id="my-video" hidden muted loop playsinline autoplay>
|
|
|
137
|
+ <source src="../assets/my-video.webm" type="video/webm" />
|
|
|
138
|
+ <source src="../assets/my-video.mp4" type="video/mp4" />
|
|
|
139
|
+ </video>
|
|
59
|
140
|
</a-assets>
|
|
|
141
|
+
|
|
60
|
142
|
</a-scene>
|
|
61
|
143
|
</body>
|
|
62
|
|
-</html>
|
|
|
144
|
+</html>
|
alemart
11 月之前