Going 3D with Trois.js and Vue 3

Trois.js allows you to bring the 3D magic of Three.js into the modern world of Vite.js ⚡️ and Vue3 💚.

In this article, we are going to learn the basics. I will assume you have some notion about 3D before continuing. You can find the complete repo here.

yarn create vite troisjs-example --template vue

Add Trois.js to the project:

yarn add three@0.127 troisjs

You can install it as a plugin:

import { createApp } from 'vue';
import { TroisJSVuePlugin } from 'troisjs';
const app = createApp(App);
app.use(TroisJSVuePlugin);

Or importing the resources directly into your component (This enable tree shaking and typescript support):

import { defineComponent } from 'vue';
import { Box, Camera, LambertMaterial, PointLight, Renderer, Scene } from 'troisjs';
export default defineComponent({
  components: { Box, Camera, Renderer, Scene, PointLight, LambertMaterial },
});

# Core components

The more basic example const of 3 core components:

  • Render: enables to perform 3D rendering in an HTML canvas.
  • Camera: that uses perspective projection. This projection mode is designed to mimic the way the human eye sees.
  • Scene: Scenes allow you to set up what and where is to be rendered by three.js. This is where you place objects, lights and cameras.
<script lang="ts">
import {
  PointLight,
  Box,
  Camera,
  Renderer,
  Scene,
  LambertMaterial,
} from 'troisjs';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { Box, Camera, Renderer, Scene, PointLight, LambertMaterial },
});
</script>

<template>
  <Renderer resize="window" orbit-ctrl ref="renderer">
    <Camera :position="{ z: 10 }" />
    <Scene background="#4DBA87">
      <PointLight :position="{ y: 50, z: 50 }" />
      <Box ref="box">
        <LambertMaterial />
      </Box>
    </Scene>
  </Renderer>
</template>

To break down a little bit the code above, we set a Renderer component as a wrapper, we add resize="window" to make the canvas responsive, orbit-ctrl allows you to use the mouse to change the camera position (Initially on z: 10) dynamically, so you can rotate the object as you wish.

Inside Scene, we have PointLight which is a component that enables a light that gets emitted from a single point in all directions (think of it as a bare lightbulb 💡) and a Box mesh with a LambertMaterial inside as a slot (non-shiny surface without specular highlights).

Use yarn dev to see the result on the browser:

https://res.cloudinary.com/alvarosaburido/image/upload/v1633253957/blog/Going%203d%20with%20Troisjs/troisjs-cube-example.png

# Render loop

Trois.js uses the requestAnimationFrame loop under the hood to render the scene. Usually runs at 60fps.

Let's use it to give some life to the box once the scene is rendered, first of all, make sure you are referencing the renderer and the box with template refs:

<script lang="ts">
import {
  PointLight,
  Box,
  Camera,
  Renderer,
  Scene,
  LambertMaterial,
} from 'troisjs';
import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({
  setup() {
    const renderer = ref(null);
    const box = ref(null);

    onMounted(() => {
        renderer?.value?.onBeforeRender(() => {
            box.value.mesh.rotation.x += 0.01;
        });
    })

    return {
        renderer,
        box
    }
  }
};
</script>

Once we mount our host component, we will listen to the onBeforeRender event on the renderer object instance and wait for it to start rotating the box by accessing the rotation property inside the mesh.

# Conclusion

Trois.js allows you to quickly set up a 3D project with top-notch modern frontend technologies. It's pretty performant and easy to use.

Happy coding!

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Use Composition API to easily handle API requests in Vue.js

Not sure how to organize your API client in Vue.js? Learn this simple technique on how to do it using the new Composition API and make it easy.

Carlos Rodrigues

Carlos Rodrigues

Jul 6, 2020

Go async in Vue 3 with Suspense

Learn Suspense, one of the most exciting Vue 3 features used to make async request easy and interactive. Don't miss this tutorial with code snippets!

Vinicius Kiatkoski

Vinicius Kiatkoski

Jun 15, 2020

Create a i18n Plugin with Composition API in Vue.js 3

A example on how to use the inject and provide functions to create a i18n plugin using Composition API in Vue.js 3.

Alex Jover Morales

Alex Jover Morales

Feb 17, 2020

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
Learning Partner