DemiSel
/
encantar-js
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Remove touch-three demo

customisations
alemart il y a 11 mois
Parent
7e1b63b336
révision
496404792b
9 fichiers modifiés avec 0 ajouts et 1506 suppressions
Vue séparée Afficher les stats Diff
  1. 0
    1
      demos/assets/helvetiker_bold.typeface.json
  2. 0
    1127
      demos/touch-three/NOTICE.html
  3. 0
    75
      demos/touch-three/README.html
  4. 0
    56
      demos/touch-three/demo.css
  5. 0
    187
      demos/touch-three/demo.js
  6. 0
    24
      demos/touch-three/index.html
  7. BIN
      demos/touch-three/qr-code.gif
  8. 0
    28
      demos/touch-three/video.html
  9. 0
    8
      docs/demos.md

+ 0
- 1
demos/assets/helvetiker_bold.typeface.json
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier


+ 0
- 1127
demos/touch-three/NOTICE.html
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier


+ 0
- 75
demos/touch-three/README.html Voir le fichier 

@@ -1,75 +0,0 @@
1 
-<!doctype html>
2 
-<html>
3 
-    <head>
4 
-        <meta charset="utf-8">
5 
-        <title>encantAR.js WebAR demo with three.js and touch interaction</title>
6 
-        <style>
7 
-        body {
8 
-            font-family: sans-serif;
9 
-            background-color: whitesmoke;
10 
-        }
11 
-
12 
-        a:any-link {
13 
-            color: #7e56c2;
14 
-            text-decoration: none;
15 
-        }
16 
-
17 
-        a:hover {
18 
-            text-decoration: underline;
19 
-        }
20 
-
21 
-        li + li {
22 
-            margin-top: 1em;
23 
-        }
24 
-
25 
-        ul {
26 
-            list-style-type: none;
27 
-            padding-left: 1em;
28 
-        }
29 
-
30 
-        img.qr-code {
31 
-            display: block;
32 
-            width: 256px;
33 
-            image-rendering: pixelated;
34 
-            border: 1px dashed black;
35 
-        }
36 
-
37 
-        a img {
38 
-            height: 5em;
39 
-            border-radius: 4px;
40 
-        }
41 
-
42 
-        @media screen and (min-width: 768px) {
43 
-            a img {
44 
-                height: 3em;
45 
-            }
46 
-        }
47 
-        </style>
48 
-    </head>
49 
-    <body>
50 
-        <h1>encantAR.js with three.js and touch interaction</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>
52 
-
53 
-        <h2>Menu</h2>
54 
-        <ul>
55 
-            <li><a href="index.html">Launch the WebAR experience</a></li>
56 
-            <li><a href="video.html">Test with a pre-recorded video</a></li>
57 
-            <li><a href="NOTICE.html">See the attribution notices</a></li>
58 
-            <li><a href="../">Try other WebAR demos</a></li>
59 
-        </ul>
60 
-
61 
-        <h2>QR code</h2>
62 
-        <img src="qr-code.gif" alt="QR code" class="qr-code">
63 
-
64 
-        <h2>Share</h2>
65 
-        <p>This application is powered by <a href="https://alemart.github.io/encantar-js" target="_blank">encantAR.js: GPU-accelerated Augmented Reality for the web</a>.</p>
66 
-        <div>
67 
-            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/encantar-js&quote=%23encantar-js" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
68 
-            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
69 
-            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
70 
-            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
-            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
72 
-        </div>
73 
-    </body>
74 
-</html>
75 
-

+ 0
- 56
demos/touch-three/demo.css Voir le fichier 

@@ -1,56 +0,0 @@
1 
-body {
2 
-    background-color: black;
3 
-    background-image: url("../assets/poster.svg"), linear-gradient(black, 20%, #46346a);
4 
-    background-position: center;
5 
-    background-repeat: no-repeat;
6 
-    height: 100vh;
7 
-    margin: 0;
8 
-    padding: 0;
9 
-}
10 
-
11 
-#scan {
12 
-    width: 100%;
13 
-    height: 100%;
14 
-    object-fit: contain;
15 
-    opacity: 0.75;
16 
-}
17 
-
18 
-#about {
19 
-    position: absolute;
20 
-    right: 0;
21 
-    top: 0;
22 
-
23 
-    display: inline-block;
24 
-    margin: 0;
25 
-    padding: 0 0.25em;
26 
-
27 
-    color: #fff;
28 
-    font-size: 48px;
29 
-    font-weight: bold;
30 
-    font-family: monospace;
31 
-    text-decoration: none;
32 
-    text-align: center;
33 
-
34 
-    border-bottom: 4px solid;
35 
-    border-color: #5c3ba3;
36 
-    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
37 
-    -webkit-tap-highlight-color: transparent;
38 
-}
39 
-
40 
-#about:hover {
41 
-    border-color: #6742b8;
42 
-    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
43 
-}
44 
-
45 
-#about:active {
46 
-    border-color: #a5a500;
47 
-    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
48 
-}
49 
-
50 
-#about::before {
51 
-    content: '\24D8';
52 
-}
53 
-
54 
-#about:focus {
55 
-    outline: none;
56 
-}

+ 0
- 187
demos/touch-three/demo.js Voir le fichier 

@@ -1,187 +0,0 @@
1 
-window.addEventListener('load', () => {
2 
-
3 
-    const my = { };
4 
-
5 
-    async function initialize(ar)
6 
-    {
7 
-        // add lights
8 
-        const ambientLight = new THREE.AmbientLight(0x808080);
9 
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.75);
10 
-        directionalLight.position.set(0, 0, -1);
11 
-        ar.scene.add(ambientLight);
12 
-        ar.scene.add(directionalLight);
13 
-
14 
-        // create cubes
15 
-        my.cubes = [
16 
-            createCube(ar, 1.0, -0.5, 0x00ff00),
17 
-            createCube(ar, -1.0, -0.5, 0xffff00),
18 
-            createCube(ar, 0.0, -0.5, 0x0077ff),
19 
-        ];
20 
-
21 
-        // create text
22 
-        my.text = await createText(ar, 'Tap on any cube', 0x88ffee);
23 
-        my.text.position.set(-1.5, 0.25, 0.5);
24 
-
25 
-        // setup interactivity
26 
-        my.pointer = createPointer(ar);
27 
-        my.raycaster = new THREE.Raycaster();
28 
-    }
29 
-
30 
-    function createCube(ar, x, y, color, length = 0.7)
31 
-    {
32 
-        const geometry = new THREE.BoxGeometry(length, length, length);
33 
-        const material = new THREE.MeshPhongMaterial({ color });
34 
-        const cube = new THREE.Mesh(geometry, material);
35 
-
36 
-        cube.position.x = x;
37 
-        cube.position.y = y;
38 
-        cube.position.z = length / 2;
39 
-        cube.userData.color = color;
40 
-
41 
-        material.opacity = 1.0;
42 
-        material.transparent = true;
43 
-
44 
-        ar.root.add(cube);
45 
-        return cube;
46 
-    }
47 
-
48 
-    async function createText(ar, text, color = 0xffffff)
49 
-    {
50 
-        const loader = new THREE.FontLoader();
51 
-        const fontURL = '../assets/helvetiker_bold.typeface.json';
52 
-        const font = await loader.loadAsync(fontURL);
53 
-
54 
-        const material = new THREE.MeshPhongMaterial({ color });
55 
-        const geometry = new THREE.TextGeometry(text, {
56 
-            font: font,
57 
-            size: 0.3,
58 
-            height: 0.05,
59 
-        });
60 
-        const mesh = new THREE.Mesh(geometry, material);
61 
-
62 
-        ar.root.add(mesh);
63 
-        return mesh;
64 
-    }
65 
-
66 
-    function createPointer(ar)
67 
-    {
68 
-        const pointer = {
69 
-            position: new THREE.Vector2(),
70 
-            down: false,
71 
-
72 
-            get active()
73 
-            {
74 
-                return this.down && Math.max(Math.abs(this.position.x), Math.abs(this.position.y)) <= 1.0;
75 
-            }
76 
-        };
77 
-
78 
-        function updatePosition(event)
79 
-        {
80 
-            const canvas = ar.renderer.domElement;
81 
-            const rect = canvas.getBoundingClientRect();
82 
-            const x = event.pageX - (rect.left + window.scrollX);
83 
-            const y = event.pageY - (rect.top + window.scrollY);
84 
-
85 
-            // normalize to [-1,1] x [-1,1]
86 
-            pointer.position.x = 2.0 * x / rect.width - 1.0;
87 
-            pointer.position.y = -2.0 * y / rect.height + 1.0;
88 
-        }
89 
-
90 
-        // setup pointer interactivity
91 
-        window.addEventListener('pointermove', event => {
92 
-            updatePosition(event);
93 
-        });
94 
-        window.addEventListener('pointerdown', event => {
95 
-            updatePosition(event);
96 
-            pointer.down = true;
97 
-        });
98 
-        window.addEventListener('pointerup', event => {
99 
-            pointer.down = false;
100 
-        });
101 
-
102 
-        // done!
103 
-        return pointer;
104 
-    }
105 
-
106 
-    function animate(ar)
107 
-    {
108 
-        // reset all cubes
109 
-        for(let i = 0; i < my.cubes.length; i++) {
110 
-            my.cubes[i].material.color.setHex(my.cubes[i].userData.color);
111 
-            my.cubes[i].scale.z = 1.0;
112 
-        }
113 
-
114 
-        // interact with objects via raycasting
115 
-        if(my.pointer.active) {
116 
-            my.raycaster.setFromCamera(my.pointer.position, ar.camera);
117 
-
118 
-            const intersections = my.raycaster.intersectObjects(my.cubes);
119 
-            for(let i = 0; i < intersections.length; i++) {
120 
-
121 
-                // create the appearance of a pushed button
122 
-                const object = intersections[i].object;
123 
-                object.material.color.setHex(0xff3333);
124 
-                object.scale.z = 0.2;
125 
-
126 
-            }
127 
-        }
128 
-    }
129 
-
130 
-    async function startARSession()
131 
-    {
132 
-        if(!AR.isSupported()) {
133 
-            throw new Error(
134 
-                'This device is not compatible with this AR experience.\n\n' +
135 
-                'User agent: ' + navigator.userAgent
136 
-            );
137 
-        }
138 
-
139 
-        //AR.Settings.powerPreference = 'low-power';
140 
-
141 
-        const tracker = AR.Tracker.ImageTracker();
142 
-        await tracker.database.add([{
143 
-            name: 'my-reference-image',
144 
-            image: document.getElementById('my-reference-image')
145 
-        }]);
146 
-
147 
-        const viewport = AR.Viewport({
148 
-            container: document.getElementById('ar-viewport'),
149 
-            hudContainer: document.getElementById('ar-hud')
150 
-        });
151 
-
152 
-        const video = document.getElementById('my-video');
153 
-        const useWebcam = (video === null);
154 
-        const source = useWebcam ?
155 
-            AR.Source.Camera({ resolution: 'md' }) :
156 
-            AR.Source.Video(video);
157 
-
158 
-        const session = await AR.startSession({
159 
-            mode: 'immersive',
160 
-            viewport: viewport,
161 
-            trackers: [ tracker ],
162 
-            sources: [ source ],
163 
-            stats: true,
164 
-            gizmos: true,
165 
-        });
166 
-
167 
-        const scan = document.getElementById('scan');
168 
-
169 
-        tracker.addEventListener('targetfound', event => {
170 
-            session.gizmos.visible = false;
171 
-            if(scan)
172 
-                scan.hidden = true;
173 
-        });
174 
-
175 
-        tracker.addEventListener('targetlost', event => {
176 
-            session.gizmos.visible = true;
177 
-            if(scan)
178 
-                scan.hidden = false;
179 
-        });
180 
-
181 
-        return session;
182 
-    }
183 
-
184 
-    // enchant!
185 
-    encantar(startARSession, animate, initialize);
186 
-
187 
-});

+ 0
- 24
demos/touch-three/index.html Voir le fichier 

@@ -1,24 +0,0 @@
1 
-<!doctype html>
2 
-<html>
3 
-    <head>
4 
-        <meta charset="utf-8">
5 
-        <meta name="viewport" content="width=device-width,initial-scale=1">
6 
-        <title>encantAR.js WebAR demo with three.js and touch interaction</title>
7 
-        <link href="demo.css" rel="stylesheet">
8 
-        <script src="../../dist/encantar.min.js"></script>
9 
-        <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
10 
-        <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/FontLoader.js"></script>
11 
-        <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/geometries/TextGeometry.js"></script>
12 
-        <script src="../../plugins/three-with-encantar.js"></script>
13 
-        <script src="demo.js"></script>
14 
-    </head>
15 
-    <body>
16 
-        <div id="ar-viewport">
17 
-            <div id="ar-hud" hidden>
18 
-                <img id="scan" src="../assets/scan.png">
19 
-                <a id="about" href="NOTICE.html"></a>
20 
-            </div>
21 
-        </div>
22 
-        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
23 
-    </body>
24 
-</html>

BIN
demos/touch-three/qr-code.gif Voir le fichier


+ 0
- 28
demos/touch-three/video.html Voir le fichier 

@@ -1,28 +0,0 @@
1 
-<!doctype html>
2 
-<html>
3 
-    <head>
4 
-        <meta charset="utf-8">
5 
-        <meta name="viewport" content="width=device-width,initial-scale=1">
6 
-        <title>encantAR.js WebAR demo with three.js and touch interaction</title>
7 
-        <link href="demo.css" rel="stylesheet">
8 
-        <script src="../../dist/encantar.min.js"></script>
9 
-        <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
10 
-        <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/FontLoader.js"></script>
11 
-        <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/geometries/TextGeometry.js"></script>
12 
-        <script src="../../plugins/three-with-encantar.js"></script>
13 
-        <script src="demo.js"></script>
14 
-    </head>
15 
-    <body>
16 
-        <div id="ar-viewport">
17 
-            <div id="ar-hud" hidden>
18 
-                <img id="scan" src="../assets/scan.png">
19 
-                <a id="about" href="NOTICE.html"></a>
20 
-            </div>
21 
-        </div>
22 
-        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
23 
-        <video id="my-video" hidden muted loop playsinline autoplay>
24 
-            <source src="../assets/my-video.webm" type="video/webm" />
25 
-            <source src="../assets/my-video.mp4" type="video/mp4" />
26 
-        </video>
27 
-    </body>
28 
-</html>

+ 0
- 8
docs/demos.md Voir le fichier 

@@ -43,14 +43,6 @@ A basic template to help you get started.
43 43
44 44 
 [Launch demo](/encantar-js/demos/hello-world/README.html){ ._blank .md-button }
45 45
46 
-## Interactive demos
47 
-
48 
-### Touch interaction
49 
-
50 
-Have virtual elements respond to touch input.
51 
-
52 
-[Launch demo](/encantar-js/demos/touch-three/README.html){ ._blank .md-button }
53 
-
54 46 
 ## Try locally
55 47
56 48 
 * Run on a console:

Écrire Aperçu
Chargement…
Annuler
Enregistrer