123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220 |
- <template>
- <div>
- <object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
- <!-- <object3d v-if="debug" ref="gridDebug3d" name="griddebug" :obj="gridBebug3dObj" :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 class="elevator">
- <ul>
- <li :class="{ active: levelVisibles }">
- <a
- class="btn-level"
- href="#visibles"
- @click.stop="onClickLevel('visibles', $event)"
- @keyup.enter="onClickLevel('visibles')"
- >Visible</a>
- </li>
- <li :class="{ active: levelContexts }">
- <a
- class="btn-level"
- href="#contexts"
- @click.stop="onClickLevel('contexts', $event)"
- @keyup.enter="onClickLevel('contexts')"
- >Context</a>
- </li>
- <li :class="{ active: levelProcesses }">
- <a
- class="btn-level"
- href="#processes"
- @click.stop="onClickLevel('processes', $event)"
- @keyup.enter="onClickLevel('processes')"
- >Process</a>
- </li>
- <li :class="{ active: levelConcepts }">
- <a
- class="btn-level"
- href="#concepts"
- @click.stop="onClickLevel('concepts', $event)"
- @keyup.enter="onClickLevel('concepts')"
- >Concept</a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { mapInstanceState, mapInstanceActions, mapInstanceMutations } 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, {
- debug: state => state.debug,
- 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,
- // gridBebug3dObj: state => state.gridBebug3dObj,
- contents: state => state.contents,
- activeLevel: state => state.activeLevel
- }),
- label_texture_opts () {
- return {
- canvas: this.label_canvas,
- minFilter: THREE.LinearFilter,
- wrapS: THREE.ClampToEdgeWrapping,
- wrapT: THREE.ClampToEdgeWrapping
- }
- },
- levelVisibles () {
- return this.activeLevel === 'visibles'
- },
- levelContexts () {
- return this.activeLevel === 'contexts'
- },
- levelProcesses () {
- return this.activeLevel === 'processes'
- },
- levelConcepts () {
- return this.activeLevel === 'concepts'
- }
- },
- created () {
- this.label_canvas = this.createBuildingTitleCanvas(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.block3d.userData.position = this.position
- this.label3d = this.$refs.label3d.curObj
- },
- methods: {
- ...mapInstanceActions(getModuleName, {
- getContents: 'getContents'
- }),
- ...mapInstanceMutations(getModuleName, {
- setActiveLevel: 'setActiveLevel'
- }),
- open () {
- if (!this.isOpened) {
- this.isOpened = true
- this.getContents()
- }
- },
- onClickLevel (level, e) {
- // e.stopPropagation()
- e.preventDefault()
- console.log('onclickLevel', level)
- this.setActiveLevel(level)
- let toPos = { ...this.position }
- switch (level) {
- case 'visibles':
- toPos.y = 2
- break
- case 'contexts':
- toPos.y = -1 * this.size.y * 0.25 + 2
- break
- case 'processes':
- toPos.y = -2 * this.size.y * 0.25 + 2
- break
- case 'concepts':
- toPos.y = -3 * this.size.y * 0.25 + 2
- break
- }
- this.$emit('lift', toPos)
- }
- }
- }
- </script>
|