get CSG to work

package-lock.json

@@ -13904,6 +13904,11 @@
       "resolved": "https://registry.npmjs.org/three/-/three-0.77.0.tgz",
       "integrity": "sha1-iwsbAAR2ic6qAg1IClYspg2H/zc="
     },
+    "three-js-csg-es6": {
+      "version": "73.0.0",
+      "resolved": "https://registry.npmjs.org/three-js-csg-es6/-/three-js-csg-es6-73.0.0.tgz",
+      "integrity": "sha512-eeXGyvRVKlfsfqUxuc8V1rIynDkXgEHXqFxQvdyOY2XVOT0ZdoSwQQEzNXUJrLiOUSXC3UaHqhA3P3bfDGL1Qw=="
+    },
     "three.js": {
       "version": "0.77.1",
       "resolved": "https://registry.npmjs.org/three.js/-/three.js-0.77.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "axios": "^0.18.1",
     "dat.gui": "^0.7.7",
     "oimo": "^1.0.9",
+    "three-js-csg-es6": "^73.0.0",
     "three.js": "^0.77.1",
     "vue": "^2.6.11",
     "vue-meta": "^1.6.0",

src/App.vue

@@ -188,7 +188,7 @@ export default {
       // cam_controls: null,
       init_cam_pos: { x: 0, y: 10, z: 100 },
       // init_cam_pos: { x: 0, y: 150, z: 0 },
-      // init_cam_rot: { x: this.deg2rad(180), y: 0, z: 0 },
+      init_cam_rot: { x: this.deg2rad(180), y: 0, z: 0 },
       raycaster: new THREE.Raycaster(),
       interactive_objects_names: ['Project', 'Content'],
       interactive_objects: [],

src/components/objects/Project.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <mesh ref="block3d" name="Project" :position="position">
-      <!-- <geometry type="Box" :args="[size.x, size.y, size.z]" /> -->
-      <material type="MeshLambert" :color="color" :options="block_opts">
-        <!-- <texture :options="label_texture_opts" /> -->
-      </material>
-    </mesh>
+    <object3d ref="block3d" name="Project" :obj="building" :position="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">
@@ -43,7 +38,8 @@
 
 <script>
 import * as THREE from 'three'
-// import { Base } from 'vue-threejs'
+// import { toCSG, fromCSG } from 'three-csg'
+import { ThreeBSP } from 'three-js-csg-es6'
 
 import mixins from 'components/mixins'
 import ContentBlock from 'components/objects/ContentBlock'
@@ -62,17 +58,50 @@ export default {
     let size = { ...this.data.size }
     let position = { ...this.data.position }
 
-    let geometry = new THREE.BoxBufferGeometry(size.x, size.y, size.z)
+    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)
+
+    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 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)
+
+    let building = buildingBSP.toMesh()
+    building.material = material
+    // building.geometry.computeVertexNormals()
+
+    // let buildingGeom = fromCSG(boxCSG)
+    // buildingGeom.computeVertexNormals()
+
+    // result
+    // let subtractCSG = boxMeshCSG.subtract(holeMeshCSG)
+    // let building = fromCSG(boxMeshCSG) // converting CSG back into ThreeJS object
+    //
+    // building.positon = position
+    // building.castShadow = true
+    // building.receiveShadow = true
 
     return {
       block3d: null,
-      block_opts: {
-        side: THREE.DoubleSide
-        // wireframe: true,
-        // transparent: true,
-        // opacity: 0.6
-        // renderOrder: 0
-      },
+      // block_opts: materialOpts,
       label3d: null,
       label_opts: {
         side: THREE.DoubleSide,
@@ -84,7 +113,8 @@ export default {
       // size and positions are defined in store project
       size: size,
       position: position,
-      geometry: geometry,
+      // geometry: geometry,
+      building: building,
       label_position: { x: 0, y: 0, z: 0 },
       color: 0xffffff,
       label_canvas: null,
@@ -112,13 +142,10 @@ export default {
     // console.log('this.label_canvas', this.label_canvas)
   },
   mounted () {
-    // console.log('project mounted', this)
-    // mesh options
-    this.block3d = this.$refs.block3d.curObj
-    this.block3d.geometry = this.geometry
-    this.block3d.castShadow = true
-    this.block3d.receiveShadow = true
+    console.log('project mounted', this)
     // record self references
+
+    this.block3d = this.$refs.block3d.curObj
     this.block3d.userData = {
       vnode: this
     }