|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <object3d ref="block3d" name="Project" :obj="building" :position="position"/>
|
|
|
+ <object3d ref="block3d" name="Project" :obj="building" :position="building_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">
|
|
@@ -71,18 +71,40 @@ export default {
|
|
|
// http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
|
|
|
console.log('ThreeBSP', ThreeBSP)
|
|
|
|
|
|
- let boxGeom = new THREE.BoxGeometry(size.x, size.y, size.z)
|
|
|
- let boxMesh = new THREE.Mesh(boxGeom)
|
|
|
- let boxBSP = new ThreeBSP(boxMesh)
|
|
|
- console.log('boxBSP', boxBSP)
|
|
|
+ let wallW = 0.001
|
|
|
+
|
|
|
+ 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)
|
|
|
+
|
|
|
+ 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)
|
|
|
+
|
|
|
+ let leftGeom = new THREE.BoxGeometry(wallW, size.y, size.z)
|
|
|
+ let leftMesh = new THREE.Mesh(leftGeom)
|
|
|
+ leftMesh.position.x = -0.5 * size.x
|
|
|
+ // leftMesh.position.z = 0.5 * size.z
|
|
|
+ let leftBSP = new ThreeBSP(leftMesh)
|
|
|
+
|
|
|
+ let buildingBSP = backBSP.union(rightBSP)
|
|
|
+ buildingBSP = buildingBSP.union(faceBSP)
|
|
|
+ buildingBSP = buildingBSP.union(leftBSP)
|
|
|
|
|
|
let holeGeom = new THREE.BoxGeometry(1000, 5, 5)
|
|
|
let holeMesh = new THREE.Mesh(holeGeom)
|
|
|
holeMesh.position.y = 50
|
|
|
let holeBSP = new ThreeBSP(holeMesh)
|
|
|
|
|
|
- let buildingBSP = boxBSP.subtract(holeBSP)
|
|
|
- console.log('buildingBSP', buildingBSP)
|
|
|
+ buildingBSP = buildingBSP.subtract(holeBSP)
|
|
|
|
|
|
let building = buildingBSP.toMesh()
|
|
|
building.material = material
|
|
@@ -95,7 +117,8 @@ export default {
|
|
|
// let subtractCSG = boxMeshCSG.subtract(holeMeshCSG)
|
|
|
// let building = fromCSG(boxMeshCSG) // converting CSG back into ThreeJS object
|
|
|
//
|
|
|
- // building.positon = position
|
|
|
+ let buildingPos = { ...position }
|
|
|
+ buildingPos.z -= 0.5 * size.z
|
|
|
// building.castShadow = true
|
|
|
// building.receiveShadow = true
|
|
|
|
|
@@ -113,8 +136,10 @@ export default {
|
|
|
// size and positions are defined in store project
|
|
|
size: size,
|
|
|
position: position,
|
|
|
+
|
|
|
// geometry: geometry,
|
|
|
building: building,
|
|
|
+ building_position: buildingPos,
|
|
|
label_position: { x: 0, y: 0, z: 0 },
|
|
|
color: 0xffffff,
|
|
|
label_canvas: null,
|
|
@@ -138,7 +163,7 @@ export default {
|
|
|
this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000')
|
|
|
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.1
|
|
|
+ this.label_position.z = this.position.z + this.size.z / 2 + 0.5
|
|
|
// console.log('this.label_canvas', this.label_canvas)
|
|
|
},
|
|
|
mounted () {
|