bachir/muntadas-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring in progress: vuex submodules

Browse Source
This commit is contained in:
bachir
2020-09-15 22:36:13 +02:00
parent 6b147d9419
commit baa959d35e
4 changed files with 416 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/objects/Project.vue
+39 -233
View File
@@ -1,16 +1,16 @@
<template>
<div>
<object3d ref="block3d" name="Project" :obj="building" :position="building_position" />
<object3d ref="top" :obj="top_mesh" :position="top_position" />
<object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
<!-- <object3d ref="top" :obj="top_mesh" :position="top_position" />
<object3d ref="floor" :obj="floor_mesh" :position="floor_position" />
<object3d ref="level" :obj="level_mesh" :position="level_position" />
<object3d ref="level" :obj="level_mesh" :position="level_position" /> -->
<!-- <light :obj="light" :position="building_position" /> -->
<mesh ref="label3d" name="Label" :position="label_position">
<!-- <mesh ref="label3d" name="Label" :position="label_position">
<geometry type="Plane" :args="[label_size.x, label_size.y]" />
<material type="MeshLambert" :options="label_opts">
<texture :options="label_texture_opts" />
</material>
</mesh>
</mesh> -->
<!-- <div v-if="isOpened">
<ContentBlock
v-for="item in data.visibles"
@@ -57,8 +57,7 @@
import { mapInstanceState } from '@urbn/vuex-helpers'
import * as THREE from 'three'
// import { toCSG, fromCSG } from 'three-csg'
import { ThreeBSP } from 'three-js-csg-es6'
// import { ThreeBSP } from 'three-js-csg-es6'
import mixins from 'components/mixins'
@@ -77,202 +76,11 @@ export default {
// ContentBlock
},
mixins: [mixins],
props: { id: Number, title: String },
props: { id: Number },
data () {
console.log('Project data() : data', this.data)
// get size and positions from project store
let size = { ...this.data.size }
let position = { ...this.data.position }
let wall = { ...this.data.wall }
// http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
// console.log('ThreeBSP', ThreeBSP)
let backGeom = new THREE.BoxGeometry(size.x, size.y, wall.wallW)
let backMesh = new THREE.Mesh(backGeom)
backMesh.position.z = -0.5 * size.z
let backBSP = new ThreeBSP(backMesh)
let winGeom = new THREE.BoxGeometry(wall.winW, wall.winH, wall.wallW)
let winMesh = new THREE.Mesh(winGeom)
let winBSP
for (var i = 0; i < wall.nbrWinX; i++) {
for (var j = 0; j < wall.nbrWinY; j++) {
winMesh.position.z = -0.5 * size.z
winMesh.position.x = -0.5 * size.x + wall.margin + wall.winW * 0.5 + i * (wall.winW + wall.paddingX)
winMesh.position.y = 0.5 * size.y - wall.margin - wall.winH * 0.5 - j * (wall.winH + wall.paddingY)
winBSP = new ThreeBSP(winMesh)
backBSP = backBSP.subtract(winBSP)
}
}
// let abovewWaterH = position.y + size.y / 2
// let underWaterHThd = (-1 * position.y - size.y / 2) / 3
// let levelH = 4
// let levelGeom = new THREE.BoxGeometry(size.x, levelH, wallW)
// let levelMesh, levelBSP
// for (var l = 0; l < 2; l++) {
// levelMesh = new THREE.Mesh(levelGeom)
// levelMesh.position.z = -0.5 * size.z
// levelMesh.position.y = 0.5 * size.y - abovewWaterH - underWaterHThd - underWaterHThd * l + levelH * 0.5
// levelBSP = new ThreeBSP(levelMesh)
// backBSP = backBSP.union(levelBSP)
// }
backMesh = backBSP.toMesh()
let faceMesh = backMesh.clone()
faceMesh.position.z = 0.5 * size.z
let faceBSP = new ThreeBSP(faceMesh)
let rightGeom = new THREE.BoxGeometry(wall.wallW, size.y, size.z)
let rightMesh = new THREE.Mesh(rightGeom)
rightMesh.position.x = 0.5 * size.x
// rightMesh.position.z = 0.5 * size.z
let rightBSP = new ThreeBSP(rightMesh)
// WE MAY NO NEED TO DIG WINDOWS ON SIDE WALLS
// // dig windows on right
// let nbrWinZ = Math.floor((size.z - 2 * margin) / winW)
// let paddingZ = (size.z - 2 * margin - winW * nbrWinZ) / (nbrWinX - 1)
// winGeom = new THREE.BoxGeometry(wallW, winH, winW)
// for (i = 0; i < nbrWinZ; i++) {
// for (j = 0; j < nbrWinY; j++) {
// // right
// winMesh = new THREE.Mesh(winGeom)
// winMesh.position.x = 0.5 * size.x
// winMesh.position.z = -0.5 * size.z + margin + winW * 0.5 + i * (winW + paddingZ)
// winMesh.position.y = 0.5 * size.y - margin - winH * 0.5 - j * (winH + paddingY)
// winBSP = new ThreeBSP(winMesh)
// rightBSP = rightBSP.subtract(winBSP)
// }
// }
// rightMesh = rightBSP.toMesh()
let leftMesh = rightMesh.clone()
leftMesh.position.x = -0.5 * size.x
// leftMesh.position.z = 0.5 * size.z
let leftBSP = new ThreeBSP(leftMesh)
//
// let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
// let topMesh = new THREE.Mesh(topGeom)
// // topMesh.position.y = -0.5 * size.y
// // let topBSP = new ThreeBSP(topMesh)
//
// let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
// let floorMesh = new THREE.Mesh(floorGeom)
// // floorMesh.position.y = 0.5 * size.y
// // let floorBSP = new ThreeBSP(floorMesh)
let buildingBSP = backBSP.union(rightBSP)
buildingBSP = buildingBSP.union(faceBSP)
buildingBSP = buildingBSP.union(leftBSP)
// buildingBSP = buildingBSP.union(topBSP)
// buildingBSP = buildingBSP.union(floorBSP)
// convert back to three.js mesh
let building = buildingBSP.toMesh()
console.log('building.faces', building)
// create a custom shaderMaterial to had gradian colors
// var uniforms = THREE.UniformsUtils.merge([
// THREE.UniformsLib['lights'],
// {
// 'topColor': { value: new THREE.Color(0xffffff) },
// 'groundColor': { value: new THREE.Color(0xbcd6e4) },
// 'bottomColor': { value: new THREE.Color(0x07223b) },
// // 'bottomColor': { value: new THREE.Color(0x000000) },
// // 'groundColor': { value: new THREE.Color(0xff0000) },
// // 'bottomColor': { value: new THREE.Color(0x00ff00) },
// lightIntensity: { type: 'f', value: 1.0 }
// }
// ])
// var buildingMat = new THREE.ShaderMaterial({
// uniforms: uniforms,
// vertexShader: BgVertex,
// fragmentShader: BuildingFragment,
// side: THREE.DoubleSide,
// lights: true
// })
// building.material = buildingMat
// create a classical material for building
// let topColor = `hsla(201, 100%, 95%, 1)`
let hTop = Math.round(195 + Math.random() * 10)
let sTop = Math.round(100)
let lTop = Math.round(95)
let hFloor = Math.round(205 + Math.random() * 10)
let sFloor = Math.round(40 + Math.random() * 20)
let lFloor = Math.round(5 + Math.random() * 15)
let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
let gradientTexture = new THREE.CanvasTexture(this.createGradientCanvas(topColor, bottomColor))
let materialOpts = {
color: 0xffffff,
side: THREE.DoubleSide,
shininess: 30,
map: gradientTexture
// wireframe: true,
// transparent: true,
// opacity: 0.6
// renderOrder: 0
}
building.material = new THREE.MeshPhongMaterial(materialOpts)
// building.castShadow = true
// building.receiveShadow = true
// let buildingGeom = fromCSG(boxCSG)
// buildingGeom.computeVertexNormals()
// result
// let subtractCSG = boxMeshCSG.subtract(holeMeshCSG)
// let building = fromCSG(boxMeshCSG) // converting CSG back into ThreeJS object
//
let buildingPos = { ...position }
buildingPos.z -= 0.5 * size.z
// TOP & FLOOR
let topGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z)
let topOpts = {
color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
// side: THREE.DoubleSide,
shininess: 30
}
let topMat = new THREE.MeshPhongMaterial(topOpts)
let topMesh = new THREE.Mesh(topGeom, topMat)
let topPosition = { ...position }
topPosition.y += 0.5 * size.y
// let floorGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z)
let floorOpts = {
color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
// side: THREE.DoubleSide,
shininess: 10
}
let floorMat = new THREE.MeshPhongMaterial(floorOpts)
let floorMesh = new THREE.Mesh(topGeom, floorMat)
let floorPosition = { ...position }
floorPosition.y -= 0.5 * size.y
// LEVELS
let levelGeom = new THREE.BoxGeometry(size.x, 1, size.z)
let levelMesh = new THREE.Mesh(levelGeom)
let levelBSP = new ThreeBSP(levelMesh)
let levelHoleGeom = new THREE.BoxGeometry(size.x - 3, 1, 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
console.log('Project data()')
return {
modName: null,
block3d: null,
// block_opts: materialOpts,
label3d: null,
@@ -284,20 +92,20 @@ export default {
// renderOrder: 0
},
// size and positions are defined in store project
size: size,
position: position,
// size: size,
// position: position,
// geometry: geometry,
// light: light,
building: building,
building_position: buildingPos,
top_mesh: topMesh,
top_position: topPosition,
floor_mesh: floorMesh,
floor_position: floorPosition,
level_mesh: levelMesh,
level_position: { ...position },
label_position: { x: 0, y: 0, z: 0 },
// building: building,
// building_position: buildingPos,
// top_mesh: topMesh,
// top_position: topPosition,
// floor_mesh: floorMesh,
// floor_position: floorPosition,
// level_mesh: levelMesh,
// level_position: { ...position },
// label_position: { x: 0, y: 0, z: 0 },
color: 0xffffff,
label_canvas: null,
label_size: null,
@@ -306,30 +114,28 @@ export default {
},
computed: {
...mapInstanceState(getModuleName, {
storeID: state => state.id
}),
label_texture_opts () {
return {
canvas: this.label_canvas,
minFilter: THREE.LinearFilter,
wrapS: THREE.ClampToEdgeWrapping,
wrapT: THREE.ClampToEdgeWrapping
}
}
title: state => state.Titre,
// size: state => state.size,
// position: state => state.position,
walls3dObj: state => state.walls3dObj,
wallsPos: state => state.wallsPos
})
// label_texture_opts () {
// return {
// canvas: this.label_canvas,
// minFilter: THREE.LinearFilter,
// wrapS: THREE.ClampToEdgeWrapping,
// wrapT: THREE.ClampToEdgeWrapping
// }
// }
},
created () {
console.log('Project created: data', this, this.data)
console.log('Project created: getModuleName', getModuleName)
// TODO: create dynamic vuex module for each project
// this.modNameSpace = `project:${this.data.id}`
// this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
this.label_canvas = this.createLabelCanvas(this.storeID.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
this.label_position.z = this.position.z + this.size.z / 2 + 0.5
// console.log('this.label_canvas', this.label_canvas)
// this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
// this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
// this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
// this.label_position.z = this.position.z + this.size.z / 2 + 0.5
// // console.log('this.label_canvas', this.label_canvas)
},
mounted () {
console.log('project mounted', this)
@@ -342,7 +148,7 @@ export default {
this.block3d.userData = {
vnode: this
}
this.label3d = this.$refs.label3d.curObj
// this.label3d = this.$refs.label3d.curObj
// light
// console.log('project mounted', this.$env3d)