CODEWITHSUNDEEP
javascriptthree.js
lviggiani
lviggiani

Reputation: 6066

Implementing a fly around camera with three.js

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?

Upvotes: 1

Views: 3888

Answers (2)

WestLangley
WestLangley

Reputation: 104783

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

Upvotes: 3

user1329695
user1329695

Reputation:

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.

Upvotes: 1

Related Questions