added levels, started to use graphql-query-builder

package-lock.json

@@ -8435,6 +8435,11 @@
       "integrity": "sha1-/7cD4QZuig7qpMi4C6klPu77+wA=",
       "dev": true
     },
+    "graphql-query-builder": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/graphql-query-builder/-/graphql-query-builder-1.0.7.tgz",
+      "integrity": "sha1-U1bE+nL4s2PLFnfw4PLLHc9vcEM="
+    },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "@urbn/vuex-helpers": "^0.1.0",
     "axios": "^0.18.1",
     "dat.gui": "^0.7.7",
+    "graphql-query-builder": "^1.0.7",
     "oimo": "^1.0.9",
     "three-js-csg-es6": "^73.0.0",
     "three.js": "^0.77.1",

src/App.vue

@@ -286,7 +286,7 @@ export default {
       if (this.controls.user_interact) {
         this.controls.lon = (this.controls.mouse_start.x - e.clientX) * 0.1 + this.controls.lon_start
         this.controls.lat = (e.clientY - this.controls.mouse_start.y) * 0.1 + this.controls.lat_start
-        console.log(`lon: ${this.controls.lon}, lat: ${this.controls.lat}`)
+        // console.log(`lon: ${this.controls.lon}, lat: ${this.controls.lat}`)
       }
     },
     onDocMouseup (e) {

src/components/objects/Project.vue

@@ -3,7 +3,7 @@
     <object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
     <object3d ref="top" :obj="top3dObj" :position="topPos" />
     <object3d ref="floor" :obj="floor3dObj" :position="floorPos" />
-    <!-- <object3d ref="level" :obj="level_mesh" :position="level_position" /> -->
+    <object3d ref="levels" :obj="levels3dObj" :position="levelsPos" />
     <mesh ref="label3d" name="Label" :position="label_position">
       <geometry type="Plane" :args="[label_size.x, label_size.y]" />
       <material type="MeshLambert" :options="label_opts">
@@ -100,6 +100,8 @@ export default {
       topColor: state => state.topColor,
       floor3dObj: state => state.floor3dObj,
       floorPos: state => state.floorPos,
+      levels3dObj: state => state.levels3dObj,
+      levelsPos: state => state.levelsPos,
       contents: state => state.contents
     }),
     label_texture_opts () {

src/store/modules/project.js

@@ -4,6 +4,7 @@
 // import qs from 'querystring'
 // import { REST } from 'api/rest-axios'
 import { GRAPHQL } from 'api/graphql-axios'
+import Query from 'graphql-query-builder'
 
 import * as THREE from 'three'
 import { ThreeBSP } from 'three-js-csg-es6'
@@ -24,6 +25,8 @@ export default {
     floor3dObj: null,
     floorPos: null,
     florrColor: null,
+    levels3dObj: null,
+    levelsPos: null,
     wall: {
       wallW: 0.001,
       // dig windows on face and back
@@ -81,6 +84,8 @@ export default {
     setFloorPos: (state, pos) => { state.floorPos = pos },
     setTopColor: (state, col) => { state.topColor = col },
     setFloorColor: (state, col) => { state.floorColor = col },
+    setLevels3dObj: (state, obj) => { state.levels3dObj = obj },
+    setLevelsPos: (state, pos) => { state.levelsPos = pos },
     setContents: (state, contents) => { state.contents = contents },
     setGrid: (state, grid) => { state.grid = grid },
     shiftGrid: (state, c) => {
@@ -311,25 +316,39 @@ export default {
       let floorPosition = { ...state.position, ...{ y: state.position.y - 0.5 * state.size.y } }
       commit('setFloorPos', floorPosition)
 
-      //
-      // // LEVELS
-      // let levelGeom = new THREE.BoxGeometry(state.size.x, 1, state.size.z)
-      // let levelMesh = new THREE.Mesh(levelGeom)
-      // let levelBSP = new ThreeBSP(levelMesh)
-      // let levelHoleGeom = new THREE.BoxGeometry(state.size.x - 3, 1, state.size.z - 3)
-      // let levelHoleMesh = new THREE.Mesh(levelHoleGeom)
-      // let levelHoleBSP = new ThreeBSP(levelHoleMesh)
-      // levelBSP = levelBSP.subtract(levelHoleBSP)
-      // levelMesh = levelBSP.toMesh()
-      // let levelOpts = {
-      //   color: 0xff0000,
-      //   shininess: 10
-      // }
-      // let levelMat = new THREE.MeshPhongMaterial(levelOpts)
-      // levelMesh.material = levelMat
+      // LEVELS
+      let levelGeom = new THREE.BoxGeometry(state.size.x - state.wall.wallW * 2, 0.1, state.size.z - state.wall.wallW * 2)
+      let levelMesh = new THREE.Mesh(levelGeom)
+      let levelBSP = new ThreeBSP(levelMesh)
+      let levelHoleGeom = new THREE.BoxGeometry(state.size.x - state.wall.wallW * 2 - 3, 0.1, state.size.z - state.wall.wallW * 2 - 3)
+      let levelHoleMesh = new THREE.Mesh(levelHoleGeom)
+      let levelHoleBSP = new ThreeBSP(levelHoleMesh)
+      levelBSP = levelBSP.subtract(levelHoleBSP)
+      levelMesh = levelBSP.toMesh()
+      let levelsGeom = new THREE.Geometry()
+      for (var k = -1; k < 2; k++) {
+        levelMesh.position.y = k * state.size.y * 0.25
+        levelsGeom.mergeMesh(levelMesh)
+      }
+      let levelsOpts = {
+        color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
+        shininess: 10
+      }
+      let levelsMat = new THREE.MeshPhongMaterial(levelsOpts)
+      let levelsMesh = new THREE.Mesh(levelsGeom, levelsMat)
+      commit('setLevels3dObj', levelsMesh)
+      let levelsPos = { ...state.position }
+      commit('setLevelsPos', levelsPos)
     },
     loadContents ({ dispatch, commit, state }) {
       console.log('loadContents')
+      let contentsQuery = new Query('project', { id: state.id })
+      let visiblesQuery = new Query('visibles')
+      visiblesQuery.filter({ Published: true })
+      visiblesQuery.find(['id', 'Name', 'Text2', 'Vimeo', 'Url', 'categories'])
+      contentsQuery.find([visiblesQuery])
+      console.log('contentsQuery', `${contentsQuery}`)
+
       GRAPHQL.post('', { query: `query {
           project(id: "${state.id}") {
             visibles(where: { Published: "true" }){