123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- <template>
- <mesh ref="block3d" name="ContentBlock" :position="position">
- <geometry type="Box" :args="[size.x, size.y, size.z]" />
- <material type="MeshLambert" :color="color" :options="opts" />
- </mesh>
- </template>
- <script>
- import * as THREE from 'three'
- export default {
- name: 'ContentBlock',
- // mixins: [Object3D],
- props: { prtPosition: Object, prtSize: Object },
- data: () => ({
- block3d: null,
- size: { x: 2, y: 3, z: 0.1 },
- position: { x: 0, y: 0, z: 0 },
- opts: {
- side: THREE.DoubleSide
- // wireframe: false,
- // transparent: false,
- // opacity: 0.6
- },
- isOpened: false
- }),
- computed: {
- color () {
- return this.opened ? 0xff0000 : 0x0000ff
- }
- },
- created () {
- console.log('ContentBlock created', this.prtSize)
- this.position.x = this.prtPosition.x - this.prtSize.x / 2 + Math.random() * this.prtSize.x
- this.position.y = this.prtPosition.y - this.prtSize.y / 2 + Math.random() * this.prtSize.y
- this.position.z = this.prtPosition.z - this.prtSize.z / 2 + Math.random() * this.prtSize.z
- },
- mounted () {
- this.block3d = this.$refs.block3d.curObj
- // this.block3d.castShadow = true
- // this.block3d.receiveShadow = true
- // record self references
- this.block3d.userData = {
- vnode: this
- }
- }
- }
- </script>
|