1

I'm new to Three.js and I would like to create a fly-around camera to my scene.

I've see that THREE.Geometry has .computeBoundingSphere() method and .boundingSphere propetry that gives me the center and the radious of that object bounding sphere. Supposing I only have one mesh in my scene, I can get it with scene.children[0].computeBoundingSphere

The idea is to use .boundingSphere.center to set myCamera.lookAt and use .boundingSphere.center and .boundingSphere.radius with Math.sin/cos of my viewing angle to set myCamera position.

Question No.1: is this the best way to proceed or does Three.js provides any special classes or helpers for that scope?

Question No.2: what if my scene contains more than a mesh and I want a global scene boundingSphere? Do I have manually iterate through all scene.children (skip camera, lights etc) and mathematically create a "boundingSphere" of single meshes' boundingSphere or is there a smarter way to do that? Is that possible to add a "root" dummy object which contains all my scene meshes and get its boundingSphere as a result of all it's children boundingSpheres?

lviggiani
  • 5,824
  • 12
  • 56
  • 89

2 Answers2

3

three.js provides several examples of camera controls. OrbitControls or TrackballControls are likely what you are looking for.

Box3.setFromObject( object ) will compute the world-axis-aligned bounding box of an object (including its children) accounting for both the object's, and children's, world transforms.

From the bounding box, you can determine where to set your camera. For more on that topic, see How to Fit Camera to Object.

EDIT - In your case, object would be your "root" parent Object3D. If you want a bounding sphere, then you would use this pattern:

var sphere = new THREE.Box3().setFromObject( object ).getBoundingSphere();

three.js r.64

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • Hi, thanks! One doubt: documentation (http://threejs.org/docs/#Reference/Math/Box3) doesn't list the method you mentioned, however looking into source (https://github.com/mrdoob/three.js/blob/master/src/math/Box3.js) the method is there. So how up-to-date the documentation is? I've found also the getBoundingSphere method of Box3 that in combination with setFromObject might do the trick. I'll try that out and come back. Thanks! – lviggiani Jan 07 '14 at 20:21
  • The documentation is slowly coming along. I highly suggest that you always read the source. – WestLangley Jan 07 '14 at 20:43
  • new THREE.Box3().setFromObject(objects).getBoundingSphere(); does the trick assuming that "objects" is a THREE.Object3D container of all my scene meshes – lviggiani Jan 08 '14 at 07:43
1

Did you take a look at the sample controls located at https://github.com/mrdoob/three.js/tree/master/examples/js/controls ? It might be easier to use/hack one of the samples than creating your own from scratch.

  • I looked at this: http://threejs.org/examples/#misc_controls_orbit which seems the closest to my need. However it places the camera at a fixed distance (line 63) that is not computed basing on scene bounding sphere... – lviggiani Jan 07 '14 at 15:47