DemiSel
/
encantar-js
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki 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,7 +3,9 @@
3 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 11 
  * Utilities for the Demo
 
@@ -12,7 +14,7 @@ class Utils
12 14 
 {
13 15 
     static async loadGLTF(filepath, yAxisIsUp = true)
14 16 
     {
15 
-        const loader = new THREE.GLTFLoader();
17 
+        const loader = new GLTFLoader();
16 18 
         const gltf = await loader.loadAsync(filepath);
17 19
18 20 
         // glTF defines +y as up. We expect +z to be up (when XY is the ground plane)
 
@@ -358,14 +360,9 @@ function main()
358 360 
 {
359 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 363 
     encantar(demo).catch(error => {
365 364 
         alert(error.message);
366 365 
     });
367 366 
 }
368 367
369 368 
 document.addEventListener('DOMContentLoaded', main);
370 
-
371 
-})();

+ 11
- 4
demos/hello-three/index.html 查看文件 

@@ -5,11 +5,18 @@
5 5 
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1">
6 6 
         <title>encantar.js WebAR demo with three.js</title>
7 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 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 20 
     </head>
14 21 
     <body>
15 22 
         <div id="ar-viewport">

+ 11
- 4
demos/hello-three/video.html 查看文件 

@@ -5,11 +5,18 @@
5 5 
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1">
6 6 
         <title>encantar.js WebAR demo with three.js</title>
7 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 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 20 
     </head>
14 21 
     <body>
15 22 
         <div id="ar-viewport">

+ 6
- 4
plugins/three-with-encantar.js 查看文件 

@@ -4,6 +4,8 @@
4 4 
  * @license LGPL-3.0-or-later
5 5 
  */
6 6
7 
+import * as THREE from 'three';
8 
+
7 9 
 /* Usage of the indicated versions is encouraged */
8 10 
 __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__({
9 11 
     'encantar.js': { version: '0.4.1' },
 
@@ -14,7 +16,7 @@ __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__({
14 16 
  * Base class for Augmented Reality experiences
15 17 
  * @abstract
16 18 
  */
17 
-class ARDemo
19 
+export class ARDemo
18 20 
 {
19 21 
     /**
20 22 
      * Start the AR session
 
@@ -238,7 +240,7 @@ class ARSystem
238 240 
  * @param {ARDemo} demo
239 241 
  * @returns {Promise<ARSystem>}
240 242 
  */
241 
-function encantar(demo)
243 
+export function encantar(demo)
242 244 
 {
243 245 
     const ar = new ARSystem();
244 246 
 
@@ -364,8 +366,8 @@ function encantar(demo)
364 366 
 function __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__(libs)
365 367 
 {
366 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 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 372 
             for(const [lib, expected] of Object.entries(libs))
371 373 
                 check(lib, expected.version, versionOf[lib]);

Write Preview
Loading…
取消
儲存