使用three.js实现围绕相机的飞行

时间:2014-01-07 15:29:42

标签: javascript three.js

我是Three.js的新手,我想在我的场景中创建一个飞行相机。

我已经看到THREE.Geometry有.computeBoundingSphere()方法和.boundingSphere propetry,它给了我对象边界球体的中心和辐射。 假设我的场景中只有一个网格,我可以使用scene.children[0].computeBoundingSphere

来获取它

我们的想法是使用.boundingSphere.center设置myCamera.lookAt并使用.boundingSphere.center.boundingSphere.radius与我的观看角度的Math.sin / cos来设置myCamera位置。

问题1:这是继续进行的最佳方式,还是Three.js为该范围提供了特殊的课程或帮助?

问题2:如果我的场景包含多个网格并且我想要一个全局场景绑定,该怎么办?我是否手动遍历所有scene.children(跳过摄像头,灯光等)并在数学上创建单个网格的boundingSphere的“boundingSphere”或者有更聪明的方法吗?是否可以添加一个“根”虚拟对象,其中包含我的所有场景网格,并且由于它的所有子节点都绑定了它的边界?

2 个答案:

答案 0 :(得分:3)

three.js提供了几个相机控件的例子。 OrbitControlsTrackballControls可能就是你要找的东西。

Box3.setFromObject( object )将计算一个对象(包括其子对象)的世界轴对齐边界框,它会计算对象和儿童的世界变换。

在边界框中,您可以确定相机的设置位置。有关该主题的更多信息,请参阅How to Fit Camera to Object

编辑 - 在您的情况下,object将成为您的“根”父级Object3D。如果你想要一个边界球体,那么你将使用这种模式:

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

three.js r.64

答案 1 :(得分:1)

您是否看过位于https://github.com/mrdoob/three.js/tree/master/examples/js/controls的示例控件?使用/破解其中一个样本可能比从头创建自己的样本更容易。