- 💻 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.
![](https://github.com/avaer.png)
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/
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.
Take a look at examples : https://troisjs.github.io/
- Lights
- AmbientLight
- DirectionalLight
- HemisphereLight
- PointLight
- RectAreaLight
- SpotLight
- Materials
- Basic
- Lambert
- Mapcap
- Phong
- Physical
- Shader
- 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
- SSAOPass
- UnrealBloomPass
- TiltShiftPass
- ZoomBlurPass
- EffectComposer