Threejs围绕Y

Question

我对这一点感到困惑：S

我创建了一个代码，我的相机可以“完成”他的工作。我的意思是我可以用我的鼠标移动事件将相机旋转半圈，但目标是整个圆圈：）

onRotateCamera(event){
    if(this.cameraDragged){
      let radius:number = Math.round(Math.sqrt(this.camera.position.x * this.camera.position.x + this.camera.position.z * this.camera.position.z)*1000)/1000;
      let delta:number  = (this.cameraDragged.clientX - event.clientX) / 1000;
      let angle:number  = Math.round(Math.asin(this.camera.position.z/radius)*1000)/1000;

      angle += delta;
      this.camera.position.x = Math.round(radius * Math.cos( angle )*1000)/1000;
      this.camera.position.z = Math.round(radius * Math.sin( angle )*1000)/1000;
      this.camera.lookAt(this.scene.position);
    }
  }

当this.camera.position.z / radius为-1或1时，相机移动停止 有人可以帮我这个吗？：）

Answer 1

如果您想绕轴旋转，为什么不尝试使用Quaternion：

camera.position.applyQuaternion( new THREE.Quaternion().setFromAxisAngle
    new THREE.Vector3( 0, 1, 0 ), // The positive y-axis
    RADIAN / 1000 * delta // The amount of rotation to apply this time
));
camera.lookAt( scene.position );

以上将围绕Y轴创建rotation（定义为quaternion），并且每1000 delta发生一次完整旋转（可能是毫秒或像素，任何一种方式的阻力。下面是一个示例实现：

var renderer = new THREE.WebGLRenderer;
var scene = new THREE.Scene;
var camera = new THREE.PerspectiveCamera;
var last = false;
var quaternion = new THREE.Quaternion;
var axis = new THREE.Vector3( 0, 1, 0 );

renderer.domElement.addEventListener( 'mousedown', event => {
	
  last = new THREE.Vector2( event.clientX, event.clientY );

});
	
renderer.domElement.addEventListener( 'mousemove', event => {
  
  if( last ){
    
    let delta = event.clientX - last.x;
    
    camera.position.applyQuaternion( quaternion.setFromAxisAngle(
      axis, Math.PI * 2 * (delta / innerWidth)
    ));
    camera.lookAt( scene.position );
    
    last.set( event.clientX, event.clientY );
    
  }
  
  renderer.render( scene, camera );
  
});

renderer.domElement.addEventListener( 'mouseup', event => {
	
  last = false;

});

scene.add( new THREE.Mesh( new THREE.BoxGeometry, new THREE.MeshBasicMaterial ) );
scene.add( new THREE.AxesHelper );

renderer.setSize( 512, 512 );

camera.position.set( 0, 0, 5 );

renderer.render( scene, camera );

document.body.appendChild( renderer.domElement );

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>