Skip to content

troisjs/trois

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
March 23, 2022 18:04
July 15, 2021 16:50
April 26, 2021 19:05
February 3, 2022 20:18
src
February 21, 2023 20:59
wip
April 20, 2021 17:50
May 11, 2021 21:28
April 28, 2021 18:07
August 30, 2021 21:12
wip
April 16, 2021 01:56
February 16, 2022 19:57
May 11, 2021 21:34
February 11, 2021 23:50

✨ 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/