VuejsでThreejsをつかってみる

<template>
  <div id="cube" ref="stage"></div>
</template>

<script>
import VueThreejs from 'vue-threejs'
import * as THREE from 'three'
import TrackballControls from 'three-trackballcontrols'

export default {
  name: 'Cube',
  props: {
    qua: Array
  },
  components: {
    VueThreejs,
    TrackballControls
  },
  data () {
    // === scene ===
    const scene = new THREE.Scene()
    // === renderer ===
    const renderer = new THREE.WebGLRenderer()
    // === camera ===
    const camera = new THREE.PerspectiveCamera(
      30,
      1,
      0.1,
      100
    )
    camera.position.z = 5
    // === light ===
    const light = new THREE.HemisphereLight(0xFFFFFF, 0xFFFFFF, 2.0, (0, 1, 0))
    // === Grid ===
    const grid = new THREE.GridHelper(6, 10, 0x888888, 0x888888)
    grid.position.y = -0.6
    // === model ===
    const geometry = new THREE.BoxGeometry(1, 0.5, 1.25)
    const material = [
      new THREE.MeshStandardMaterial({ color: 0xFFFFFF }),
      new THREE.MeshStandardMaterial({ color: 0xF4D06F }),
      new THREE.MeshStandardMaterial({ color: 0xFF8811 }),
      new THREE.MeshStandardMaterial({ color: 0x9DD9D2 }),
      new THREE.MeshStandardMaterial({ color: 0xFFA8F0 }),
      new THREE.MeshStandardMaterial({ color: 0x392F5A })
    ]
    const cube = new THREE.Mesh(geometry, material)

    return {
      scene: scene,
      renderer: renderer,
      camera: camera,
      light: light,
      cube: cube,
      grid: grid,
      trackball: null
    }
  },
  created () {
    // === sceneにmodel,light, cameraを追加 ===
    this.scene.add(this.camera)
    this.scene.add(this.light)
    this.scene.add(this.cube)
    this.scene.add(this.grid)
  },
  mounted () {
    this.$refs.stage.appendChild(this.renderer.domElement)
    var stage = document.getElementById('cube')
    this.renderer.setSize(stage.offsetWidth / 1.25, 500)
    this.camera.aspect = (stage.offsetWidth / 1.25) / 500
    this.camera.updateProjectionMatrix()
    // === TrackBall ===
    this.trackball = new TrackballControls(this.camera, this.renderer.domElement)
    this.trackball.noZoom = true
    this.trackball.noPan = true
    this.trackball.rotateSpeed = 1.0
    this.animate()
  },
  methods: {
    animate () {
      requestAnimationFrame(this.animate)
      this.quaternion()
      this.renderer.render(this.scene, this.camera)
      this.trackball.update()
    },
    quaternion () {
      if (typeof this.qua[0] === 'undefined') {
        return
      }
      var q = new THREE.Quaternion(this.qua[2], this.qua[3], this.qua[1], this.qua[0])
      this.cube.quaternion.copy(q)
    }
  },
  watch: {
    'qua': function () {
      this.quaternion()
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>