gpt4 book ai didi

javascript - 如何围绕对象旋转 THREE.PerspectiveCamera

转载 作者:搜寻专家 更新时间:2023-11-01 04:16:35 26 4
gpt4 key购买 nike

我正在制作这个程序,您可以在其中单击一个对象,对其进行缩放,然后通过按住鼠标右键并拖动从各个 Angular 查看它。我需要相机围绕物体移动,而不是在相机看着它的情况下旋转物体。老实说,我只是不知道如何算出来!

为了测试,已经有一个带有我们选择并正在查看的 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 所提到的,轨迹球控制是开始使用许多可配置参数以使相机旋转/公转变得容易的最佳起点。这种方法(特别是对于您的项目)的一个巨大潜在好处是避免了“万向节锁定”,这是使用旋转时令人沮丧的根源。以下链接可能会帮助您使用轨迹球控件和轨道控件:

Rotate camera in Three.js with mouse

另一种选择是在动画循环中自己设置相机坐标,这实际上非常简单:

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

如果您选择此选项,请注意相机对象位于“相机枢轴空间”中,进一步操作可能更具挑战性。

关于javascript - 如何围绕对象旋转 THREE.PerspectiveCamera,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27095251/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com