✨ VueJS 3 + ViteJS + ThreeJS ⚡

I wanted to try to write a lib similar to react-three-fiber but for VueJS.

💻 Demos : https://troisjs.github.io/trois/
📖 Doc (wip) : https://troisjs.github.io/doc/

I started from scratch... I don't know if I will have time to maintain this, but feel free to participate :)

I will try to rewrite some of my WebGL demos to see if this little toy can do the job.

Trois is a french word, it means Three.

HMR

Thanks to VueJS/ViteJS, TroisJS use watchers and HMR to update ThreeJS objects when you update a template. 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

Lights
- AmbientLight
- DirectionalLight
- PointLight
- SpotLight
- ...
Materials
- Basic
- Lambert
- Phong
- Standard
- Physical
- ...
Geometries
- Box
- Circle
- Cone
- Cylinder
- Dodecahedron
- Icosahedron
- Lathe
- Octahedron
- Polyhedron
- Ring
- Sphere
- Tetrahedron
- Torus
- TorusKnot
- Tube
- ...
Meshes
- Box
- Circle
- Cone
- Cylinder
- Dodecahedron
- Icosahedron
- Image
- InstancedMesh
- Lathe
- Octahedron
- Plane
- Polyhedron
- Ring
- Sphere
- Sprite
- Tetrahedron
- Text
- Torus
- TorusKnot
- Tube
- ...
Post Processing
- EffectComposer
  - BokehPass
  - FilmPass
  - HalftonePass
  - Renderpass
  - UnrealBloomPass
  - ...
...

Installation

yarn add troisjs

Vue plugin

import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);

PoC

I first made a simple Proof of Concept, take a look at Example1.vue :

<template>
  <Renderer ref="renderer">
    <Camera :position="{ z: 100 }" />
    <LambertMaterial id="material" />
    <Scene>
      <PointLight :position="{ y: 50, z: 50 }" />
      <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material-id="material" />
    </Scene>
  </Renderer>
</template>

<script>
export default {
  mounted() {
    const renderer = this.$refs.renderer;
    const box = this.$refs.box.mesh;

    renderer.onBeforeRender(() => {
      box.rotation.x += 0.01;
    });
  },
};
</script>

InstancedMesh

Take a look at :

GLTF

Take a look at DemoGLTF.vue.

<GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
  <AmbientLight />
</GLTFViewer>

Dev

git clone https://github.com/troisjs/trois
cd trois
yarn
yarn dev

3.1 KiB Raw Blame History