Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 569 Commits
.devcontainer		.devcontainer
.github		.github
.vscode		.vscode
screenshots		screenshots
src		src
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
vite.config.js		vite.config.js

Repository files navigation

✨ ThreeJS + VueJS 3 + ViteJS ⚡

💻 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 toreact-three-fiber but for VueJS.

I started from scratch, I will rewrite some of myWebGL demos 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 meansThree.

Sponsors (Thanks 💙 !!!)

Contributors (Thanks 💙 !!!)

Usage (CDN)

TroisJS is really simple and easy to use :

<divid="app"><rendererref="renderer"antialiasorbit-ctrlresize="window"><camera:position="{ z: 10 }"></camera><scene><point-light:position="{ y: 50, z: 50 }"></point-light><boxref="box":rotation="{ y: Math.PI / 4, z: Math.PI / 4 }"><lambert-material></lambert-material></box></scene></renderer></div><scripttype="module">import{createApp}from'https://unpkg.com/troisjs@0.3.2/build/trois.module.cdn.min.js';createApp({mounted(){constrenderer=this.$refs.renderer;constbox=this.$refs.box.mesh;renderer.onBeforeRender(()=>{box.rotation.x+=0.01;});}}).mount('#app');</script>