Chapter 5— ThreeJs with Vue

In this article, I will be showing you how I had different thought about organizing my code with threejs, and I'll use a simple cube as an example.

Whats up?

For several weeks I tried several ways to organize a Threejs application with Vuejs, the first way is to instantiate Threejs objects when a component is called in the template, the other method is to do it in a javascript class. Together we’ll see both approch and give you my opinion.

Instanciate in Vue component

As I said in earlier chapters, (if you didn't reed them you might want to check them out 😜), I had more experience with ThreeJs when using it in React, and especially with a library called r3f which greatly facilitates the creation and manipulation of 3d objects with a declarative way. We can for example create a cube without even knowing the Threejs syntax to create it.

Here is how you would create a box in Threejs and adding events on it when using r3f.

<mesh
{...props}
ref={ref}
scale={clicked ? 1.5 : 1}
onClick={(event) => click(!clicked)}
onPointerOver={(event) => hover(true)}
onPointerOut={(event) => hover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>

Pretty cool right.

Anyway,
When I started my projet, I was also thinking about this approch here is what I have been doing at first :

Insibe my <Cube /> component I basically create my cube and rotate it when my component is mounted inside my view. This approch looks very similar to the r3f in the sense that if I want to add my cube to the scene, I just have to call it that way inside my index.vue page

I find some pros and cons about this approch.
The pros are that I find it very clear what is does when the component mount and unmount, and I dont have to handle the unmount by calling a method to do so.
Also if I needed to change the color or the size of my cube for example, I could add props that are easy for the mind to understand what is does.
On the other hand, the cons are that if I want to change the component state from another page or another state of the application, I would need to do some props drilling, emit, or store mutation to change the state of my component which can be a real pain in the a** in large application.

After asking out to other developers and looking at different projects made with Vue & Threejs, I found out that no one was doing it like like that. They were always using javascript class to create objects.

Instanciate with javascript Class

Now we're are going to talk about the javascript class approach, that I'll probably do in my future projects.

Here is how my <Cube /> would look like when written as a Class :

The code looks pretty much the same, the constructor is equivalent to the onMounted method inside a Vue component, and to handle the unmount I need to declare a method that will handle it when being called from outside of the class.

Then the class can be instanciated that way, also using component's lifecycle to trigger the mount & unmount of the class.

My thoughts?

Unfortunatly I wasn't able to find enough discussion about these two approchs and their pros & cons, but after doing both ways I feel like the class approach gives me a lot more flexibility to handle my 3d objects in larger projects with a lot more objects to instantiate. However I find that the component approach very interesting in smaller projects, it's still thing I could do in some cases.

The results

And here is what the cube code does btw

What’s next?

In the next chapter I'll be telling you why the project has not progressed as quickly as expected..

Previous Chapt: Chapter 4- Init Nuxt 3 App
Next Chapt : Chapter 5- The delusion

Unlisted

--

--

--

Creative Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Inertia.js — Build a Single Page Application without API

React Hook -Giving superpowers to functional components

LitElement To Do App

Moleculer v0.14 — Making Microservices Accessible for Everyone

DAY 9 OF GEEKS FOR GEEKS 30DAYSOFCODE

Google Analytics with Flutter Web

Let’s Talk Retro…

Route, Router & Link in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store