feat(Matterport): Integrate Matterport Showcase Viewer into TwinMaker…

… SceneComposer **EXPERIMENTAL**: This change is still in active development, and APIs are not yet finalized. Use at your own risk. This change includes a brand new capability for the iot-app-kit scene-composer component, which allows customers to add a layer to their digital twin that renders a scene from Matterport. It also enables the customer to view the combined TwinMaker + Matterport scene in the Matterport Showcase viewer which enables some pretty cool features: - Navigation is simpler and more intuitive - Immersive View support, browser your scene from the first person perspective! There are more changes to come, so for now this is behind an experimental flag. Use at your own risk, as we will likely make breaking changes to this feature over the next few weeks. Gated behind COMPOSER_FEATURES.Matterport, and requires a Matterport ModelId and applicationKey to work.
awslabs · Mar 2, 2023 · 58236e7 · 58236e7
1 parent 4bfe6f8
commit 58236e7
Show file tree

Hide file tree

Showing 52 changed files with 6,556 additions and 2,500 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,13 +10,15 @@
     "node": ">=16.0.0",
     "npm": ">=8.7.0"
   },
-  "workspaces": [
-    "examples/*",
-    "packages/*"
-  ],
+  "workspaces": {
+    "packages": [
+      "examples/*",
+      "packages/*"
+    ]
+  },
   "scripts": {
+    "bootstrap": "npm install -ws && npm run build",
     "start": "cd packages/components && npm start",
-    "bootstrap": "npm install && npm run build",
     "build": "turbo run build --filter='./packages/*'",
     "clean": "git clean -dxf -e /.idea -e /.vscode -e creds.json",
     "dev": "turbo run dev",
@@ -39,6 +41,7 @@
   "devDependencies": {
     "@babel/core": "^7.6.4",
     "@jest/core": "26.6.3",
+    "@react-three/fiber": "^7.0.26",
     "@testing-library/dom": "^7.22.2",
     "@testing-library/user-event": "^12.1.1",
     "@types/classnames": "^2.2.9",
@@ -54,6 +57,7 @@
     "@types/lodash.uniq": "^4.5.6",
     "@types/lodash.uniqby": "^4.7.6",
     "@types/puppeteer": "^1.20.2",
+    "@types/three": "^0.139.0",
     "@types/uuid": "^3.4.6",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/parser": "^5.23.0",
@@ -92,6 +96,7 @@
     "query-string": "^6.13.5",
     "stylelint": "14.8.2",
     "stylelint-config-standard": "25.0.0",
+    "three": "^0.139.2",
     "ts-jest": "26.5.6",
     "ts-loader": "9.2.6",
     "ts-node": "^10.0.0",

diff --git a/packages/scene-composer/.storybook/main.js b/packages/scene-composer/.storybook/main.js
@@ -1,4 +1,5 @@
 const path = require('path');
+
 const { fromIni } = require('@aws-sdk/credential-providers');
 module.exports = {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -9,7 +10,15 @@ module.exports = {
     '@storybook/preset-scss',
     'storybook-addon-toolbar-actions/register',
   ],
-  staticDirs: ['../dist','../public'],
+  staticDirs: [
+    '../dist',
+    '../public',
+    // TODO: resolve how you want to handle this, initial install hoists to root
+    // but clean + reinstall occasionally installs the @matterport within the scene-composer
+    // node_modules?
+    // `${path.resolve('./node_modules/@matterport/webcomponent/built-bundle')}`,
+    `${path.resolve('../../node_modules/@matterport/webcomponent/built-bundle')}`,
+  ],
   typescript: {
     // also valid 'react-docgen-typescript' | false
 
@@ -30,7 +39,7 @@ module.exports = {
 
       return {
         ...config,
-        awsCredentials: JSON.stringify(credential)
+        awsCredentials: JSON.stringify(credential),
       };
     } catch {
       // Mostly for build hosts, and other environments where you don't want to load AWS config
@@ -42,20 +51,26 @@ module.exports = {
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
     // Make whatever fine-grained changes you need
-    config.module.rules.push({
-      test: /(translations).*\.json$/,
-      loader: path.resolve(__dirname, '../tools/totoro-loader.js'),
-      /*options: {
+    config.module.rules.push(
+      {
+        test: /(translations).*\.json$/,
+        use: [path.resolve(__dirname, '../tools/totoro-loader.js')],
+        /* options: {
         type: "module",
-      },*/
-    }, {
-      test: /\.hdr$/,
-      loader: 'file-loader',
-      options: {
-        name: '[path][name].[ext]'
-      }
-    })    // Return the altered config
+      }, */
+      },
+      {
+        test: /\.hdr$/,
+        type: 'asset/resource',
+        generator: {
+          filename: '[path][name].[ext]',
+        },
+      },
+    ); // Return the altered config
 
     return config;
   },
+  core: {
+    builder: "webpack5",
+  },
 };
diff --git a/packages/scene-composer/.storybook/preview.js b/packages/scene-composer/.storybook/preview.js
@@ -1,4 +1,7 @@
-const awsCredentials = JSON.parse(process.env.awsCredentials);
+const awsCredentialsDefaultFormat = '{ "accessKeyId": "", "secretAccessKey": "", "sessionToken": "" }';
+const awsCredentials = process.env.awsCredentials
+  ? JSON.parse(process.env.awsCredentials)
+  : JSON.parse(awsCredentialsDefaultFormat);
 
 export const parameters = {
   // actions: { argTypesRegex: '^on[A-Z].*' },
@@ -30,10 +33,10 @@ export const globalTypes = {
         { value: 'pt-BR', right: '🇵🇹', title: 'Portuguese (BR)' },
         { value: 'zh-CN', right: '🇨🇳', title: 'Chinese (CN)' },
         { value: 'zh-TW', right: '🇹🇼', title: 'Taiwanese (CN)' },
-      ]
-    }
-  }
-}
+      ],
+    },
+  },
+};
 
 export const argTypes = {
   source: {
@@ -46,11 +49,11 @@ export const argTypes = {
     table: { category: 'AWS' },
     control: {
       description: `Using profile "${process.env.AWS_PROFILE}`,
-    }
+    },
   },
-}
+};
 
 export const args = {
-  source: !!awsCredentials ? 'aws' : 'local',
-  awsCredentials: awsCredentials
-}
+  source: awsCredentials ? 'aws' : 'local',
+  awsCredentials: awsCredentials,
+};
diff --git a/packages/scene-composer/jest.config.ts b/packages/scene-composer/jest.config.ts
@@ -35,7 +35,6 @@ export default merge.recursive(tsPreset, awsuiPreset, {
   },
   transformIgnorePatterns: ['<rootDir>/build', '<rootDir>/coverage', '<rootDir>/dist'],
   testPathIgnorePatterns: ['node_modules', 'dist', 'storybook-static'],
-  moduleDirectories: ['node_modules', '<rootDir>'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   moduleNameMapper: {
     '\\.svg': '<rootDir>/__mocks__/svg.ts',

diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -3,14 +3,19 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.6.5",
+  "version": "2.7.0",
   "description": "AWS IoT TwinMaker Scene Composer Library",
   "homepage": "https://github.com/awslabs/iot-app-kit#readme",
   "license": "Apache-2.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
   "source": "src/src/index.tsx",
+  "workspaces": {
+    "nohoist": [
+      "@matterport/**"
+    ]
+  },
   "directories": {
     "dist": "dist",
     "test": "__tests__"
@@ -82,6 +87,8 @@
     "@storybook/addon-knobs": "^6.3.0",
     "@storybook/addon-links": "^6.5.14",
     "@storybook/addon-toolbars": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.14",
     "@storybook/testing-react": "1.3.0",
@@ -98,7 +105,7 @@
     "@types/react-dom": "^17.0.2",
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.12",
-    "@types/three": "^0.131.0",
+    "@types/three": "^0.139.0",
     "babel-jest": "^27.0.6",
     "babel-plugin-formatjs": "10.3.18",
     "copyfiles": "^2.4.1",
@@ -128,7 +135,8 @@
     "storybook-addon-toolbar-actions": "^0.4.8",
     "svglint": "^2.2.0",
     "ts-jest": "^27.0.4",
-    "ttypescript": "1.5.13"
+    "ttypescript": "1.5.13",
+    "webpack": "^5.75.0"
   },
   "dependencies": {
     "@awsui/collection-hooks": "^1.0.0",
@@ -138,30 +146,33 @@
     "@formatjs/ts-transformer": "3.9.11",
     "@iot-app-kit/core": "*",
     "@iot-app-kit/related-table": "*",
-    "@react-three/drei": "7.10.1",
-    "@react-three/fiber": "7.0.6",
-    "@react-three/postprocessing": "2.0.5",
-    "@react-three/test-renderer": "7.0.6",
+    "@matterport/r3f": "^0.1.0",
+    "@matterport/webcomponent": "^0.1.2",
+    "@react-three/drei": "8.11.0",
+    "@react-three/fiber": "7.0.26",
+    "@react-three/postprocessing": "2.6.2",
+    "@react-three/test-renderer": "^7.0.6",
     "@tweenjs/tween.js": "^18.6.4",
-    "3d-tiles-renderer": "0.3.9",
+    "3d-tiles-renderer": "^0.3.16",
     "arraybuffer-to-string": "1.0.2",
     "debug": "^4.3.4",
     "immer": "^9.0.6",
     "is-absolute-url": "^4.0.1",
     "jexl": "^2.3.0",
     "merge": "^2.1.1",
     "path-browserify": "1.0.1",
-    "postprocessing": "6.23.2",
+    "postprocessing": "6.28.5",
     "react-color": "^2.19.3",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
     "react-error-boundary": "^3.1.3",
     "react-intl": "5.24.1",
+    "stats.js": "^0.17.0",
     "string-to-arraybuffer": "1.0.2",
     "styled-components": "^5.3.0",
-    "three": "^0.131.0",
-    "three-mesh-bvh": "0.5.2",
-    "three-stdlib": "2.4.0",
+    "three": "^0.139.2",
+    "three-mesh-bvh": "0.5.15",
+    "three-stdlib": "2.17.3",
     "ts-custom-error": "^3.2.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5",
@@ -171,10 +182,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 77.6,
-        "statements": 76.8,
-        "functions": 76.8,
-        "branches": 63.4,
+        "lines": 77.32,
+        "statements": 76.49,
+        "functions": 76.45,
+        "branches": 62.03,
         "branchesTrue": 100
       }
     }

diff --git a/packages/scene-composer/src/assets/svgs/index.ts b/packages/scene-composer/src/assets/svgs/index.ts
@@ -5,4 +5,5 @@ export * from './icons/RotateIcon';
 export * from './icons/ScaleIcon';
 export * from './icons/TranslateIcon';
 export * from './icons/TrashIcon';
+export * from './partners/Matterport';
 export * from './icons/ViewCursorIcon';