123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <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>
- <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="n in 10" :key="n" :prtPosition="position" :prtSize="size" />
- </div>
- </div>
- </template>
- <script>
- import * as THREE from 'three'
- // import { Base } from 'vue-threejs'
- import mixins from 'components/mixins'
- import ContentBlock from 'components/objects/ContentBlock'
- export default {
- name: 'Project',
- components: {
- ContentBlock
- },
- mixins: [mixins],
- // props: { size: Object, texture: String, position: Object, color: Number },
- props: { data: Object, len: Number, index: Number },
- data: () => ({
- block3d: null,
- block_opts: {
- side: THREE.DoubleSide
- // wireframe: true,
- // transparent: true,
- // opacity: 0.6
- // renderOrder: 0
- },
- label3d: null,
- label_opts: {
- side: THREE.DoubleSide,
- // wireframe: false,
- transparent: true
- // opacity: 0.6
- // renderOrder: 0
- },
- size: { x: 35, y: 10, z: 10 },
- position: { x: 5, y: 5, z: 0 },
- label_position: { x: 5, y: 5, z: 6 },
- color: 0xffffff,
- label_canvas: null,
- label_size: null,
- isOpened: false
- }),
- computed: {
- label_texture_opts () {
- return {
- canvas: this.label_canvas,
- minFilter: THREE.LinearFilter,
- wrapS: THREE.ClampToEdgeWrapping,
- wrapT: THREE.ClampToEdgeWrapping
- }
- }
- },
- created () {
- // console.log('this.index', this.index)
- // randomize size and positions
- this.size.y = 100 + Math.random() * 90
- this.size.z = 10 + Math.random() * 30
- this.position.x = (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
- this.position.y = -1 * this.size.y / 2 + 10 + Math.random() * 30// -10 + Math.random() * this.size.y / 2
- this.position.z = -10 + Math.random() * 10
- this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48)
- 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.1
- // console.log('this.label_canvas', this.label_canvas)
- },
- mounted () {
- // console.log('project mounted', this)
- // mesh options
- this.block3d = this.$refs.block3d.curObj
- this.block3d.castShadow = true
- this.block3d.receiveShadow = true
- // record self references
- this.block3d.userData = {
- vnode: this
- }
- this.label3d = this.$refs.label3d.curObj
- // light
- // console.log('project mounted', this.$env3d)
- // var light = new THREE.AmbientLight(0xbf1a1a) // soft white light
- // this.$env3d.scene.add(light)
- }
- // ,
- // methods: {
- //
- // }
- }
- </script>
|