- 💻 Examples (wip) : https://troisjs.github.io/ (sources)
- 📖 Doc (wip) : https://troisjs.github.io/guide/ (repo)
- 🚀 Codepen examples : https://codepen.io/collection/AxoWoz
I wanted to code something similar to react-three-fiber but for VueJS.
I started from scratch, I will rewrite some of my WebGL demos to see if this little toy can do the job.
Trois is a french word, it means Three.
TroisJS is really simple and easy to use :
<div id="app"> <renderer ref="renderer" antialias orbit-ctrl resize="window"> <camera :position="{ z: 10 }"></camera> <scene> <point-light :position="{ y: 50, z: 50 }"></point-light> <box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }"> <lambert-material></lambert-material> </box> </scene> </renderer> </div> <script type="module"> import { createApp } from 'https://unpkg.com/troisjs@0.3.2/build/trois.module.cdn.min.js'; createApp({ mounted() { const renderer = this.$refs.renderer; const box = this.$refs.box.mesh; renderer.onBeforeRender(() => { box.rotation.x += 0.01; }); } }).mount('#app');; </script>Read more on https://troisjs.github.io/guide/