7

I am trying to limit the camera position movements to specific areas defined by a 3D object/objects children. For example, if I had a walkway object on the ocean and I only wanted my user to be able to move the camera forward and backward on that walkway. Similar to a first person controller navigation mesh in Unity but without the AI aspects.

I would enjoy an AFrame based solution, but I do not mind writing a custom component if there is a THREE js solution.

Thank you!

cnzac
  • 435
  • 3
  • 13
  • In the old days, there was this Three.js component called *PathControls* that implemented a fair bit of this functionality. See http://stackoverflow.com/questions/23443110/how-to-move-camera-along-a-simple-path . That component is no longer available though. – Paul-Jan Feb 19 '17 at 06:35

1 Answers1

4

you can create a THREE.Box3 to get the boundaries of the 3D object/objects children by:

 var box = new THREE.Box3();
 box.setFromObject(yourObject);

Inside the first person controller you can check if the camera is out of bounds:

if(camera.position.x > box.max.x){
    camera.position.x = box.max.x;
}

if(camera.position.x < box.min.x){
    camera.position.x = box.max.x;
}

if(camera.position.z > box.max.z){
    camera.position.z = box.max.z;
}

if(camera.position.z < box.min.z){
    camera.position.z = box.max.z;
}

I hope it will be helpful

Aasha joney
  • 508
  • 5
  • 23
Normal
  • 528
  • 4
  • 19
  • This is how I ended up doing it anyway. This works for a simple shape like a box but it is much more difficult if we have a custom shape. – cnzac Feb 19 '17 at 21:09
  • I have a suggestion for complex shapes. I used it once: create a height map. a bitmap in B&W that represents where there is a limit – Normal Feb 19 '17 at 21:28