My tutored introduction to threejs

Posted on Jun 4, 2021

For this week, I’m going to present the project I realized as a end of course evaluation to my threeJs introduction in class by the excellent Denis Labaste, head developper of the company Feelity.

The context of the project

It was a project that I had to complete at the beginning of my third year of university, we had something like two months to work on it.

We had three or four courses of 4 hours, completely guided to produce a small prototype with three statues that once hovered displayed a small animation.

Main scene statue explosion demo

In this scene we practiced mesh, texture, camera usage, shadows, shapes, importing 3D assets, instancing, moving objects, raytracing to know where the mouse is pointing at…

Even if we were encouraged to get creative we were only required to do at minimum the basic scene to get very good grades…
I had a lot of fun but went a little overboard with my ambitions on this project.

My interpretation

I completed the first basic scene pretty fast. I then discussed of what I could add with my tutor. The first thing that popped in his mind is adding physics

If I remember correctly he proposed jokingly to add some kind of gun that would shoot balls at the scene and bounce off of the objects in the scene.

It took this as a challenge without much thinking of the feasibility of the idea.

In the end it went pretty well I think, I’ll let you be the judge.

Details on the project

The main scene was a given, it was the subject of the in-class TPs, pretty straightforward.

The part where I struggled was the physics, finding the correct engine was difficult, many have convincing arguments, in the end I chose phisyjs by the amazing chandler prall, the main reason being : it uses the naming and architecture conventions of threejs, which is very pleasant.

A second interesting reason is that the physics computations run in a different thread and don’t impact too much on the 3D rendering fluidness (made up this word) of the main scene.

This engine is built on top of the ammoJs engine which is himself a port of bullet, the C++ physics engine.

With my newly found physics toy I went in completely naively without prior planning (generally not a good idea).

To implement physics I created a second scene in parallel of the main with exactly the same objects, with dynamic behavior for the new balls objects that bounce around and static for the statues and floor.

To start the balls raining I added a button with a bouncy animation with the library tweenJs, very pleasing to use and intuitive.

Once I added the bouncy balls to the main scene I created a second scene that play the role of an introduction to the project in the form of a 3D platformer. In this introduction scene you play the role of a small white square and jump up on brightly coloured platforms to reach the top, where my name pop from the sides and a button to access the next “main” scene appear.

This intro scene was added because I wanted to make something more interactive than a simple button that spawn bouncy balls.

Introduciton scene

You can actually see the online project here.

It was the first ever project that I “deployed” through github pages and the first ever website only by me distributed to the world !

Everything is poorly optimized, I have very little knowledge of the tricks I could use to make everything smoother.

I fell in love with threeJs in this project and plan to use it more in the future, but before that I need a more thorough formation like the one provided by Bruno Simon here, Bruno Simon is the guy who made this.

What I did to make it work

You can edit the project with the IDE of your choice, WebStorm or VSCode are advised here as there is a lot of JS.

I believe everything is bundled in the github repo, even the huge threeJs lib, good thing because I think that the version I use is now completely outdated.

To run the project you can directly put the index.html in your prefered (not too old please) browser.

You can also run a local server from the root folder of the project with the following command (if you have php installed) : php -S localhost:8080

The full project is accessible here.