Experimenting with Three.js: Devlog #2

Before you read it
This is not a tutorial and I am not a Three.js expert. I am going to document my learning journey and share it with you. If you find it useful then I would appreciate you leaving a comment or liking this post. Thanks and let's get started 😎
Controls and wall collision problem
I didn't work with game dev or 3D before, so it was difficult for me to think about a solution for this.
My initial thought was to create enough if statements that would prevent the camera from passing throw walls (it was a super dummy idea πŸ˜…).
After struggling with it for some time, I discovered that there is a much easier and better solution for this.
Introducing physics
I found this wonderful answer to my problem on Stackoverflow:
It sounds way better than adding an infinite number of if statements πŸ€”
In easier words, it means that the viewer is a ball and if it will collide with the wall then physics will do its job 😱
As Einstein once said:
Einstein quote
(or something like that).
Using use-cannon
There is a great library for handling physics use-cannon.
I defined walls using useBox hook and sphere using useSphere. Here is the result:
For debug purposes, I used Debug component
Applying camera to the sphere
The last and most challenging part is to add the camera to the sphere.
I was lucky to find this tutorial: https://www.youtube.com/watch?v=ZnXKmODEFHA
I won't write in detail how it is done, because you can check it on your now πŸ˜‰ But basically it just subscribing to sphere/ball position and setting the camera to that place.
And it is done πŸŽ‰
Here is how it looks all together:
It looks like something basic on this video, but it felt soooo good to hit that wall and be stoped by the laws of physics 😍
You might think that we are finished with controls and can move on to more advanced stuff. Not really...
Thanks for reading! πŸ™Œ

26

This website collects cookies to deliver better user experience

Experimenting with Three.js: Devlog #2