Problem in preventing pointer lock controls from moving through meshes in React.js

Questions
1

I am new to THREE.js and I am trying to implement pointer lock controls using React.js. My pointer lock controls are working fine, but I don’t know how to prevent pointer lock controls from passing through meshes present in the scene. Please help.

Link to the project Repository-

2

Do you mean collision detection?

3

Yes Collision Detection

4

Since three is just a rendering framework and pointer lock controls don’t include collision, you may need to write it yourself (either using Box3, simple 2D vector comparison, or ammo.js - these are ordered by complexity, so if you’re unfamiliar with vector math, I’d go with Box3 intersections, and simulate camera position as a sphere / box3 around it.)

Also, see this thread and @Mugen87’s suggesions.

5

Thanks for help. But i am really a beginner in understanding this stuff. It will be a great help if you can help with the code in the above repository.

6

Try looking at how the official pointer lock controls example stops you from falling through the floor or ‘objects’ by using a raycaster and if statements. As I understand this is / can be the least performant method but fairly simply to implement. (Depending what you need).

Another option is to search for AABB or similar bounding box / sphere collision examples. I haven’t implemented this so can’t help.

Another method is using something like ammo.js or cannon.js (physics engines) to do most of the hard work. I chose against this option because I felt like it did ‘too much’ for what I needed. Maybe it was stubbornness.

Google these things and they might be helpful, good luck :+1: