add 3d assets

1 files changed, 170 insertions, 0 deletions

diff --git a/frontend/site/projects/museum/views/stl.overlay.js b/frontend/site/projects/museum/views/stl.overlay.js
new file mode 100644
index 0000000..bdea952
--- /dev/null
+++ b/frontend/site/projects/museum/views/stl.overlay.js
@@ -0,0 +1,170 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import actions from 'site/actions'
+
+import STLViewer from '../stl/STLViewer'
+
+class StlOverlay extends Component {
+  state = {
+    stl: null,
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname)
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { page_name } = this.props.match.params
+    if (STL_FILES[page_name]) {
+      this.setState({
+        stl: STL_FILES[page_name],
+      })
+    } else {
+      this.setState({
+        stl: null,
+      })
+    }
+  }
+
+  render() {
+    const { stl } = this.state
+    if (!this.props.interactive) return null
+    return (
+      <STLViewer
+        url={stl?.url}
+        style={stl?.style}
+        transform={stl?.transform}
+        width={stl?.width()}
+        height={stl?.height()}
+        modelMaterial={stl?.modelMaterial}
+        backgroundColor='#000000'
+        rotate={true}
+        orbitControls={true}
+      /> 
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  interactive: state.site.interactive,
+})
+
+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