https://github.com/troisjs/trois

✨ ThreeJS + VueJS 3 + ViteJS ⚡
https://github.com/troisjs/trois

3d three-js threejs vitejs vuejs vuejs3 webgl

Last synced: 7 days ago
JSON representation

✨ ThreeJS + VueJS 3 + ViteJS ⚡

• Host: GitHub
• URL: https://github.com/troisjs/trois
• Owner: troisjs
• License: mit
• Created: 2020-09-12T21:47:57.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T13:58:34.000Z (over 1 year ago)
• Last Synced: 2025-01-01T17:07:13.082Z (14 days ago)
• Topics: 3d, three-js, threejs, vitejs, vuejs, vuejs3, webgl
• Language: TypeScript
• Homepage: https://troisjs.github.io
• Size: 9.68 MB
• Stars: 4,280
• Watchers: 49
• Forks: 309
• Open Issues: 72
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - trois
• awesome-list - trois
• awesome-threejs - trois
• StarryDivineSky - troisjs/trois

README

        
# ✨ ThreeJS + VueJS 3 + ViteJS ⚡

[![NPM Package][npm]][npm-url]

[![Build Size][build-size]][build-size-url]

[![NPM Downloads][npm-downloads]][npmtrends-url]

[![Twitter][email]][email-url]

[![Twitter][twitter]][twitter-url]

[npm]: https://img.shields.io/npm/v/troisjs

[npm-url]: https://www.npmjs.com/package/troisjs

[build-size]: https://badgen.net/bundlephobia/minzip/troisjs

[build-size-url]: https://bundlephobia.com/result?p=troisjs

[npm-downloads]: https://img.shields.io/npm/dw/troisjs

[npmtrends-url]: https://www.npmtrends.com/troisjs

[twitter]: https://img.shields.io/twitter/follow/soju22?label=&style=social

[twitter-url]: https://twitter.com/soju22

[email]: https://img.shields.io/badge/hire-%20ThreeJS%20Expert-brightgreen

[email-url]: mailto:[email protected]



  

  

  

  

  

  

  

  

  

  

  

  



- 💻 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))

- 🚀 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](https://codepen.io/collection/AGZywR) to see if this little toy can do the job.

**Feel free to contact me if you need a ThreeJS developer ^^**

*Trois* is a french word, it means *Three*.

## Sponsors (Thanks 💙 !!!)



  





  





  





  



## Contributors (Thanks 💙 !!!)



  





  





  





  





  



## Usage (CDN)

TroisJS is really simple and easy to use :

```html



  

    

    

      

      

        

      

    

  



  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');

```

Read more on https://troisjs.github.io/guide/