<template>
  <mesh
    name="Plane"
    :position="position"
    :rotation="{
      x:deg2rad(rotation.x),
      y:deg2rad(rotation.y),
      z:deg2rad(rotation.z)
    }"
    :options="mesh_opts"
  >
    <geometry type="PlaneBuffer" :args="[size.w, size.h]" />
    <material type="MeshLambert" :color="color" :options="opts" />
  </mesh>
</template>

<script>
import mixins from 'components/mixins'
import * as THREE from 'three'

export default {
  name: 'Plan',
  mixins: [mixins],
  props: {
    size: Object,
    texture: String,
    position: Object,
    color: Number,
    rotation: Object
  },
  data: () => ({
    mesh_opts: {
      receiveShadow: true,
      castShadow: true
    },
    opts: {
      side: THREE.DoubleSide,
      wireframe: false,
      transparent: true,
      opacity: 0.4
    }
  })
}
</script>
