Three.js collision detection optimization with raycasting

Question

I'm just looking for someone to point me in the right direction. My Google-fu is failing me.

I'm working on a WebGL game, and I'm using raycasting for collision detection. I'm using Clara.io to create levels. I'm using THREE.ObjectLoader() to load the scenes. What I'd like to do is split the scenes I've made into smaller parts so as to not have to do raycasting on all vertices in the level. I'd like to not have to split the level mesh into tiny pieces inside of Clara for isolated raycasting, but instead do it within the game itself.

How do I go about only doing raycasting on a small section of a mesh? Is there a tutorial that anyone knows about or an example? I've chosen to not use heightmaps or any physics libraries.

Thank you in advance!

Answer 1

The problem of finding out which parts of mesh are relevant is usually solved using some sort of space partitioning algorithm. A relatively simple but effective approach for a static mesh is using an Octree .

A Three.js - specific implementation of an Octree (by Collin Hover) can be found here . You can either use it directly or take some inspiration from it to write your own.