add back the 3d gallery

Author: torinmb

src/components/Examples.vue

@@ -19,7 +19,7 @@ export default {
 		room : Room	
 	},
 	mounted() {
-		this.$store.commit('setInitialCameraPose', [6, 2.5, 4]);
+		this.$store.commit('setInitialCameraPose', [14, 2.5, 4]);
 		if(this.embed && this.embed === 'true') {
 			this.$store.commit('setEmbedded', true);
 		}
@@ -32,7 +32,7 @@ export default {
 				temp.reverse();
 				this.sculptures = temp; //array.push isn't tracked by state, resetting is
 				setTimeout(() => {
-				window.onCanvasResize();	
+					window.onCanvasResize();	
 				}, 10);
 				
 			}

src/components/Home3D.vue

@@ -8,6 +8,7 @@ import Room from './Room.vue';
 import {handelUnsavedChanges} from '../helpers/handelUnsavedChanges.js';
 
 export default {
+	props: ['embed'],
 	data: function() {
 		return {
 			sculptures: [],
@@ -19,15 +20,23 @@ export default {
 		room : Room	
 	},
 	mounted() {
-		this.$store.commit('setInitialCameraPose', [6, 2.5, 4]);
+		this.$store.commit('sculpturesLoaded', true);    
+		this.$store.commit('setInitialCameraPose', [16, 2.5, 4]);
+		if(this.embed && this.embed === 'true') {
+			this.$store.commit('setEmbedded', true);
+		}
 		this.$store.dispatch('fetchAllSculptures').then(sculptures => {
 			if(sculptures) {
 				let temp = [];
 				Object.keys(sculptures).forEach(key => {
 					temp.push(sculptures[key]);
 				})
 				temp.reverse();
-				this.sculptures = temp; //array.push isn't tracked by state, resetting is
+				this.sculptures = temp.slice(0, 256); //array.push isn't tracked by state, resetting is
+				setTimeout(() => {
+					this.$store.commit('sculpturesLoaded', true);    
+					window.onCanvasResize();	
+				}, 10);
 			}
 			this.$store.commit('joinRoom', this.roomName);
 		})

src/components/Room.vue

@@ -14,8 +14,8 @@ import {Vector3} from 'three';
 export default {
     props: ['sculpturesData'],
     data: function() {
-        return {
-            grid : {x: 5, z: 0, spacing: 3.0, size: 1.0},
+    return {
+            grid : {x: 16, z: 0, spacing: 4.0, size: 1.0},
             sculptures : this.sculpturesData || [],
             sculpPositions: []
         }

src/main.js

@@ -201,7 +201,7 @@ const hemisphereLight = new HemisphereLight(0xFFFFFF, 0xFFFFFF);
 const startTime = Date.now();
 let prevCanvasSize = window.innerWidth/2; 
 let tweeningSculpturesOpacity = false;
-let fogDistance = 8.0;
+let fogDistance = 200.0;
 window.fogDistance = fogDistance;
 
 let loader = new TextureLoader();
@@ -516,7 +516,7 @@ function onMouseUp(event) {
 	if (store.state.intersectedObject && store.state.intersectedObject === tempIntersectedObject) {
 		mouseDownTime = Date.now() - mouseDownTime;
 		if(mouseDownTime < 400) {
-			if(router.currentRoute.name === 'examples') {
+			if(router.currentRoute.name === 'examples' || router.currentRoute.name === 'gallery' ) {
 				store.state.selectedObject = store.state.intersectedObject;
 				selectedSculptureOpacity.opacity = 1.0;
 				canvas.style.cursor = 'auto';

src/router/routes.js

@@ -32,6 +32,15 @@ export const routes = [
       title: 'Examples',
     }
   },
+  {
+    path: '/gallery',
+    name: 'gallery',
+    component: () => import(/* webpackChunkName: "examples" */ '../components/Home3D.vue'),
+    props: (route) => ({embed: route.query.embed}),
+    meta: {
+      title: 'Gallery',
+    }
+  },  
   {
     path: '/new/:type',
     name: 'new',