How to create your game in JS?

Question

JavaScript

Hello.
The idea to write one toy, something like agario, stuck in my head.
I know native JS, but I've only used it in website creation, never used canvas, etc.
Here's what I would like to implement:
1) City. Yes, it will be a map with houses, etc.
2) Characters who will actually run around the streets.
So, in fact, the game will be in 3D, on which engine can this be implemented? How to integrate textures into a map?
How to implement such a system so that the character does not pass through the textures?
Yes, I understand that in fact I am asking for a ready-made resource, but no! Please help me find the correct documentation, which describes these algorithms for creating games. I will be very grateful!

Answer 1

The de facto standard for developing 3d games in JS library is threeJS https://threejs.org/ It simplifies working with webgl and has only the essentials for creating a world - scenegraph, cameras, lights, texture stretching on 3d models. The library has a large community and many textbooks online. To prevent the character from passing through textures is called collision detection. ThreeJS implements only the most basic tool for this - the Raycaster class. Built on the same routines as raytracer And in order not to check the intersections of each with each, you will need to learn about the quadtree data structure, for example. There is no built-in physics engine in the library, it is assumed that you will use it according to your choice. To write on this library, you will need to pump up the skill of game making, but it is fast.
If you want more out of the box, take the framework. For example, Babylon.js www.babylonjs.com is deservedly popular. The entry curve is lower, there are more built-in tools (for example, a physics engine and skeletal animation), but it works slower and eats more computing resources. There are plenty of tutorials on the net too.