hugohil/vue-threejs

[WIP] Vue bindings for Three.js

vue-threejs

[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>
      <animation :fn="animate" :speed="3"></animation>
    </scene>
  </renderer>
</template>

Roadmap

• Basic components
  • renderer/scene/camera/listener
  • object3d/light/audio/animation
  • controls/mesh/more
• Watch for props change
  • position/rotation
  • obj/more
• Animation
  • component/animate/speed/paused
  • blocked/global-control
• Unit test
  • Karma/Mocha/Phantom
  • Electron/Ava
• Build commands
  • example dist
  • library dist

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?