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

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-

Do you mean collision detection?

Yes Collision Detection

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.

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.

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: