[WIP] Vue bindings for Three.js

Migrated from react-threejs

import VueThreejs from 'vue-threejs'
Vue.use(VueThreejs)

<template>
  <renderer :size="{ w: 600, h: 400 }">
    <scene>
      <camera :position="{ z: 15 }"></camera>
      <object3d :obj="mesh" :position="{ y: -200 }"></object3d>
    </scene>
  </renderer>
</template>

Roadmap

• Basic components
  • renderer/scene/camera/listener
  • object3d/light/audio
  • controls/mesh/more
• Watch for props change
  • position/rotation
  • obj/more
• Better animation mechanism
  • animation-component
  • animation-component-plain
  • animation-mixin
  • animation queue/container

Study Notes

• Vue2 migration commits of vue-threejs
  • cannot use <slot> as root element
  • lifecycle ready => mounted
  • template or render function not defined
  • avoid mutating a prop directly
  • this.$dispatch is not a function
• v-ref is not working with element
• Can I use a compoent inherit other compoent?