I wanted to try to write a lib similar to react-three-fiber but for VueJS.

• 💻 Demos : https://troisjs.github.io/trois/
• 📖 Doc (wip) : https://troisjs.github.io/doc/

I started from scratch... I don't know if I will have time to maintain this, but feel free to participate :)

I will try to rewrite some of my WebGL demos to see if this little toy can do the job.

Trois is a french word, it means Three.

Thanks to VueJS/ViteJS, TroisJS use watchers and HMR to update ThreeJS objects when you update a template. This means the result in your browser will be automatically updated without reloading all the stuff. This is really helpful when you are creating a TroisJS Scene.

• Lights
  • AmbientLight
  • DirectionalLight
  • PointLight
  • SpotLight
  • ...
• Materials
  • Basic
  • Lambert
  • Mapcat
  • Phong
  • Physical
  • Standard
  • SubSurface
  • Toon
  • ...
• Geometries
  • Box
  • Circle
  • Cone
  • Cylinder
  • Dodecahedron
  • Icosahedron
  • Lathe
  • Octahedron
  • Polyhedron
  • Ring
  • Sphere
  • Tetrahedron
  • Torus
  • TorusKnot
  • Tube
  • ...
• Post Processing
  • EffectComposer
    • BokehPass
    • FilmPass
    • FXAAPass
    • HalftonePass
    • Renderpass
    • SMAAPass
    • UnrealBloomPass
    • ...
• ...

yarn add troisjs 

import { TroisJSVuePlugin } from 'troisjs'; app.use(TroisJSVuePlugin);

I first made a simple Proof of Concept, take a look at Example1.vue :

<template> <Renderer ref="renderer"> <Camera :position="{ z: 10 }" /> <Scene> <PointLight :position="{ y: 50, z: 50 }" /> <Box ref="box" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }"> <LambertMaterial /> </Box> </Scene> </Renderer> </template> <script> export default { mounted() { const renderer = this.$refs.renderer; const box = this.$refs.box.mesh; renderer.onBeforeRender(() => { box.rotation.x += 0.01; }); }, }; </script>

git clone https://github.com/troisjs/trois cd trois yarn yarn dev