module version of ARnft

- flamingo and basic example with new three.module.js - all required libs in the repository
webarkit · Oct 30, 2024 · ff6aa3c · ff6aa3c
1 parent caea518
commit ff6aa3c
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 53 deletions.
diff --git a/dist/ARnft.js b/dist/ARnft.js
diff --git a/dist/ARnft.module.js b/dist/ARnft.module.js
diff --git a/examples/arNFT_example.html b/examples/arNFT_example.html
@@ -20,20 +20,22 @@
           "imports": {
             "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
             "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
-            "arnft-threejs": "./js/ARnftThreejs.module.js"
+            "arnft-threejs": "./js/ARnftThreejs.module.js",
+            "arnft": "./../dist/ARnft.module.js"
           }
         }
     </script>
-    <script src="../dist/ARnft.js"></script>
 
     <script type="module">
         import * as THREE from 'three'
+        import arnft  from 'arnft'
+        const { ARnft } = arnft
         import ARnftThreejs  from 'arnft-threejs'
         const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;
 
         let width = 640;
         let height = 480;
-        ARnft.ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config.json', true)
+        ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config.json', true)
             .then((nft) => {
                 let mat = new THREE.MeshLambertMaterial({
                     color: 0xff0000

diff --git a/examples/arNFT_gltf_flamingo_example.html b/examples/arNFT_gltf_flamingo_example.html
@@ -16,14 +16,27 @@
             🖼 Marker Image
         </a>
 
-        <script src="js/third_party/three.js/three.min.js"></script>
-        <script src="js/ARnftThreejs.js"></script>
-        <script src="../dist/ARnft.js"></script>
+        <script type="importmap">
+            {
+              "imports": {
+                "three": "./js/third_party/three.js/three.module.min.js",
+                "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
+                "arnft-threejs": "./js/ARnftThreejs.module.js",
+                 "arnft": "./../dist/ARnft.module.js"
+              }
+            }
+        </script>
+
+        <script type="module">
+            import * as THREE from 'three'
+            import arnft  from 'arnft'
+            const { ARnft } = arnft
+            import ARnftThreejs  from 'arnft-threejs'
+            const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;
 
-        <script>
             let width = 640;
             let height = 480;
-            ARnft.ARnft.init(width, height, [["examples/DataNFT/pinball"]], [["pinball"]], "config.json", true)
+            ARnft.init(width, height, [["examples/DataNFT/pinball"]], [["pinball"]], "config.json", true)
                 .then((nft) => {
                     document.addEventListener("containerEvent", function (ev) {
                         let canvas = document.getElementById("canvas");
@@ -48,7 +61,7 @@
                             },
                         };
 
-                        let sceneThreejs = new ARnftThreejs.SceneRendererTJS(config, canvas, nft.uuid, true);
+                        let sceneThreejs = new SceneRendererTJS(config, canvas, nft.uuid, true);
                         sceneThreejs.initRenderer();
 
                         const renderer = sceneThreejs.getRenderer();
@@ -59,7 +72,7 @@
                         directionalLight.position.set(0.5, 0, 0.866);
                         scene.add(directionalLight);
 
-                        let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
+                        let nftAddTJS = new NFTaddTJS(nft.uuid);
                         let mixers = [];
                         let clock = new THREE.Clock();
                         function modelAnimation(gltf) {

diff --git a/examples/js/ARnftThreejs.js b/examples/js/ARnftThreejs.js
diff --git a/examples/js/ARnftThreejs.module.js b/examples/js/ARnftThreejs.module.js
diff --git a/examples/js/third_party/three.js/three.module.min.js b/examples/js/third_party/three.js/three.module.min.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,29 +1,13 @@
 const path = require('path')
 const TerserPlugin = require("terser-webpack-plugin");
 
-module.exports = {
-  entry: './src/index.ts',
-  devtool: 'inline-source-map',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'ARnft.js',
-    library: 'ARnft',
-    libraryTarget: 'umd',
-    // @see: https://github.com/webpack/webpack/issues/3929
-    libraryExport: 'default',
-    // @see: https://github.com/webpack/webpack/issues/6522
-    globalObject: "typeof self !== 'undefined' ? self : this",
-    publicPath: "auto"
-  },
-  externals: {
-    stats: {
-      commonjs: 'stats.js',
-      commonjs2: 'stats.js',
-      amd: 'stats.js',
-      root: 'Stats' // indicates global variable
-    }
-  },
-  module: {
+module.exports = (env, argv) => {
+  let devtool = false;
+  if (argv.mode === 'development') {
+    devtool = 'inline-source-map';
+  }
+  console.log(`${argv.mode} build`);
+  const module= {
     rules: [
       {
         test: /\.worker\.(c|m)?ts$/i,
@@ -32,26 +16,76 @@ module.exports = {
           options: { inline: 'no-fallback' }
         }
       },
-    {
-      test: /\.tsx?$/,
-      exclude: /node_modules/,
-      loader: 'ts-loader'
-    }
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loader: 'ts-loader'
+      }
     ]
-  },
-  resolve: {
+  };
+  const resolve = {
     alias: {
       jsartoolkitnft: '@webarkit/jsartoolkit-nft'
     },
     extensions: ['.tsx', '.ts', '.js'],
+  };
+  const optimization = {
+        minimize: true,
+        minimizer: [
+          new TerserPlugin({
+                             parallel: true,
+                             extractComments: false
+                           }),
+        ],
+      };
+  return [{
+    name: "ARnft",
+    entry: './src/index.ts',
+    devtool,
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: 'ARnft.js',
+      library: 'ARnft',
+      libraryTarget: 'umd',
+      // @see: https://github.com/webpack/webpack/issues/3929
+      libraryExport: 'default',
+      // @see: https://github.com/webpack/webpack/issues/6522
+      globalObject: "typeof self !== 'undefined' ? self : this",
+      publicPath: "auto"
+    },
+    externals: {
+      stats: {
+        commonjs: 'stats.js',
+        commonjs2: 'stats.js',
+        amd: 'stats.js',
+        root: 'Stats' // indicates global variable
+      }
+    },
+    module,
+    resolve,
+    optimization,
   },
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-        extractComments: false
-      }),
-    ],
-  },
+    {
+      name: "ARnft.module",
+      entry: './src/index.ts',
+      devtool,
+      experiments: {
+        outputModule: true,
+      },
+      output: {
+        library: {
+          type: 'module',
+        },
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'ARnft.module.js',
+      },
+      externalsType: 'module',
+      externals: {
+        three: 'three',
+      },
+      module,
+      resolve,
+      optimization,
+    },
+  ]
 }