如何旋转三.透视对象周围的摄像机
How to rotate a THREE.PerspectiveCamera around on object
我正在制作这个程序,您可以在其中单击一个对象,缩放到它,然后通过按住鼠标右键并拖动从各个角度查看它。我需要相机围绕物体移动,而不是在相机看着物体的情况下旋转物体。老实说,我只是不知道如何计算它!
为了进行测试,已经有一个带有 xyz 的游戏对象,我们已经选择并正在查看
var g = new GameObject(500, 0, 0);//The game object with xyz
this.selected = g;//set selected to g
//Create and set the camera
this.camera = new THREE.PerspectiveCamera(45, w/h, 1, 10000);
this.camera.position.x = 0;
this.camera.position.y = 0;
this.camera.position.z = 0;
//set camera to look at the object which is 500 away in the x direction
this.camera.lookAt(new THREE.Vector3(this.selected.x, this.selected.y, this.selected.z));
因此,相机和对象之间的半径为 500,并且在选择和旋转时,相机应始终在 500 之外。
我在这里更新场景:
Main.prototype.update = function(){
this.renderer.render(this.scene, this.camera);//scene is just some ambient lighting
//what to do when mouse right is held down
if(this.rightMouseDown){
//placeholder functionality, needs to rotate around object based on mouse movements
this.camera.position.x -= 5;
}
}
如何以 500 的半径围绕 g 旋转此相机?!?!
正如 gaitat 所提到的,轨迹球控制是使用许多可配置参数开始的最佳位置,以使摄像机旋转/旋转变得容易。这种方法的一个巨大潜在好处(特别是对于你的项目)是避免"万向节锁定",这是使用旋转时很多挫败感的来源。以下链接可能会对轨迹球控件和轨道控件有所帮助:
用鼠标旋转相机三.js
另一种选择是在动画循环中自己设置摄像机坐标,这实际上非常简单:
var angle = 0;
var radius = 500;
function animate() {
...
// Use Math.cos and Math.sin to set camera X and Z values based on angle.
camera.position.x = radius * Math.cos( angle );
camera.position.z = radius * Math.sin( angle );
angle += 0.01;
...
}
另一种选择是将相机连接到枢轴对象,然后旋转枢轴:
var camera_pivot = new THREE.Object3D()
var Y_AXIS = new THREE.Vector3( 0, 1, 0 );
scene.add( camera_pivot );
camera_pivot.add( camera );
camera.position.set( 500, 0, 0 );
camera.lookAt( camera_pivot.position );
...
camera_pivot.rotateOnAxis( Y_AXIS, 0.01 ); // radians
如果选择此选项,请注意相机对象位于"相机枢轴空间"中,并且进一步操作可能更具挑战性。
相关文章:
- 引用对象中的通用值
- jQuery匹配JSON对象的部分文本
- 节点导出返回一个空对象
- 如何在Javascript中将JSon对象转换为数组
- 我可以在json对象中添加一个函数吗
- 使用JS将数组转换为json对象
- 全局变量和全局对象的属性之间有什么区别吗
- 比较从函数和生成的日期对象
- Javascript,访问一个主要对象模块模式中的每个对象
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何使用json将对象列表从java转换为javascript
- 序列化数据属性中对象的最可靠方法
- 如何访问声音管理器2创建的声音对象
- FabricJs-限制主对象内添加对象的移动区域
- Javascript(Angular)从一个对象数组到第二个数组查找值
- 使用 jQuery 创建透视对象
- 如何旋转三.透视对象周围的摄像机
- 如何在 JavaScript 中透视对象数组