|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <object3d ref="block3d" name="Project" :obj="building" :position="building_position"/>
|
|
|
- <object3d ref="top" :obj="top_mesh" :position="top_position"/>
|
|
|
- <object3d ref="floor" :obj="floor_mesh" :position="floor_position"/>
|
|
|
- <object3d ref="level" :obj="level_mesh" :position="level_position"/>
|
|
|
+ <object3d ref="block3d" name="Project" :obj="building" :position="building_position" />
|
|
|
+ <object3d ref="top" :obj="top_mesh" :position="top_position" />
|
|
|
+ <object3d ref="floor" :obj="floor_mesh" :position="floor_position" />
|
|
|
+ <object3d ref="level" :obj="level_mesh" :position="level_position" />
|
|
|
<!-- <light :obj="light" :position="building_position" /> -->
|
|
|
<mesh ref="label3d" name="Label" :position="label_position">
|
|
|
<geometry type="Plane" :args="[label_size.x, label_size.y]" />
|
|
@@ -11,7 +11,7 @@
|
|
|
<texture :options="label_texture_opts" />
|
|
|
</material>
|
|
|
</mesh>
|
|
|
- <div v-if="isOpened">
|
|
|
+ <!-- <div v-if="isOpened">
|
|
|
<ContentBlock
|
|
|
v-for="item in data.visibles"
|
|
|
:key="item.id"
|
|
@@ -48,29 +48,36 @@
|
|
|
type="concept"
|
|
|
:data="item"
|
|
|
/>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
+import { mapInstanceState } from '@urbn/vuex-helpers'
|
|
|
+
|
|
|
import * as THREE from 'three'
|
|
|
// import { toCSG, fromCSG } from 'three-csg'
|
|
|
import { ThreeBSP } from 'three-js-csg-es6'
|
|
|
|
|
|
import mixins from 'components/mixins'
|
|
|
-import ContentBlock from 'components/objects/ContentBlock'
|
|
|
+
|
|
|
+// import ContentBlock from 'components/objects/ContentBlock'
|
|
|
|
|
|
// import BgVertex from 'assets/glsl/BgVertex'
|
|
|
// import BuildingFragment from 'assets/glsl/BuildingFragment'
|
|
|
|
|
|
+// We'll determine our module based on the moduleName prop on this component
|
|
|
+// https://www.npmjs.com/package/@urbn/vuex-helpers
|
|
|
+const getModuleName = cmp => `project:${cmp.id}`
|
|
|
+
|
|
|
export default {
|
|
|
name: 'Project',
|
|
|
components: {
|
|
|
- ContentBlock
|
|
|
+ // ContentBlock
|
|
|
},
|
|
|
mixins: [mixins],
|
|
|
- // props: { size: Object, texture: String, position: Object, color: Number },
|
|
|
- props: { data: Object, len: Number, index: Number },
|
|
|
+ props: { id: Number, title: String },
|
|
|
data () {
|
|
|
console.log('Project data() : data', this.data)
|
|
|
// get size and positions from project store
|
|
@@ -265,6 +272,7 @@ export default {
|
|
|
levelMesh.material = levelMat
|
|
|
|
|
|
return {
|
|
|
+ modName: null,
|
|
|
block3d: null,
|
|
|
// block_opts: materialOpts,
|
|
|
label3d: null,
|
|
@@ -297,6 +305,9 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
+ ...mapInstanceState(getModuleName, {
|
|
|
+ storeID: state => state.id
|
|
|
+ }),
|
|
|
label_texture_opts () {
|
|
|
return {
|
|
|
canvas: this.label_canvas,
|
|
@@ -308,8 +319,13 @@ export default {
|
|
|
},
|
|
|
created () {
|
|
|
console.log('Project created: data', this, this.data)
|
|
|
+ console.log('Project created: getModuleName', getModuleName)
|
|
|
+
|
|
|
+ // TODO: create dynamic vuex module for each project
|
|
|
+ // this.modNameSpace = `project:${this.data.id}`
|
|
|
|
|
|
- this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
|
|
+ // this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
|
|
+ this.label_canvas = this.createLabelCanvas(this.storeID.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
|
|
@@ -332,10 +348,8 @@ export default {
|
|
|
// console.log('project mounted', this.$env3d)
|
|
|
// var light = new THREE.AmbientLight(0xbf1a1a) // soft white light
|
|
|
// this.$env3d.scene.add(light)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
}
|
|
|
- // ,
|
|
|
- // methods: {
|
|
|
- //
|
|
|
- // }
|
|
|
}
|
|
|
</script>
|