vue-threejs

[WIP] Three.js bindings for Vue

Migrated from react-threejs

Demos: react-world, vue-world

// import VueThreejs from 'vue-threejs' // below 0.2.0
import * as VueThreejs from 'vue-threejs' // >= 0.2.0

Vue.use(VueThreejs)

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

Physics

<movement-system>
  <mass-object :rv0="{ x: 2, y: 2 }" :v0="{ x: 10 }"
      :f="{ x: -3, y: -2 }" :m="1">
    <cube texture="cobblestone" :size="1"></cube>
  </mass-object>
  <mass-object :rv0="{ x: 2, z: 2 }" :v0="{ z: 20 }"
      :f="{ y: -1, z: -8 }" :m="1.2">
    <cube texture="diamond" :size="1.2"></cube>
  </mass-object>
</movement-system>

<oimo-world :options="{ gravity: [0, -9.8, 0] }">
  <space-system :m-scale="10 ** 4">
    <space-object v-for="t in textures" :key="t">
      <oimo-body :options="{ move: true, density: 1 }">
        <cube :texture="t" :size="1"></cube>
      </oimo-body>
    </space-object>
  </space-system>
</oimo-world>

Roadmap

• [x] Basic components
  • [x] renderer/scene/camera/listener
  • [x] object3d/light/audio/controls/animation
  • [x] mesh/geometry/material/texture/obj-mtl
• [ ] Watch for props change
  • [x] position/rotation/obj
  • [ ] more
• [ ] Animation
  • [x] component/animate/speed/paused/blocked
  • [ ] global-control
• [ ] Physical engine
  • [x] movement(a/v/pos/ra/rv/rot)/mass(m/F)
  • [x] gravity(G/r)/collision/oimo
  • [ ] circular-motion/centripetal-force
• [ ] Unit test
  • [x] karma/mocha/phantom
  • [ ] avoriaz/ava

Study Notes

• VueJS extend component: remove parent's property
• 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