2021-03-05 00:38:58 +08:00
# ✨ ThreeJS + VueJS 3 + ViteJS ⚡
2020-09-14 23:04:57 +08:00
2021-03-05 00:38:58 +08:00
I wanted to code something similar to [react-three-fiber ](https://github.com/react-spring/react-three-fiber ) but for VueJS.
2020-09-14 23:04:57 +08:00
2020-09-17 20:19:33 +08:00
< p >
2021-03-01 02:19:50 +08:00
< a href = "https://troisjs.github.io" > < img src = "/screenshots/troisjs1.jpg" width = "45%" / > < / a >
< a href = "https://troisjs.github.io" > < img src = "/screenshots/troisjs3.jpg" width = "45%" / > < / a >
< a href = "https://troisjs.github.io" > < img src = "/screenshots/troisjs4.jpg" width = "45%" / > < / a >
< a href = "https://troisjs.github.io" > < img src = "/screenshots/troisjs5.jpg" width = "45%" / > < / a >
2020-09-17 20:19:33 +08:00
< / p >
2021-03-04 08:33:22 +08:00
- 💻 Examples (wip) : https://troisjs.github.io/ ([sources](https://github.com/troisjs/troisjs.github.io/tree/master/src/components))
- 📖 Doc (wip) : https://troisjs.github.io/guide/ ([repo](https://github.com/troisjs/troisjs.github.io))
2021-03-05 00:38:58 +08:00
- 🚀 Codepen examples : https://codepen.io/collection/AxoWoz
2020-09-15 21:39:24 +08:00
2021-03-04 08:33:22 +08:00
I started from scratch, I will rewrite some of my [WebGL demos ](https://codepen.io/collection/AGZywR ) to see if this little toy can do the job.
2020-09-18 05:11:46 +08:00
2020-09-15 21:39:24 +08:00
*Trois* is a french word, it means *Three* .
2020-09-15 21:24:47 +08:00
2020-09-19 23:27:39 +08:00
## HMR
2021-03-05 00:38:58 +08:00
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** .
2020-09-19 23:27:39 +08:00
2020-09-17 23:10:05 +08:00
## Features
- [ ] Lights
- [x] AmbientLight
2020-09-19 23:27:39 +08:00
- [x] DirectionalLight
2020-09-17 23:10:05 +08:00
- [x] PointLight
- [x] SpotLight
- [ ] ...
- [ ] Materials
- [x] Basic
- [x] Lambert
2020-10-06 05:09:55 +08:00
- [x] Mapcat
2020-09-19 23:27:39 +08:00
- [x] Phong
- [x] Physical
2020-10-06 05:09:55 +08:00
- [x] Standard
- [x] SubSurface
- [x] Toon
2020-09-17 23:10:05 +08:00
- [ ] ...
- [ ] Geometries
- [x] Box
2020-09-28 21:43:22 +08:00
- [x] Circle
- [x] Cone
- [x] Cylinder
- [x] Dodecahedron
- [x] Icosahedron
- [x] Lathe
- [x] Octahedron
- [x] Polyhedron
- [x] Ring
2020-09-17 23:10:05 +08:00
- [x] Sphere
2020-09-28 21:43:22 +08:00
- [x] Tetrahedron
- [x] Torus
- [x] TorusKnot
- [x] Tube
2020-09-17 23:10:05 +08:00
- [ ] ...
2020-09-18 03:03:11 +08:00
- [ ] Post Processing
- [x] EffectComposer
2020-09-21 19:45:11 +08:00
- [x] BokehPass
- [x] FilmPass
2020-10-06 05:09:55 +08:00
- [x] FXAAPass
2020-09-21 19:45:11 +08:00
- [x] HalftonePass
- [x] Renderpass
2020-10-06 05:09:55 +08:00
- [x] SMAAPass
2020-09-21 19:45:11 +08:00
- [x] UnrealBloomPass
- [ ] ...
- [ ] ...
