My First Experience with Three.js

I was interested in Three.js for a long time. It was back in February when I saw Bruno Simon's 3D portfolio, where you drift through his projects and other information on a car. You should check it out afterwards if you haven't. It's amazing. At that time, I just got into learning Vue and I wanted to concentrate on getting more familiar with it than to start learning a new framework.

So a few weeks ago, I finally had time to get into Three.js. But on its own, it looked very complicated. So I checked out Trois.js. It implements Three.js into a more familiar environment of Vue.js. After some experiments, I got into brainstorming ideas. I've never done a form before, so I decided to go with this idea, but using Three.js make it more interesting for people to fill out.

With the goal set, I warmed up to the idea of having a Mystery Box which would have a form element on each side and when you fill out one side it would go to the other, until you've completed it and the box would open revealing something interesting. I had to scrap this idea after understanding that it would be pretty difficult to project a 2D element on a 3D element in the way that would look good. But I decided to stick to this topic and here's what I did.

After using my favourite research buddy Google, I found a Lucky Block model on the internet which I decided to implement beside my form. And let the camera rotate around the z-axis of the block, but to make it more interesting, I added some variables which would multiply its rotating speed by looking at how many form fields were filled out.

<template> <GltfModel src="../../assets/LuckyBlock.glb" :visible="LBvisible" /> </template> <script> data() { return { t: 0.2 } }, props: { LBvisible: Boolean, speed: Number }, mounted() { setInterval(() => { this.t += this.speed * 0.01 }, 10) } </script> 

To not waste any time designing a form, as the main target of the project was getting more familiar with Three.js, I found an existing form design on Figma (The Perfect Input Field Kit) which I then implemented into the website.

Afterwards, I assigned an event (keydown for typing inputs and change for selection inputs) to each input element in the form. Like that, I could check if the field was filled or not and speed up the rotation of the block accordingly.

Now the only thing was to add a reward that would appear out of the block. I decided to go with a cake model I found on the web. I added a simple animation which would:

• Shrink the block (aka zoom out the camera)

• Replace the block with the cake

• Enlarge the block (aka zoom in the camera)

Here's how it works:

onSubmit() { const zoomOutInterval = setInterval(() => { // Enlarge the distance between the object and the camera this.radius += 4 }, 10) setTimeout(() => { clearInterval(zoomOutInterval) // Set the rotation speed of the camera back to normal this.speed = 1 // Hide the Lucky Block this.LBvisible = false zoomIn() }, 1000) const zoomIn = () => { const zoomInInterval = setInterval(() => { // Shrink the distance between the object and the camera this.radius -= 4 }, 9) setTimeout(() => { clearInterval(zoomInInterval) // Correct the distance this.radius = 13 }, 1000) } }, 

Besides the block, the form disappears as well. Instead, you can see a little message which thanks the user for filling out the form, nothing extraordinary.

I still have some issues with the loading time for my models, which take approximately 2-3 minutes (differentiates upon the internet connection) to load. So besides the link to the website, I'll also leave a little clip which shows all the possible interactions with this website, so you don't have to wait an eternity. 😅

You can check out the website here 👉 Lucky Form

You can check out the code here 👉 Lucky Form (Code)

Finally, I just want to add that I really like this technology and I see myself using it in the future, especially for projects where 3D models are necessary. Although this technology is still fairly new and there are not a lot of good tutorials on the internet, the documentation is clear and helpful.

Thanks for reading! ♥

If you like this article, consider following me on Twitter. I post tips around web development and progress on my projects. If you have any questions, my DMs on Twitter are always open.