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

伊维贾尼

我是Three.js的新手,我想为自己的场景创建一个可旋转的相机。

我已经看到THREE.Geometry具有.computeBoundingSphere()方法和.boundingSphere属性,这些方法和属性为我提供了该对象边界球的中心和半径。假设我的场景中只有一个网格,我可以用scene.children[0].computeBoundingSphere

这个想法是用来.boundingSphere.center设置myCamera.lookAt和使用我的视角.boundingSphere.center.boundingSphere.radius与Math.sin / cos一起设置myCamera位置。

问题1:这是最好的方法吗,或者Three.js是否为此范围提供了任何特殊的类或帮助器?

问题2:如果我的场景包含多个网格并且我想要一个全局场景boundingSphere,该怎么办?我是否手动遍历了所有对象scene.children(跳过摄像机,灯光等)并以数学方式创建了单个网格物体的boundingSphere的“ boundingSphere”,还是有一种更聪明的方法来做到这一点?是否可以添加一个“根”虚拟对象,该对象包含我所有的场景网格并由于其所有子元素boundingSpheres而获得其boundingSphere?

西兰吉

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

Box3.setFromObject( object ) 将计算一个对象(包括其子对象)的与世界轴对齐的边界框,同时考虑到该对象和子对象的世界变换。

在边界框中,您可以确定相机的放置位置。有关该主题的更多信息,请参见如何使相机适合对象

编辑-在您的情况下,object将是您的“根”父母Object3D如果您想要一个边界球,则可以使用以下模式:

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

three.js r.64

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

自由飞行相机-绕X轴奇怪的旋转

来自分类Dev

自由飞行相机-绕X轴奇怪的旋转

来自分类Dev

使用Three.js在本地轴上旋转相机X

来自分类Dev

使用jQuery在HTML中实现飞行效果

来自分类常见问题

使用THREE.js TransformControls

来自分类Dev

使用THREE.js TransformControls

来自分类Dev

Three.js相机的理解

来自分类Dev

在three.js中绕圆旋转线

来自分类Dev

Three.js-如何使用Three.js冒烟?

来自分类Dev

Three.js-关于(使用)THREE.BufferGeometry的问题

来自分类Dev

如何在three.js中使用Three.Triangle()

来自分类Dev

使用slerp旋转时补间相机位置-THREE.js

来自分类Dev

在Three.js中使用轨道控制旋转相机时发生奇怪的晃动

来自分类Dev

Three.js使用正交相机将2D映射到3D

来自分类Dev

如何仅使用脚本在Three.js / Editor中更改相机?

来自分类Dev

使用正交相机从鼠标位置获取Three.js世界坐标

来自分类Dev

Three.js - 如何使用矢量使具有不同位置的对象看正交相机?

来自分类Dev

使用 OrbitControl 进行缩放后,THREE.js 正交相机位置未更新

来自分类Dev

Three.js移动相机或两个不同的相机

来自分类Dev

Three.js使用framebuffer作为纹理

来自分类Dev

使用Three.js进行纹理喷涂

来自分类Dev

在three.js中使用jquery

来自分类Dev

使用three.js使对象部分透明

来自分类Dev

在three.js中使用renderOrder

来自分类Dev

无法使用Three.js加载动画

来自分类Dev

使用THREE.js的VSCode设置

来自分类Dev

使用three.js设置透明背景

来自分类Dev

使用Three.js加载Maya模型

来自分类Dev

在three.js中使用renderOrder