Creating my first Interactive 3D Portfolio Website with Cannon.js

My personal website, ECSpace, is a unique and immersive experience that combines the interactive capabilities of Three.js and the realistic physics of Cannon.js. By bringing these two technologies together, I was able to create a game-like environment that offers a dynamic and engaging user experience. From the design of the website UI using Figma and Procreate, to the creation of 3D model assets and character animations using Blender, every aspect of ECSpace has been carefully crafted to provide a memorable and interactive experience for users. The website also features a physics world built with Cannon.js, as well as GLSL shaders for rendering stars and a loading page and component motions generated using GSAP. I am proud of the creativity and attention to detail that I brought to this project, and am excited to share it with others. :partying_face:

[ECSpace] :link:(



It is cute. I enjoyed walking on the surface … and felt as if I am the Saint-Exupéry’s Petit Prince.

BTW in Firefox I can see just a black window with the [H] button (which does nothing). There are no errors in the console. In Chrome the site works perfectly, I can walk and [H] shows the help panel. See a snapshot from my Firefox:

– Pavel

1 Like

Thanks Pavel! Glad you like my work!
Emm… that’s weird. I just tested on my firefox. It seems working fine there :sweat_smile:
Does the loading page showed up at the beginning?

1 Like

Yes –

The issue appears only when the laptop is plugged in (then it uses NVIDIA GeForce GTX 1660 Ti). See the attached video. When the laptop runs on batteries then it uses the Intel UHD Graphics 630 and there is no problem.

– Pavel

1 Like

Oh it seems like the “canvas” doesn’t show up.
I will see if I can find a laptop reproducing this issue.
Thanks for letting me know Pavel! Glad you noticed it :wink:

I feel dizzy when it bounces of from to space back to the globe HAHHAHAHA

Me too :joy: