1 files changed, 44 insertions, 2 deletions
diff --git a/src/views/App.js b/src/views/App.js
index b435047..6734c21 100644
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -3,6 +3,8 @@
  */
 
 import React, { useState, useEffect, useCallback } from "react";
+import * as THREE from "three";
+import { MTLLoader, OBJLoader } from "@hbis/three-obj-mtl-loader";
 
 import Detail from "./Detail.js";
 import Legend from "./Legend.js";
@@ -18,10 +20,14 @@ export default function App() {
   /** Load the database */
   useEffect(async () => {
     const newDb = await loadDB();
+    await loadObjects(newDb);
     setDb(newDb);
     setGraph(
-      buildGraph(newDb, {
-        click: handleClick,
+      buildGraph({
+        db: newDb,
+        handlers: {
+          click: handleClick,
+        },
       })
     );
   }, []);
@@ -64,3 +70,39 @@ async function loadDB() {
   const request = await fetch("/assets/db.json");
   return await request.json();
 }
+
+async function loadObjects(db) {
+  await Promise.all(
+    db.page.reduce((promises, item) => {
+      if (item.threeObject) {
+        promises.push(loadObject(item));
+      }
+      return promises;
+    }, [])
+  );
+}
+
+function loadObject(item) {
+  return new Promise((resolve) => {
+    let { path, file } = item.threeObject;
+    path = "assets/" + path;
+    const manager = new THREE.LoadingManager();
+    manager.setURLModifier((url) => {
+      if (!url.match("/")) {
+        url = path + url;
+      }
+      return url;
+    });
+    const mtlLoader = new MTLLoader(manager);
+    const objLoader = new OBJLoader(manager);
+    mtlLoader.setMaterialOptions({ side: THREE.DoubleSide });
+    mtlLoader.load(file.replace(".obj", ".mtl"), (materials) => {
+      materials.preload();
+      objLoader.setMaterials(materials);
+      objLoader.load(file, (object) => {
+        item.object = object;
+        resolve();
+      });
+    });
+  });
+}