|
@@ -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
|
|
|
}
|