ThreeJS + VueJS 3 + ViteJS
Go to file
Kevin LEVRON a1b1239809
Merge pull request #185 from kartsims/feature/draco-loader
DRACO loader support
2023-04-07 16:11:59 +02:00
.devcontainer devcontainer node:17 2022-03-23 18:04:05 +00:00
.github Create FUNDING.yml 2021-07-15 16:50:01 +02:00
.vscode update ts conf 2021-04-26 19:05:12 +02:00
screenshots screenshots 2022-02-03 20:18:09 +01:00
src DRACO loader support 2023-02-21 20:59:29 +01:00
.eslintrc.js wip 2021-04-20 17:50:06 +02:00
.gitignore remove build 2021-05-11 21:28:29 +02:00
.npmignore 0.3.0-beta.0 2021-04-28 18:07:58 +02:00
LICENSE fix #81 2021-08-30 21:12:54 +02:00
README.md fix(docs): remove extra semicolon in readme 2023-02-24 21:38:24 +03:00
index.html wip 2021-04-16 01:56:52 +02:00
package.json upgrade three@138 refactor RGBFormat -> RGBAFormat 2022-03-23 18:19:52 +00:00
rollup.config.js 0.3.4 2022-02-16 19:57:22 +01:00
tsconfig.json 0.3.0 2021-05-11 21:34:35 +02:00
vite.config.js vite/vue/three versions 2021-02-11 23:50:57 +01:00

README.md

ThreeJS + VueJS 3 + ViteJS

NPM Package Build Size NPM Downloads Twitter Twitter

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.

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 :

<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/troisjs@0.3.2/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/