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
- Basic components
- renderer/scene/camera/listener
- object3d/light/audio/controls/animation
- mesh/geometry/material/texture/obj-mtl
- Watch for props change
- position/rotation/obj
- more
- Animation
- component/animate/speed/paused/blocked
- global-control
- Physical engine
- movement(a/v/pos/ra/rv/rot)/mass(m/F)
- gravity(G/r)/collision/oimo
- circular-motion/centripetal-force
- Unit test
- 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 elementlifecycle ready => mountedtemplate or render function not definedavoid mutating a prop directlythis.$dispatch is not a function
- v-ref is not working with element
- Can I use a compoent inherit other compoent?