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

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.

• HMR
  • Scene : add or remove objects (lights, meshes)
  • PerspectiveCamera : aspect, far, fov, near, position
  • Light : castShadow, color, intensity, position, target
    • SpotLight : angle, decay, distance, penumbra
    • ...
  • Material : color, depthTest, depthWrite, fog, opacity, transparent
    • StandardMaterial : emissive, emissiveIntensity, metalness, roughness
    • ...
  • Mesh : materialId, position, rotation, scale, castShadow, receiveShadow
    • Box (geometry replace) : size, width, height, depth
    • Plane (geometry replace) : width, height, widthSegments, heightSegments
    • Sphere (geometry replace) : radius, widthSegments, heightSegments
    • Text (geometry replace) : all props except fontSrc (wip)
    • ...
  • PostProcessing
    • BokehPass : focus, aperture, maxblur
    • FilmPass : noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale
    • HalftonePass : shape, radius, rotateR, rotateG, rotateB, scatter
    • UnrealBloomPass : strength, radius, threshold
    • ...
  • ...

Features

• Lights
  • AmbientLight
  • DirectionalLight
  • PointLight
  • SpotLight
  • ...
• Materials
  • Basic
  • Lambert
  • Phong
  • Standard
  • Physical
  • SubSurface
  • ...
• Geometries
  • Box
  • Circle
  • Cone
  • Cylinder
  • Dodecahedron
  • Icosahedron
  • Lathe
  • Octahedron
  • Polyhedron
  • Ring
  • Sphere
  • Tetrahedron
  • Torus
  • TorusKnot
  • Tube
  • ...
• Meshes
  • Box
  • Circle
  • Cone
  • Cylinder
  • Dodecahedron
  • Icosahedron
  • Image (wip)
  • 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 Demo1.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="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 Demo2.vue.

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