update 3d assets properly, i guess

4 files changed, 253 insertions, 252 deletions

diff --git a/frontend/site/projects/museum/stl-files.js b/frontend/site/projects/museum/stl-files.js
new file mode 100644
index 0000000..a7a0242
--- /dev/null
+++ b/frontend/site/projects/museum/stl-files.js
@@ -0,0 +1,105 @@
+export const STL_FILES = {
+  "nora-queen-of-night-server": {
+    url: "/last-museum/static/media/last-museum/nora-albadri/queen.stl",
+    modelMaterial: { 
+      color: "#BCC6CC", 
+      shininess: 50,
+    },
+    width: () => window.innerWidth / 2,
+    height: () => window.innerHeight,
+    style: {
+      left: "0",
+      top: "0",
+    },
+    transform: {
+      rotate: {
+        x: -Math.PI/2,
+        y: 0,
+        z: 0,
+      }
+    }
+  },
+
+  "nora-lamassu-space": {
+    url: "/last-museum/static/media/last-museum/nora-albadri/lamassu.stl",
+    modelMaterial: { 
+      color: "#bfb8a8", 
+      shininess: 60,
+    },
+    width: () => window.innerWidth / 2,
+    height: () => window.innerHeight,
+    style: {
+      right: "0",
+      top: "0",
+    },
+    transform: {
+      rotate: {
+        x: -Math.PI/2,
+        y: 0,
+        z: 0,
+      }
+    }
+  },
+
+  "nora-peg-stairs": {
+    url: "/last-museum/static/media/last-museum/nora-albadri/peg.stl",
+    modelMaterial: { 
+      color: "#0000ff", 
+      shininess: 30,
+    },
+    width: () => window.innerWidth / 2,
+    height: () => window.innerHeight,
+    style: {
+      right: "0",
+      top: "0",
+    },
+    transform: {
+      rotate: {
+        x: -Math.PI/2,
+        y: Math.PI/2,
+        z: 0,
+      }
+    }
+  },
+  "nora-nefertiti": {
+    url: "/last-museum/static/media/last-museum/nora-albadri/nefertiti.stl",
+    modelMaterial: { 
+      color: "#0000ff", 
+      shininess: 30,
+    },
+    width: () => window.innerWidth / 2,
+    height: () => window.innerHeight * 2/3,
+    style: {
+      left: "0",
+      top: "0",
+    },
+    transform: {
+      rotate: {
+        x: -Math.PI/2,
+        y: 0,
+        z: 0,
+      }
+    }
+  },
+  "nora-horus-2": {
+    url: "/last-museum/static/media/last-museum/nora-albadri/shehorus.stl",
+    modelMaterial: { 
+      color: "#888888", 
+      shininess: 100,
+    },
+    width: () => window.innerWidth / 2,
+    height: () => window.innerHeight,
+    style: {
+      right: "0",
+      top: "50%",
+      transform: "translateY(-50%)",
+    },
+    transform: {
+      rotate: {
+        x: -Math.PI/2,
+        y: 0,
+        z: 0,
+      }
+    }
+  }
+}
diff --git a/frontend/site/projects/museum/stl/STLViewer.js b/frontend/site/projects/museum/stl/STLViewer.js
index 365b32d..a4bbad1 100644
--- a/frontend/site/projects/museum/stl/STLViewer.js
+++ b/frontend/site/projects/museum/stl/STLViewer.js
@@ -10,182 +10,182 @@ import OrbitControlsModule from 'three-orbit-controls'
 const OrbitControls = OrbitControlsModule(THREE);
 
 class STLViewer extends Component {
-    static propTypes = {
-        className: PropTypes.string,
-        url: PropTypes.string,
-        file: PropTypes.object,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        backgroundColor: PropTypes.string,
-        modelMaterial: PropTypes.object,
-        sceneClassName: PropTypes.string,
-        onSceneRendered: PropTypes.func,
-    };
+  static propTypes = {
+    className: PropTypes.string,
+    url: PropTypes.string,
+    file: PropTypes.object,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    backgroundColor: PropTypes.string,
+    modelMaterial: PropTypes.object,
+    sceneClassName: PropTypes.string,
+    onSceneRendered: PropTypes.func,
+  };
 
-    static defaultProps = {
-        backgroundColor: '#EAEAEA',
-        modelMaterial: { color: '#B92C2C' },
-        height: 400,
-        width: 400,
-        rotate: true,
-        orbitControls: true,
-        sceneClassName: '',
-    };
+  static defaultProps = {
+    backgroundColor: '#EAEAEA',
+    modelMaterial: { color: '#888888' },
+    height: 400,
+    width: 400,
+    rotate: true,
+    orbitControls: true,
+    sceneClassName: '',
+  };
 
-    componentDidMount() {
-        this.renderModel(this.props);
-    }
+  componentDidMount() {
+    this.renderModel(this.props);
+  }
 
-    shouldComponentUpdate(nextProps, nextState) {
-        if (JSON.stringify(nextProps) === JSON.stringify(this.props)) {
-            return false
-        }
-        return true
+  shouldComponentUpdate(nextProps, nextState) {
+    if (JSON.stringify(nextProps) === JSON.stringify(this.props)) {
+      return false
     }
+    return true
+  }
 
-    componentDidUpdate(prevProps, nextState) {
-        this.renderModel(prevProps);
-    }
+  componentDidUpdate(prevProps, nextState) {
+    this.renderModel(prevProps);
+  }
 
-    componentWillUnmount() {
-        cancelAnimationFrame(this.animationFrame)
-    }
+  componentWillUnmount() {
+    cancelAnimationFrame(this.animationFrame)
+  }
 
-    componentDidCatch(error, info) {
-        console.log(error, info)
-    }
-    
-    renderModel(props) {
-        let camera, scene, renderer, mesh, distance, controls;
-        const {url, file, width, height, modelMaterial, backgroundColor, orbitControls, sceneClassName, onSceneRendered} = props;
-        let xDims, yDims, zDims;
-        let component = this;
+  componentDidCatch(error, info) {
+    console.log(error, info)
+  }
 
-        if (!url) return
+  renderModel(props) {
+    let camera, scene, renderer, mesh, distance, controls;
+    const {url, file, width, height, modelMaterial, backgroundColor, orbitControls, sceneClassName, onSceneRendered} = props;
+    let xDims, yDims, zDims;
+    let component = this;
 
-        scene = new THREE.Scene();
-        distance = 10000;
-        const directionalLight = new THREE.DirectionalLight(0xddeeff, 0.6);
-        directionalLight.position.x = 100;
-        directionalLight.position.y = 100;
-        directionalLight.position.z = 300;
-        directionalLight.position.normalize();
-        scene.add(directionalLight);
+    if (!url) return
 
-        const directionalLight2 = new THREE.DirectionalLight(0xffffdd, 0.6);
-        directionalLight2.position.x = -100;
-        directionalLight2.position.y = 100;
-        directionalLight2.position.z = -300;
-        directionalLight2.position.normalize();
-        scene.add(directionalLight2);
+    scene = new THREE.Scene();
+    distance = 10000;
+    const directionalLight = new THREE.DirectionalLight(0xddeeff, 0.6);
+    directionalLight.position.x = 100;
+    directionalLight.position.y = 100;
+    directionalLight.position.z = 300;
+    directionalLight.position.normalize();
+    scene.add(directionalLight);
 
-        const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
-        scene.add(ambientLight);
+    const directionalLight2 = new THREE.DirectionalLight(0xffffdd, 0.6);
+    directionalLight2.position.x = -100;
+    directionalLight2.position.y = 100;
+    directionalLight2.position.z = -300;
+    directionalLight2.position.normalize();
+    scene.add(directionalLight2);
 
-        const onLoad = geometry => {
-            geometry.computeFaceNormals();
-            geometry.computeVertexNormals();
-            geometry.center();
+    const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
+    scene.add(ambientLight);
 
-            mesh = new THREE.Mesh(
-                geometry,
-                new THREE.MeshPhongMaterial(modelMaterial)
-            );
+    const onLoad = geometry => {
+      geometry.computeFaceNormals();
+      geometry.computeVertexNormals();
+      geometry.center();
 
-            geometry.computeBoundingBox();
-            xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
-            yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
-            zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
+      mesh = new THREE.Mesh(
+        geometry,
+        new THREE.MeshPhongMaterial(modelMaterial)
+      );
 
-            scene.add(mesh);
+      geometry.computeBoundingBox();
+      xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
+      yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
+      zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
 
-            mesh.rotateX(this.props.transform.rotate.x)
-            mesh.rotateY(this.props.transform.rotate.y)
-            mesh.rotateZ(this.props.transform.rotate.z)
+      scene.add(mesh);
 
-            camera = new THREE.PerspectiveCamera(30, width / height, 1, distance);
-            camera.position.set(0, 0, Math.max(xDims * 3, yDims * 3, zDims * 3));
+      mesh.rotateX(this.props.transform.rotate.x)
+      mesh.rotateY(this.props.transform.rotate.y)
+      mesh.rotateZ(this.props.transform.rotate.z)
 
-            scene.add(camera);
+      camera = new THREE.PerspectiveCamera(30, width / height, 1, distance);
+      camera.position.set(0, 0, Math.max(xDims * 3, yDims * 3, zDims * 3));
 
-            renderer = new THREE.WebGLRenderer({
-                preserveDrawingBuffer: true,
-                antialias: true,
-                alpha: true,
-            });
-            renderer.setSize(width, height);
-            renderer.setClearColor(backgroundColor, 0);
-            renderer.domElement.className = sceneClassName;
+      scene.add(camera);
 
-            if (orbitControls) {
-                controls = new OrbitControls(camera, ReactDOM.findDOMNode(component));
-                controls.enableKeys = false;
-                controls.addEventListener('change', orbitRender);
-            }
+      renderer = new THREE.WebGLRenderer({
+        preserveDrawingBuffer: true,
+        antialias: true,
+        alpha: true,
+      });
+      renderer.setSize(width, height);
+      renderer.setClearColor(backgroundColor, 0);
+      renderer.domElement.className = sceneClassName;
 
-            ReactDOM.findDOMNode(this).replaceChild(renderer.domElement,
-                ReactDOM.findDOMNode(this).firstChild);
+      if (orbitControls) {
+        controls = new OrbitControls(camera, ReactDOM.findDOMNode(component));
+        controls.enableKeys = false;
+        controls.addEventListener('change', orbitRender);
+      }
 
-            render();
-            animate();
+      ReactDOM.findDOMNode(this).replaceChild(renderer.domElement,
+        ReactDOM.findDOMNode(this).firstChild);
 
-            if (typeof onSceneRendered === "function") {
-                onSceneRendered(ReactDOM.findDOMNode(renderer.domElement))
-            }
-        };
+      render();
+      animate();
 
-        const onProgress = (xhr) => {
-            if (xhr.lengthComputable) {
-                let percentComplete = xhr.loaded / xhr.total * 100;
-            }
-        };
+      if (typeof onSceneRendered === "function") {
+        onSceneRendered(ReactDOM.findDOMNode(renderer.domElement))
+      }
+    };
 
-        const loader = new STLLoader();
+    const onProgress = (xhr) => {
+      if (xhr.lengthComputable) {
+        let percentComplete = xhr.loaded / xhr.total * 100;
+      }
+    };
+
+    const loader = new STLLoader();
 
-        if (file) {
-            loader.loadFile(file, onLoad, onProgress);
-        } else {
-            loader.load(url, onLoad, onProgress);
-        }
+    if (file) {
+      loader.loadFile(file, onLoad, onProgress);
+    } else {
+      loader.load(url, onLoad, onProgress);
+    }
 
-        const render = () => {
-            renderer.render(scene, camera);
-        };
+    const render = () => {
+      renderer.render(scene, camera);
+    };
 
-        const orbitRender = () => {
-            render();
-        };
+    const orbitRender = () => {
+      render();
+    };
 
-        const animate = () => {
-            if (!mesh) return
-            this.animationFrame = requestAnimationFrame(animate)
-            mesh.rotateZ(Math.PI * 0.001)
-            render()
-        }
+    const animate = () => {
+      if (!mesh) return
+      this.animationFrame = requestAnimationFrame(animate)
+      mesh.rotateZ(Math.PI * 0.001)
+      render()
     }
+  }
 
-    render() {
-        return (
-            <div
-                className={this.props.className}
-                style={{
-                    position: 'fixed',
-                    width: Math.round(this.props.width) + "px",
-                    height: Math.round(this.props.height) + "px",
-                    overflow: 'hidden',
-                    ...this.props.style,
-                }}
-            >
-                <div style={{
-                    height: '100%',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}>
-                </div>
-            </div>
-        );
-    };
+  render() {
+    return (
+      <div
+        className={this.props.className}
+        style={{
+          position: 'fixed',
+          width: Math.round(this.props.width) + "px",
+          height: Math.round(this.props.height) + "px",
+          overflow: 'hidden',
+          ...this.props.style,
+        }}
+      >
+        <div style={{
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        </div>
+      </div>
+    );
+  };
 };
 
 export default STLViewer;
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index 05b9658..273e12e 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -27,6 +27,7 @@
   bottom: 0rem;
   width: 100%;
   height: 5rem;
+  /*background: linear-gradient(180deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0) 70%);*/
   background: linear-gradient(180deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0) 70%);
   transform: translateY(2rem);
   transition: transform 0.15s;
diff --git a/frontend/site/projects/museum/views/stl.overlay.js b/frontend/site/projects/museum/views/stl.overlay.js
index bdea952..53dc5e1 100644
--- a/frontend/site/projects/museum/views/stl.overlay.js
+++ b/frontend/site/projects/museum/views/stl.overlay.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import actions from 'site/actions'
 
 import STLViewer from '../stl/STLViewer'
+import { STL_FILES } from '../stl-files.js'
 
 class StlOverlay extends Component {
   state = {
@@ -40,7 +41,7 @@ class StlOverlay extends Component {
 
   render() {
     const { stl } = this.state
-    if (!this.props.interactive) return null
+    if (!this.props.interactive || !stl) return null
     return (
       <STLViewer
         url={stl?.url}
@@ -62,109 +63,3 @@ const mapStateToProps = state => ({
 })
 
 export default connect(mapStateToProps)(StlOverlay)
-
-const STL_FILES = {
-  "nora-queen-of-night-server": {
-    url: "/last-museum/static/media/last-museum/nora-albadri/queen.stl",
-    modelMaterial: { 
-      color: "#BCC6CC", 
-      shininess: 50,
-    },
-    width: () => window.innerWidth / 2,
-    height: () => window.innerHeight,
-    style: {
-      left: "0",
-      top: "0",
-    },
-    transform: {
-      rotate: {
-        x: -Math.PI/2,
-        y: 0,
-        z: 0,
-      }
-    }
-  },
-
-  "nora-lamassu-space": {
-    url: "/last-museum/static/media/last-museum/nora-albadri/lamassu.stl",
-    modelMaterial: { 
-      color: "#bfb8a8", 
-      shininess: 60,
-    },
-    width: () => window.innerWidth / 2,
-    height: () => window.innerHeight,
-    style: {
-      right: "0",
-      top: "0",
-    },
-    transform: {
-      rotate: {
-        x: -Math.PI/2,
-        y: 0,
-        z: 0,
-      }
-    }
-  },
-
-  "nora-peg-stairs": {
-    url: "/last-museum/static/media/last-museum/nora-albadri/peg.stl",
-    modelMaterial: { 
-      color: "#0000ff", 
-      shininess: 30,
-    },
-    width: () => window.innerWidth / 2,
-    height: () => window.innerHeight,
-    style: {
-      right: "0",
-      top: "0",
-    },
-    transform: {
-      rotate: {
-        x: -Math.PI/2,
-        y: Math.PI/2,
-        z: 0,
-      }
-    }
-  },
-  "nora-nefertiti": {
-    url: "/last-museum/static/media/last-museum/nora-albadri/nefertiti.stl",
-    modelMaterial: { 
-      color: "#0000ff", 
-      shininess: 30,
-    },
-    width: () => window.innerWidth / 2,
-    height: () => window.innerHeight * 2/3,
-    style: {
-      left: "0",
-      top: "0",
-    },
-    transform: {
-      rotate: {
-        x: -Math.PI/2,
-        y: 0,
-        z: 0,
-      }
-    }
-  },
-  "nora-horus-2": {
-    url: "/last-museum/static/media/last-museum/nora-albadri/shehorus.stl",
-    modelMaterial: { 
-      color: "#ff8888", 
-      shininess: 100,
-    },
-    width: () => window.innerWidth / 2,
-    height: () => window.innerHeight,
-    style: {
-      right: "0",
-      top: "50%",
-      transform: "translateY(-50%)",
-    },
-    transform: {
-      rotate: {
-        x: -Math.PI/2,
-        y: 0,
-        z: 0,
-      }
-    }
-  }
-}
\ No newline at end of file