141 lines
4.0 KiB
Vue
141 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
|
|
<object3d ref="top" :obj="top3dObj" :position="topPos" />
|
|
<object3d ref="floor" :obj="floor3dObj" :position="floorPos" />
|
|
<object3d ref="levels" :obj="levels3dObj" :position="levelsPos" />
|
|
<mesh ref="label3d" name="Label" :position="label_position">
|
|
<geometry type="Plane" :args="[label_size.x, label_size.y]" />
|
|
<material type="MeshLambert" :options="label_opts">
|
|
<texture :options="label_texture_opts" />
|
|
</material>
|
|
</mesh>
|
|
<div v-if="isOpened">
|
|
<ContentBlock
|
|
v-for="(item, i) in contents.visibles"
|
|
:key="i"
|
|
type="visible"
|
|
:prtId="id"
|
|
:data="item"
|
|
/>
|
|
<ContentBlock
|
|
v-for="(item, i) in contents.contexts"
|
|
:key="i"
|
|
type="context"
|
|
:prtId="id"
|
|
:data="item"
|
|
/>
|
|
<ContentBlock
|
|
v-for="(item, i) in contents.processes"
|
|
:key="i"
|
|
type="process"
|
|
:prtId="id"
|
|
:data="item"
|
|
/>
|
|
<ContentBlock
|
|
v-for="(item, i) in contents.concepts"
|
|
:key="i"
|
|
type="concept"
|
|
:prtId="id"
|
|
:data="item"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { mapInstanceState, mapInstanceActions } from '@urbn/vuex-helpers'
|
|
|
|
import * as THREE from 'three'
|
|
// import { ThreeBSP } from 'three-js-csg-es6'
|
|
|
|
import mixins from 'components/mixins'
|
|
|
|
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
|
|
},
|
|
mixins: [mixins],
|
|
props: { id: Number },
|
|
data () {
|
|
console.log('Project data()')
|
|
return {
|
|
isOpened: false,
|
|
block3d: null,
|
|
label3d: null,
|
|
label_opts: {
|
|
side: THREE.DoubleSide,
|
|
transparent: true
|
|
// wireframe: false,
|
|
// opacity: 0.6
|
|
// renderOrder: 0
|
|
},
|
|
label_canvas: null,
|
|
label_size: null,
|
|
label_position: { x: 0, y: 0, z: 0 }
|
|
// level_mesh: levelMesh,
|
|
// level_position: { ...position },
|
|
}
|
|
},
|
|
computed: {
|
|
...mapInstanceState(getModuleName, {
|
|
title: state => state.Titre,
|
|
size: state => state.size,
|
|
position: state => state.position,
|
|
walls3dObj: state => state.walls3dObj,
|
|
wallsPos: state => state.wallsPos,
|
|
top3dObj: state => state.top3dObj,
|
|
topPos: state => state.topPos,
|
|
topColor: state => state.topColor,
|
|
floor3dObj: state => state.floor3dObj,
|
|
floorPos: state => state.floorPos,
|
|
levels3dObj: state => state.levels3dObj,
|
|
levelsPos: state => state.levelsPos,
|
|
contents: state => state.contents
|
|
}),
|
|
label_texture_opts () {
|
|
return {
|
|
canvas: this.label_canvas,
|
|
minFilter: THREE.LinearFilter,
|
|
wrapS: THREE.ClampToEdgeWrapping,
|
|
wrapT: THREE.ClampToEdgeWrapping
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', this.topColor)
|
|
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
|
|
console.log('this.label_position', this.label_position)
|
|
},
|
|
mounted () {
|
|
console.log('project mounted', this)
|
|
// record self references
|
|
this.block3d = this.$refs.block3d.curObj
|
|
this.block3d.userData.vnode = this
|
|
this.label3d = this.$refs.label3d.curObj
|
|
},
|
|
methods: {
|
|
...mapInstanceActions(getModuleName, {
|
|
loadContents: 'loadContents'
|
|
}),
|
|
open () {
|
|
this.isOpened = true
|
|
this.loadContents()
|
|
}
|
|
}
|
|
}
|
|
</script>
|