DemiSel
/
encantar-js
Наблюдаван 1
Харесван 0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
Преглед на файлове

Use ES Modules with three.js

customisations
alemart преди 7 месеца
родител
e8f79b2d4f
ревизия
d18ed5f3a0
променени са 4 файла, в които са добавени 32 реда и са изтрити 19 реда
Обединен изглед Покажи статистика за разликите
  1. 4
    7
      demos/hello-three/demo.js
  2. 11
    4
      demos/hello-three/index.html
  3. 11
    4
      demos/hello-three/video.html
  4. 6
    4
      plugins/three-with-encantar.js

+ 4
- 7
demos/hello-three/demo.js Целия файл

3 
  * @author Alexandre Martins <alemartf(at)gmail.com> (https://github.com/alemart/encantar-js)
 3 
  * @author Alexandre Martins <alemartf(at)gmail.com> (https://github.com/alemart/encantar-js)
4 
  */
 4 
  */
5
5
6 
-(function() {
6 
+import * as THREE from 'three';
7 
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
8 
+import { encantar, ARDemo } from 'three-with-encantar';
7
9
8 
 /**
 10 
 /**
9 
  * Utilities for the Demo
 11 
  * Utilities for the Demo
12 
 {
 14 
 {
13 
     static async loadGLTF(filepath, yAxisIsUp = true)
 15 
     static async loadGLTF(filepath, yAxisIsUp = true)
14 
     {
 16 
     {
15 
-        const loader = new THREE.GLTFLoader();
17 
+        const loader = new GLTFLoader();
16 
         const gltf = await loader.loadAsync(filepath);
 18 
         const gltf = await loader.loadAsync(filepath);
17
19
18 
         // glTF defines +y as up. We expect +z to be up (when XY is the ground plane)
 20 
         // glTF defines +y as up. We expect +z to be up (when XY is the ground plane)
358 
 {
 360 
 {
359 
     const demo = new EnchantedDemo();
 361 
     const demo = new EnchantedDemo();
360
362
361 
-    if(typeof encantar === 'undefined')
362 
-        throw new Error(`Can't find the three.js plugin for encantar.js`);
363 
-
364 
     encantar(demo).catch(error => {
 363 
     encantar(demo).catch(error => {
365 
         alert(error.message);
 364 
         alert(error.message);
366 
     });
 365 
     });
367 
 }
 366 
 }
368
367
369 
 document.addEventListener('DOMContentLoaded', main);
 368 
 document.addEventListener('DOMContentLoaded', main);
370 
-
371 
-})();

+ 11
- 4
demos/hello-three/index.html Целия файл

5 
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1">
 5 
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1">
6 
         <title>encantar.js WebAR demo with three.js</title>
 6 
         <title>encantar.js WebAR demo with three.js</title>
7 
         <link href="../assets/demo.css" rel="stylesheet">
 7 
         <link href="../assets/demo.css" rel="stylesheet">
8 
+        <script async crossorigin src="https://cdn.jsdelivr.net/npm/es-module-shims@1.10.1/dist/es-module-shims.min.js"></script>
9 
+        <script type="importmap">
10 
+        {
11 
+            "imports": {
12 
+                "three": "https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.module.js",
13 
+                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.147.0/examples/jsm/",
14 
+                "three-with-encantar": "../../plugins/three-with-encantar.js"
15 
+            }
16 
+        }
17 
+        </script>
8 
         <script src="../../dist/encantar.min.js"></script>
 18 
         <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/GLTFLoader.js"></script>
11 
-        <script src="../../plugins/three-with-encantar.js"></script>
12 
-        <script src="demo.js"></script>
19 
+        <script type="module" src="demo.js"></script>
13 
     </head>
 20 
     </head>
14 
     <body>
 21 
     <body>
15 
         <div id="ar-viewport">
 22 
         <div id="ar-viewport">

+ 11
- 4
demos/hello-three/video.html Целия файл

5 
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1">
 5 
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1">
6 
         <title>encantar.js WebAR demo with three.js</title>
 6 
         <title>encantar.js WebAR demo with three.js</title>
7 
         <link href="../assets/demo.css" rel="stylesheet">
 7 
         <link href="../assets/demo.css" rel="stylesheet">
8 
+        <script async crossorigin src="https://cdn.jsdelivr.net/npm/es-module-shims@1.10.1/dist/es-module-shims.min.js"></script>
9 
+        <script type="importmap">
10 
+        {
11 
+            "imports": {
12 
+                "three": "https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.module.js",
13 
+                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.147.0/examples/jsm/",
14 
+                "three-with-encantar": "../../plugins/three-with-encantar.js"
15 
+            }
16 
+        }
17 
+        </script>
8 
         <script src="../../dist/encantar.min.js"></script>
 18 
         <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/GLTFLoader.js"></script>
11 
-        <script src="../../plugins/three-with-encantar.js"></script>
12 
-        <script src="demo.js"></script>
19 
+        <script type="module" src="demo.js"></script>
13 
     </head>
 20 
     </head>
14 
     <body>
 21 
     <body>
15 
         <div id="ar-viewport">
 22 
         <div id="ar-viewport">

+ 6
- 4
plugins/three-with-encantar.js Целия файл

4 
  * @license LGPL-3.0-or-later
 4 
  * @license LGPL-3.0-or-later
5 
  */
 5 
  */
6
6
7 
+import * as THREE from 'three';
8 
+
7 
 /* Usage of the indicated versions is encouraged */
 9 
 /* Usage of the indicated versions is encouraged */
8 
 __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__({
 10 
 __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__({
9 
     'encantar.js': { version: '0.4.1' },
 11 
     'encantar.js': { version: '0.4.1' },
14 
  * Base class for Augmented Reality experiences
 16 
  * Base class for Augmented Reality experiences
15 
  * @abstract
 17 
  * @abstract
16 
  */
 18 
  */
17 
-class ARDemo
19 
+export class ARDemo
18 
 {
 20 
 {
19 
     /**
 21 
     /**
20 
      * Start the AR session
 22 
      * Start the AR session
238 
  * @param {ARDemo} demo
 240 
  * @param {ARDemo} demo
239 
  * @returns {Promise<ARSystem>}
 241 
  * @returns {Promise<ARSystem>}
240 
  */
 242 
  */
241 
-function encantar(demo)
243 
+export function encantar(demo)
242 
 {
 244 
 {
243 
     const ar = new ARSystem();
 245 
     const ar = new ARSystem();
244
246
364 
 function __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__(libs)
 366 
 function __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__(libs)
365 
 {
 367 
 {
366 
     window.addEventListener('load', () => {
 368 
     window.addEventListener('load', () => {
367 
-        try { AR, __THREE__;
368 
-            const versionOf = { 'encantar.js': AR.version.replace(/-.*$/, ''), 'three.js': __THREE__ };
369 
+        try { AR;
370 
+            const versionOf = { 'encantar.js': AR.version.replace(/-.*$/, ''), 'three.js': THREE.REVISION };
369 
             const check = (x,v,w) => v != w ? console.warn(`\n\n\nWARNING\n\nThis plugin has been tested with ${x} version ${v}. The version in use is ${w}. Usage of ${x} version ${v} is recommended instead.\n\n\n`) : void 0;
 371 
             const check = (x,v,w) => v != w ? console.warn(`\n\n\nWARNING\n\nThis plugin has been tested with ${x} version ${v}. The version in use is ${w}. Usage of ${x} version ${v} is recommended instead.\n\n\n`) : void 0;
370 
             for(const [lib, expected] of Object.entries(libs))
 372 
             for(const [lib, expected] of Object.entries(libs))
371 
                 check(lib, expected.version, versionOf[lib]);
 373 
                 check(lib, expected.version, versionOf[lib]);

Write Preview
Loading…
Отказ
Запис