|
@@ -32,6 +32,14 @@
|
|
|
type="process"
|
|
|
:data="item"
|
|
|
/>
|
|
|
+ <ContentBlock
|
|
|
+ v-for="item in data.concepts"
|
|
|
+ :key="item.id"
|
|
|
+ :prtPosition="position"
|
|
|
+ :prtSize="size"
|
|
|
+ type="concept"
|
|
|
+ :data="item"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -44,6 +52,9 @@ import { ThreeBSP } from 'three-js-csg-es6'
|
|
|
import mixins from 'components/mixins'
|
|
|
import ContentBlock from 'components/objects/ContentBlock'
|
|
|
|
|
|
+import BgVertex from 'assets/glsl/BgVertex'
|
|
|
+import BuildingFragment from 'assets/glsl/BuildingFragment'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'Project',
|
|
|
components: {
|
|
@@ -58,39 +69,106 @@ export default {
|
|
|
let size = { ...this.data.size }
|
|
|
let position = { ...this.data.position }
|
|
|
|
|
|
- let materialOpts = {
|
|
|
- color: 0xffffff,
|
|
|
- side: THREE.DoubleSide
|
|
|
- // wireframe: true,
|
|
|
- // transparent: true,
|
|
|
- // opacity: 0.6
|
|
|
- // renderOrder: 0
|
|
|
- }
|
|
|
- let material = new THREE.MeshLambertMaterial(materialOpts)
|
|
|
-
|
|
|
// http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
|
|
|
- console.log('ThreeBSP', ThreeBSP)
|
|
|
+ // console.log('ThreeBSP', ThreeBSP)
|
|
|
|
|
|
let wallW = 0.001
|
|
|
|
|
|
+ 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 backGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
|
|
|
let backMesh = new THREE.Mesh(backGeom)
|
|
|
backMesh.position.z = -0.5 * size.z
|
|
|
let backBSP = new ThreeBSP(backMesh)
|
|
|
|
|
|
+ // dig windows on face and back
|
|
|
+ let winW = 4
|
|
|
+ let winH = 8
|
|
|
+ let margin = 2
|
|
|
+ let nbrWinX = 0
|
|
|
+ let paddingX = 0
|
|
|
+ let a = 0
|
|
|
+ // removing windows until padding is enough
|
|
|
+ while (paddingX < 0.4) {
|
|
|
+ nbrWinX = Math.floor((size.x - 2 * margin) / winW) - a
|
|
|
+ paddingX = (size.x - 2 * margin - winW * nbrWinX) / (nbrWinX - 1)
|
|
|
+ a++
|
|
|
+ }
|
|
|
+ // console.log('paddingX', paddingX)
|
|
|
+ let nbrWinY = 0
|
|
|
+ let paddingY = 0
|
|
|
+ a = 0
|
|
|
+ // removing windows until padding is enough
|
|
|
+ while (paddingY < 0.4) {
|
|
|
+ nbrWinY = Math.floor((size.y - 2 * margin) / winH) - a
|
|
|
+ paddingY = (size.y - 2 * margin - winH * nbrWinY) / (nbrWinY - 1)
|
|
|
+ a++
|
|
|
+ }
|
|
|
+ let winGeom = new THREE.BoxGeometry(winW, winH, wallW)
|
|
|
+ let winMesh, winBSP
|
|
|
+ for (var i = 0; i < nbrWinX; i++) {
|
|
|
+ for (var j = 0; j < nbrWinY; j++) {
|
|
|
+ // back
|
|
|
+ winMesh = new THREE.Mesh(winGeom)
|
|
|
+ winMesh.position.z = -0.5 * size.z
|
|
|
+ winMesh.position.x = -0.5 * size.x + margin + winW * 0.5 + i * (winW + paddingX)
|
|
|
+ winMesh.position.y = 0.5 * size.y - margin - winH * 0.5 - j * (winH + 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(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)
|
|
|
|
|
|
- let faceGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
|
|
|
- let faceMesh = new THREE.Mesh(faceGeom)
|
|
|
- faceMesh.position.z = 0.5 * size.z
|
|
|
- let faceBSP = new ThreeBSP(faceMesh)
|
|
|
+ // 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 leftGeom = new THREE.BoxGeometry(wallW, size.y, size.z)
|
|
|
- let leftMesh = new THREE.Mesh(leftGeom)
|
|
|
+ let leftMesh = rightMesh.clone()
|
|
|
leftMesh.position.x = -0.5 * size.x
|
|
|
// leftMesh.position.z = 0.5 * size.z
|
|
|
let leftBSP = new ThreeBSP(leftMesh)
|
|
@@ -98,17 +176,47 @@ export default {
|
|
|
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()
|
|
|
|
|
|
- let holeGeom = new THREE.BoxGeometry(1000, 5, 5)
|
|
|
- let holeMesh = new THREE.Mesh(holeGeom)
|
|
|
- holeMesh.position.y = 50
|
|
|
- let holeBSP = new ThreeBSP(holeMesh)
|
|
|
+ // 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
|
|
|
|
|
|
- buildingBSP = buildingBSP.subtract(holeBSP)
|
|
|
+ // create a classical material for building
|
|
|
+ // let materialOpts = {
|
|
|
+ // color: 0xffffff,
|
|
|
+ // side: THREE.DoubleSide
|
|
|
+ // // wireframe: true,
|
|
|
+ // // transparent: true,
|
|
|
+ // // opacity: 0.6
|
|
|
+ // // renderOrder: 0
|
|
|
+ // }
|
|
|
+ // building.material = new THREE.MeshLambertMaterial(materialOpts)
|
|
|
|
|
|
- let building = buildingBSP.toMesh()
|
|
|
- building.material = material
|
|
|
- // building.geometry.computeVertexNormals()
|
|
|
+ // building.castShadow = true
|
|
|
+ // building.receiveShadow = true
|
|
|
|
|
|
// let buildingGeom = fromCSG(boxCSG)
|
|
|
// buildingGeom.computeVertexNormals()
|
|
@@ -119,8 +227,6 @@ export default {
|
|
|
//
|
|
|
let buildingPos = { ...position }
|
|
|
buildingPos.z -= 0.5 * size.z
|
|
|
- // building.castShadow = true
|
|
|
- // building.receiveShadow = true
|
|
|
|
|
|
return {
|
|
|
block3d: null,
|
|
@@ -160,7 +266,7 @@ export default {
|
|
|
created () {
|
|
|
console.log('Project created: data', this, this.data)
|
|
|
|
|
|
- this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000')
|
|
|
+ this.label_canvas = this.createLabelCanvas(this.data.Titre.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
|
|
@@ -171,6 +277,9 @@ export default {
|
|
|
// record self references
|
|
|
|
|
|
this.block3d = this.$refs.block3d.curObj
|
|
|
+ // this.block3d.castShadow = true
|
|
|
+ // this.block3d.receiveShadow = true
|
|
|
+
|
|
|
this.block3d.userData = {
|
|
|
vnode: this
|
|
|
}
|