Merge pull request #56 from SaltieRL/draco

Support loading draco compressed models

Author: Longi94

docs/draco/draco_decoder.wasm

@@ -19,7 +19,7 @@
     "@material-ui/lab": "^3.0.0-alpha.30",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "three": "^0.104.0"
+    "three": "^0.108.0"
   },
   "devDependencies": {
     "@types/react-dom": "^16.8.4",

docs/draco/draco_wasm_wrapper.js

@@ -61,7 +61,6 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.8.13",
     "@types/styled-components": "^4.1.18",
-    "@types/three": "^0.103.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-dynamic-import-webpack": "^1.1.0",
     "file-loader": "^3.0.1",
@@ -70,7 +69,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "rimraf": "^2.6.3",
-    "three": "^0.104.0",
+    "three": "^0.108.0",
     "tslint": "^5.16.0",
     "tslint-react": "^4.0.0",
     "typescript": "^3.4.3",

docs/package-lock.json

@@ -1,5 +1,6 @@
 import { LoadingManager } from "three"
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"
 
 export const loadObject = (path: string, loadingManager?: LoadingManager) => {
   return new Promise(
@@ -8,6 +9,9 @@ export const loadObject = (path: string, loadingManager?: LoadingManager) => {
       reject: (err: Error | ErrorEvent) => void
     ) => {
       const gltfLoader = new GLTFLoader(loadingManager)
+      const dracoLoader = new DRACOLoader()
+      dracoLoader.setDecoderPath('/draco/')
+      gltfLoader.setDRACOLoader(dracoLoader)
       gltfLoader.load(
         path,
         (gltf: GLTF) => {

docs/package.json

@@ -9,7 +9,7 @@ export const loadBall = (loadingManager?: LoadingManager) =>
   storageMemoize(async () => {
     const { default: glb } = await import(
       // @ts-ignore
-      /* webpackChunkName: "Ball" */ "../../assets/models/Ball.glb"
+      /* webpackChunkName: "Ball" */ "../../assets/models/draco/Ball.glb"
     )
     const ballGLTF = await loadObject(glb, loadingManager)
     const ball = getChildByName(ballGLTF, "Ball")

package-lock.json

@@ -9,7 +9,7 @@ export const loadWheel = (loadingManager?: LoadingManager) =>
   storageMemoize(async () => {
     const { default: glb } = await import(
       // @ts-ignore
-      /* webpackChunkName: "Wheel" */ "../../assets/models/Wheel.glb"
+      /* webpackChunkName: "Wheel" */ "../../assets/models/draco/Wheel.glb"
     )
     const wheelGLTF = await loadObject(glb, loadingManager)
     const wheel = new Group()
@@ -22,7 +22,7 @@ export const loadOrangeCar = (loadingManager?: LoadingManager) =>
   storageMemoize(async () => {
     const { default: glb } = await import(
       // @ts-ignore
-      /* webpackChunkName: "Octane_ZXR_Orange" */ "../../assets/models/Octane_ZXR_Orange.glb"
+      /* webpackChunkName: "Octane_ZXR_Orange" */ "../../assets/models/draco/Octane_ZXR_Orange.glb"
     )
     const carGLTF = await loadObject(glb, loadingManager)
     const car = getChildByName(carGLTF, "Octane")
@@ -36,7 +36,7 @@ export const loadBlueCar = (loadingManager?: LoadingManager) =>
   storageMemoize(async () => {
     const { default: glb } = await import(
       // @ts-ignore
-      /* webpackChunkName: "Octane_ZXR_Blue" */ "../../assets/models/Octane_ZXR_Blue.glb"
+      /* webpackChunkName: "Octane_ZXR_Blue" */ "../../assets/models/draco/Octane_ZXR_Blue.glb"
     )
     const carGLTF = await loadObject(glb, loadingManager)
     const car = getChildByName(carGLTF, "Octane")

package.json

@@ -7,7 +7,7 @@ export const loadField = (loadingManager?: LoadingManager) =>
   storageMemoize(async () => {
     const { default: glb } = await import(
       // @ts-ignore
-      /* webpackChunkName: "Field" */ "../../assets/models/Field.glb"
+      /* webpackChunkName: "Field" */ "../../assets/models/draco/Field.glb"
     )
     const fieldGLTF = await loadObject(glb, loadingManager)
     const field = new Group()