troisjs/trois

★ 4,492TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((troisjs))
    What it does
      Vue 3D components
      Wraps Three.js
    Visual effects
      Physics simulations
      Particle trails
      Post-processing
      Shadows
    Usage
      CDN or npm install
      Vue template tags
    Tech
      TypeScript
      Vite build tool
    Audience
      Vue developers
      Creative coders

mindmap root((troisjs)) What it does Vue 3D components Wraps Three.js Visual effects Physics simulations Particle trails Post-processing Shadows Usage CDN or npm install Vue template tags Tech TypeScript Vite build tool Audience Vue developers Creative coders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add an animated 3D product model to a Vue marketing page without writing raw Three.js code.

USE CASE 2

Build an interactive 3D data visualization using Vue component syntax for lights, cameras, and geometry.

USE CASE 3

Prototype visual effects like particle trails, water, and depth-of-field post-processing inside a Vue project.

USE CASE 4

Learn Three.js concepts by writing declarative component tags rather than imperative API calls.

Tech stack

TypeScriptVue.jsThree.jsVite

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

TroisJS is a library that lets you add 3D graphics to web pages using a Vue.js component syntax. Vue.js is a JavaScript framework for building web interfaces where you structure the page using reusable building blocks called components. TroisJS takes Three.js, a popular 3D graphics library for the web, and wraps it so that you can describe 3D scenes using the same component style that Vue developers already know. The name "Trois" is French for "three," a nod to Three.js. The project was created by the author as a Vue equivalent of react-three-fiber, which does the same thing for a different JavaScript framework called React. In practice, instead of writing JavaScript calls to create a 3D box and put it in a scene, you write tags like <box> and <scene> in your Vue template, similar to writing HTML. The library translates those tags into the underlying Three.js calls. A code example in the README shows a rotating 3D box set up in roughly 20 lines of HTML and script, including lighting and camera controls. You can use it by loading it from a CDN (a web address, no installation needed) or by installing it as a package in a Vue project. The project uses Vite, a build tool, for development and packaging. Examples in the README and on the project's website show physics simulations, water effects, particle trails, depth-of-field post-processing, shadows, and general 3D scenes. Documentation and examples are available on the project's website, though the README describes both as works in progress. The project has a small group of sponsors and contributors listed in the README.

Copy-paste prompts

Prompt 1

Using TroisJS components in a Vue 3 project, set up a rotating 3D cube with ambient lighting, a perspective camera, and mouse-controlled orbit controls.

Prompt 2

Show me a TroisJS scene that renders a particle system with a trail effect, structured as Vue single-file components.

Prompt 3

I want to add a 3D animated background to my Vue landing page using TroisJS. Give me the minimal setup with a renderer, camera, and a sphere with a metallic-looking material.

Open on GitHub → Explain another repo

← troisjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.