DemiSel
/
encantar-js
Seguir 1
Destacar 0
Cuchillo 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

Rewrite the A-Frame demo based on the new plugin

customisations
alemart hace 11 meses
padre
44a9537fcf
commit
7e1b63b336
Se han modificado 8 ficheros con 238 adiciones y 4117 borrados
Dividir vista Mostrar estadísticas de diff
  1. 0
    3971
      demos/assets/aframe-particle-system-component.js
  2. 0
    2
      demos/assets/aframe-particle-system-component.min.js
  3. 1
    13
      demos/hello-aframe/NOTICE.html
  4. 1
    1
      demos/hello-aframe/README.html
  5. 1
    8
      demos/hello-aframe/demo.css
  6. 0
    57
      demos/hello-aframe/demo.js
  7. 117
    29
      demos/hello-aframe/index.html
  8. 118
    36
      demos/hello-aframe/video.html

+ 0
- 3971
demos/assets/aframe-particle-system-component.js
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 0
- 2
demos/assets/aframe-particle-system-component.min.js
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1
- 13
demos/hello-aframe/NOTICE.html Ver fichero 

@@ -40,20 +40,8 @@
40 40 
                 License: <a href="#mit">MIT License</a><br>
41 41 
                 <a href="https://threejs.org" target="_blank" rel="external">https://threejs.org</a>
42 42 
             </li>
43 
-            <li>
44 
-                aframe-particle-system-component: Particle systems for A-Frame<br>
45 
-                Copyright &copy; 2016-present IdeaSpace<br>
46 
-                License: <a href="#mit">MIT License</a><br>
47 
-                <a href="https://github.com/IdeaSpaceVR/aframe-particle-system-component" target="_blank" rel="external">https://github.com/IdeaSpaceVR/aframe-particle-system-component</a>
48 
-            </li>
49 
-            <li>
50 
-                Shader Particle Engine: A GLSL-heavy particle engine for THREE.js<br>
51 
-                Copyright &copy; 2015-present Luke Moody<br>
52 
-                License: <a href="#mit">MIT License</a><br>
53 
-                <a href="https://github.com/squarefeet/ShaderParticleEngine" target="_blank" rel="external">https://github.com/squarefeet/ShaderParticleEngine</a>
54 
-            </li>
55 43 
         </ol>
56 
-        <p>This application also contains a 3D model from asset pack "Animated Characters 2" by <a href="https://kenney.nl" target="_blank" rel="external">Kenney</a>, released under the <a href="#cc0">Creative Commons Zero 1.0 Universal</a>.</p>
44 
+        <p>This application also contains a 3D model of a mage by <a href="https://kaylousberg.com" target="_blank" rel="external">Kay Lousberg</a> and a 3D model of a cat by <a href="https://opengameart.org/content/cat-pilot-rigged-animated" target="_blank" rel="external">Tomcat94</a>, both released under the <a href="#cc0">Creative Commons Zero 1.0 Universal</a>.</p>
57 45 
         <hr>
58 46
59 47 
         <h2 id="lgpl">GNU Lesser General Public License</h2>

+ 1
- 1
demos/hello-aframe/README.html Ver fichero 

@@ -48,7 +48,7 @@
48 48 
     </head>
49 49 
     <body>
50 50 
         <h1>encantAR.js with A-Frame</h1>
51 
-        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
51 
+        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/mage.webp" target="_blank">this cartoon</a> or <a href="../assets/cat.webp" target="_blank">this picture</a>.</p>
52 52
53 53 
         <h2>Menu</h2>
54 54 
         <ul>

+ 1
- 8
demos/hello-aframe/demo.css Ver fichero 

@@ -8,13 +8,6 @@ body {
8 8 
     padding: 0;
9 9 
 }
10 10
11 
-#scan {
12 
-    width: 100%;
13 
-    height: 100%;
14 
-    object-fit: contain;
15 
-    opacity: 0.75;
16 
-}
17 
-
18 11 
 #about {
19 12 
     position: absolute;
20 13 
     right: 0;
 
@@ -53,4 +46,4 @@ body {
53 46
54 47 
 #about:focus {
55 48 
     outline: none;
56 
-}
49 
+}

+ 0
- 57
demos/hello-aframe/demo.js Ver fichero 

@@ -1,57 +0,0 @@
1 
-async function startARSession(canvas)
2 
-{
3 
-    if(!AR.isSupported()) {
4 
-        throw new Error(
5 
-            'This device is not compatible with this AR experience.\n\n' +
6 
-            'User agent: ' + navigator.userAgent
7 
-        );
8 
-    }
9 
-
10 
-    if(!(canvas instanceof HTMLCanvasElement))
11 
-        throw new Error(`startARSession expects a <canvas>`);
12 
-
13 
-    //AR.Settings.powerPreference = 'low-power';
14 
-
15 
-    const tracker = AR.Tracker.ImageTracker();
16 
-    await tracker.database.add([{
17 
-        name: 'my-reference-image',
18 
-        image: document.getElementById('my-reference-image')
19 
-    }]);
20 
-
21 
-    const viewport = AR.Viewport({
22 
-        canvas: canvas,
23 
-        container: document.getElementById('ar-viewport'),
24 
-        hudContainer: document.getElementById('ar-hud')
25 
-    });
26 
-
27 
-    const video = document.getElementById('my-video');
28 
-    const useWebcam = (video === null);
29 
-    const source = useWebcam ?
30 
-        AR.Source.Camera({ resolution: 'md' }) :
31 
-        AR.Source.Video(video);
32 
-
33 
-    const session = await AR.startSession({
34 
-        mode: 'immersive',
35 
-        viewport: viewport,
36 
-        trackers: [ tracker ],
37 
-        sources: [ source ],
38 
-        stats: true,
39 
-        gizmos: true,
40 
-    });
41 
-
42 
-    const scan = document.getElementById('scan');
43 
-
44 
-    tracker.addEventListener('targetfound', event => {
45 
-        session.gizmos.visible = false;
46 
-        if(scan)
47 
-            scan.hidden = true;
48 
-    });
49 
-
50 
-    tracker.addEventListener('targetlost', event => {
51 
-        session.gizmos.visible = true;
52 
-        if(scan)
53 
-            scan.hidden = false;
54 
-    });
55 
-
56 
-    return session;
57 
-}

+ 117
- 29
demos/hello-aframe/index.html Ver fichero 

@@ -7,52 +7,140 @@
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 15
23 
-        <!-- This is a scene -->
24 
-        <a-scene ar-scene>
25 
-            <a-camera ar-camera></a-camera>
16 
+        <!-- The AR scene -->
17 
+        <a-scene ar-session="stats: true; gizmos: true">
26 18
27 
-            <!-- Whatever you add to <ar-root> will appear in AR -->
28 
-            <ar-root>
19 
+            <!--
20 
+            +============================+
21 
+            | Let's set up an AR session |
22 
+            +============================+
23 
+            -->
29 24
30 
-                <!-- Ground plane -->
31 
-                <a-plane position="0 -0.5 -0.5" rotation="-90 0 0" width="2" height="1" color="indigo">
25 
+            <!-- The inputs that will feed the AR engine -->
26 
+            <ar-sources>
27 
+
28 
+                <!-- Use a webcam -->
29 
+                <ar-camera-source></ar-camera-source>
30 
+
31 
+                <!-- Use a video element (see <a-assets>) -->
32 
+                <!--
33 
+                <ar-video-source video="#my-video"></ar-video-source>
34 
+                -->
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>
32 68
33 
-                    <!-- 3D model -->
34 
-                    <a-entity gltf-model="#my-3d-model"></a-entity>
35 69
36 
-                    <!-- Particles -->
37 
-                    <a-entity rotation="90 0 0">
38 
-                        <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>
39 
-                        <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>
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">
40 95 
                     </a-entity>
41 96
42 
-                    <!-- Rotating text -->
43 
-                    <a-entity animation="property: rotation.z; from: 0; to: 360; dur: 2000; loop: true; easing: linear">
44 
-                        <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>
45 
-                        <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">
46 115 
                     </a-entity>
47 116
48 
-                </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>
49 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>
50 128 
             </ar-root>
51 129
52 130 
             <!-- Declare external media files here -->
53 131 
             <a-assets>
54 
-                <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 
+                <!--
137 
+                <video id="my-video" hidden muted loop playsinline autoplay>
138 
+                    <source src="../assets/my-video.webm" type="video/webm" />
139 
+                    <source src="../assets/my-video.mp4" type="video/mp4" />
140 
+                </video>
141 
+                -->
55 142 
             </a-assets>
143 
+
56 144 
         </a-scene>
57 145 
     </body>
58 
-</html>
146 
+</html>

+ 118
- 36
demos/hello-aframe/video.html Ver fichero 

@@ -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>

Write Preview
Loading…
Cancelar
Guardar