I've been recently trying to fix my collision detection in my first person shooter three.js game but there are a few issues left I have not even the slightest idea on how to fix...

• The camera can view inside walls
• The collisions regularly push the player outside of the map

I have a jsfiddle available here: /

And I have also received a little advice on the three.js subreddit under the post...

"Use of the "stemkoski" collision detection?"

I thank you in advance for your time, and thanks to /u/stovenn for his help in my reddit post.

I've been recently trying to fix my collision detection in my first person shooter three.js game but there are a few issues left I have not even the slightest idea on how to fix...

• The camera can view inside walls
• The collisions regularly push the player outside of the map

I have a jsfiddle available here: http://jsfiddle/sxv5fwL4/95/

And I have also received a little advice on the three.js subreddit under the post...

"Use of the "stemkoski" collision detection?"

I thank you in advance for your time, and thanks to /u/stovenn for his help in my reddit post.

• javascript
• html
• three.js
• collision
• detection

• Would it not be wiser to use bounding boxes for something like this? – Wilt Commented Mar 2, 2016 at 13:14
• @Wilt Yes, the new version below uses bounding boxes I do believe. steveOw really did manage to do a great job at helping me with the issues I was having. – Andreas Elia Commented Mar 5, 2016 at 20:44

3 Answers 3

i think /u/stovenn talked about this git http://stemkoski.github.io/Three.js/

According to the thread How to detect collision in three.js? in the stemkoski git is a working example for a collision detection in three.js

This jsfiddle0 (see end of answer for updated versions) is a hacked version of the one cited. There was a problem with the Map which I have addressed by reading it as [u][v] and mapping Edit: (u-->z and v-->x). Now the layout of the map in the code is the same as the layout of the map in the simulation.

I have used a very simple "(2D) Point in Bounding Box" collision test. It is based on testing whether the proposed new position of the player at each animation step locates inside the x-range and z-range of a wall cube. If it does then the proposed position is rejected and the (stored) previous position of the player is re-instated.

Here is the core code:-

if (   tile_x_min <= player_pos_x && player_pos_x <= tile_x_max
    && tile_z_min <= player_pos_z && player_pos_z <= tile_z_max )                              
{
collision_flag = true;
player.velocity.x = 0;
player.velocity.z = 0; 
Message = "IN Wall Cell [" + x + "," + z +  "]" +
"(x:" + tile_pos_x + ", z:" + tile_pos_z + ")";                                           
}   

I have used a little helper cube ("eddie") at the player position and moved the camera back a bit to make it visible. This helped a lot in troubleshooting glitches.

Anyway give it a try if you like and let me know how it goes.

Edit(1) jsfiddle1 Adds simple rotation of the player/camera. Use keys numpad_7 and numpad_9 to rotate left and right.

Edit (2) jsfiddle2 responds to multiple keys being pressed at the same time. Also the eddie cube is hidden by using eddie.visible = false.

Edit(3) jsfiddle3 Added independent camera rotation: up-centre-down (use Numpad keys 2,5,8). Player+camera horizontal rotation is by Numpad keys 4,6.

I am using Ammo.js, an emscripten port of the great Bullet Physics Library. This is a professional, open source, collection detection library.

Here is a sample I created: physics.autodesk.io

Could be useful to somebody.