troisjs

[![NPM Package][npm]][npm-url] [![Build Size][build-size]][build-size-url] [![NPM Downloads][npm-downloads]][npmtrends-url] [![Discord][discord]][discord-url] <!-- [![Support][support]][support-url] -->

Stats

StarsIssuesVersionUpdatedCreatedSize
troisjs
1,257200.3.24 months agoa year agoMinified + gzip package size for troisjs in KB

Readme

✨ ThreeJS + VueJS 3 + ViteJS ⚡

NPM Package Build Size NPM Downloads Discord

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.

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

HMR

Thanks to VueJS/ViteJS, TroisJS use watchers and HMR to update ThreeJS objects when you update a template or a prop. This means the result in your browser will be automatically updated without reloading all the stuff. This is really helpful when you are creating a TroisJS Scene.

Features

Take a look at examples : https://troisjs.github.io/

  • Lights
    • AmbientLight
    • DirectionalLight
    • HemisphereLight
    • PointLight
    • RectAreaLight
    • SpotLight
  • Materials
    • Basic
    • Lambert
    • Mapcap
    • Phong
    • Physical
    • Shader
    • Standard
    • SubSurface
    • Toon
  • Geometries
    • Box
    • Circle
    • Cone
    • Cylinder
    • Dodecahedron
    • Icosahedron
    • Lathe
    • Octahedron
    • Polyhedron
    • Ring
    • Sphere
    • Tetrahedron
    • Torus
    • TorusKnot
    • Tube
  • Post Processing
    • EffectComposer
      • BokehPass
      • FilmPass
      • FXAAPass
      • HalftonePass
      • Renderpass
      • SMAAPass
      • SSAOPass
      • UnrealBloomPass
      • TiltShiftPass
      • ZoomBlurPass

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.