From 40c010c630b1b2be4954ba509fdf313a3ec386bd Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 14 Sep 2020 16:55:52 +0200 Subject: [PATCH] added a 3D level object, remain to place 3 levels @ correct height --- src/components/objects/ContentBlock.vue | 34 ++++++++++++------------- src/components/objects/Project.vue | 28 +++++++++++++++----- 2 files changed, 39 insertions(+), 23 deletions(-) diff --git a/src/components/objects/ContentBlock.vue b/src/components/objects/ContentBlock.vue index 5551536..d5d324b 100644 --- a/src/components/objects/ContentBlock.vue +++ b/src/components/objects/ContentBlock.vue @@ -169,7 +169,7 @@ export default { // } // this.position.y = y - // let face = Math.random() + let face = Math.random() // // USES 4 FACES // if (face < 0.25) { // // gauche @@ -197,28 +197,28 @@ export default { // } // // USES 2 FACES - // if (face < 0.5) { - // // gauche - // this.face = 'left' - // this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1 - // this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2) - // this.rotation.y = 90 - // } else { - // // droite - // this.face = 'right' - // this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1 - // this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2) - // this.rotation.y = -90 - // } + if (face < 0.5) { + // gauche + this.face = 'left' + this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1 + // this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2) + this.rotation.y = 90 + } else { + // droite + this.face = 'right' + this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1 + // this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2) + this.rotation.y = -90 + } // With GRID - this.face = 'left' - this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1 + // this.face = 'left' + // this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1 + // this.rotation.y = 90 let pos = this.getGridPos(this.prtIndex) console.log('pos', pos) this.position.z = this.prtPosition.z - this.prtSize.z / 2 + pos.z this.position.y = this.prtPosition.y - this.prtSize.y / 2 + pos.y - this.rotation.y = 90 // this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1 // this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 0.1 diff --git a/src/components/objects/Project.vue b/src/components/objects/Project.vue index d1d7ddb..00dec08 100644 --- a/src/components/objects/Project.vue +++ b/src/components/objects/Project.vue @@ -3,6 +3,7 @@ + @@ -224,10 +225,7 @@ export default { let buildingPos = { ...position } buildingPos.z -= 0.5 * size.z - // let light = new THREE.PointLight(0xfcfcf9, 1) - // var sun = new THREE.DirectionalLight(0xfcfcf9, 2) - // sun.position.set(-150, 200, 110) - + // TOP & FLOOR let topGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z) let topOpts = { color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`), @@ -239,17 +237,33 @@ export default { let topPosition = { ...position } topPosition.y += 0.5 * size.y - let floorGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z) + // 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(floorGeom, floorMat) + 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 + return { block3d: null, // block_opts: materialOpts, @@ -273,6 +287,8 @@ export default { 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,