troisjs
TypeScript icon, indicating that this package has built-in type declarations

0.3.4 • Public • Published

ThreeJS + VueJS 3 + ViteJS

NPM Package Build Size NPM Downloads 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.

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.4/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/

Package Sidebar

Install

npm i troisjs

Weekly Downloads

1,465

Version

0.3.4

License

ISC

Unpacked Size

1.91 MB

Total Files

143

Last publish

Collaborators

  • klevron