From f41ebbc03c00c611013c47ee2135039448120cf8 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Fri, 18 Sep 2020 10:19:13 +0200 Subject: [PATCH] added levels, started to use graphql-query-builder --- package-lock.json | 5 +++ package.json | 1 + src/App.vue | 2 +- src/components/objects/Project.vue | 4 ++- src/store/modules/project.js | 51 ++++++++++++++++++++---------- 5 files changed, 45 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1524b08..6098537 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index dde853e..d511376 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index f390d8a..49ad576 100644 --- a/src/App.vue +++ b/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) { diff --git a/src/components/objects/Project.vue b/src/components/objects/Project.vue index 485de1c..b2868fa 100644 --- a/src/components/objects/Project.vue +++ b/src/components/objects/Project.vue @@ -3,7 +3,7 @@ - + @@ -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 () { diff --git a/src/store/modules/project.js b/src/store/modules/project.js index 5f332ef..de29c84 100644 --- a/src/store/modules/project.js +++ b/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" }){