muntadas-app/src/components/objects/ContentBlock.vue

<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>