✨ ThreeJS + VueJS 3 + ViteJS ⚡

Trois is a french word, it means Three.

• 💻 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.

Usage (CDN)

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/[email protected]/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/

HMR

Thanks to VueJS/ViteJS, TroisJS use watchers and HMR to update ThreeJS objects when you update a template or a prop. 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.

Features

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