Kayos clone


Create a game like Kayos , with three js, in a few basic steps. There is one core game mechanic to recreate, avoid collision. Therefore we need a strong collision detection and proper player movement. Both are easy to implement with three js.
First, we set up a basic three js scene with a point-light and a white colored ground plane. After that we load a 3d model which was created in Blender and exported to a json format. Now we set up the level, which are 20 randomly placed cubes on the ground plane. Each of these cubes has a box collider attached to it, which will be used for a first basic collision detection. Once a collision occurs on this box collider a second more precise ray caster collision detection will detect any further collision. Finally each of these cubes is moved towards the player while on each frame a collision detection occurs.

play the prototype

 

concept

Debug mode with slow motion and collision cage visualization

 

init three js render

add ground Plane and model

add level

collision detection

keyboard and mobile input

render tick

full script

 

conclusion

It’s fairly simple to create proper and fast collision detection in three js, this makes it possible to recreate the core game mechanic in a few lines of code. All in all we ended up with a simple script which can handle one level, collision detection and a reset function.
The script could easily be enhanced and improved to create a full game experience. The prototype works fast across mobile and desktop devices, and is easy to recreate.