为什么当camera处于（0，0，0）时，camera.LookAt为什么说它绕着轴旋转-90度以查看（1、0、0）？

Question

在这里查看小提琴：https://jsfiddle.net/pkaru0xn/12/

  box.position.set(1, 0, 0);

  var camera = new THREE.PerspectiveCamera();
  camera.position.set(0, 0, 0);
  camera.lookAt(box.position);

我将立方体放置在（1、0、0）。相机位于（0，0，0）。根据{{​​3}}，相机向下看是本地的负Z轴。

因此，我希望看一下立方体，它将绕y轴旋转90度。 lookat函数如何返回-90度？为什么行得通？

Answer 1

最初，摄影机空间与世界空间对齐。这意味着相机位于Imports System.Drawing Imports System.Drawing.Printing Imports System.IO Imports System.Windows.Forms Public Class RFPrinting Inherits PrintDocument 'Output Private mCanvas As Bitmap Public Property Output As Bitmap Get Return mCanvas End Get Set(value As Bitmap) mCanvas = value End Set End Property Private Sub PrintDocument_PrintPage(ByVal sender As Object, _ ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles Me.PrintPage If mCanvas IsNot Nothing Then e = New PrintPageEventArgs(Graphics.FromImage(mCanvas), New Rectangle(New Point(25, 25), New Size(New Point(825, 1075))), e.PageBounds, e.PageSettings) End If 'Draw box e.Graphics.DrawRectangle(Pens.Gray, 20, 30, e.PageBounds.Width - 100, e.PageBounds.Height - 130) PrintHeader(e) e.HasMorePages = False End Sub Private Function PrintHeader(ByVal e As System.Drawing.Printing.PrintPageEventArgs) As Integer Const conTopCertification As Integer = 200 Const conTopCustomer As Integer = conTopCertification + 80 Dim PrintFont As Font Dim strText As String strText = "CERTIFICATION" PrintFont = New Font("Arial", 16, FontStyle.Bold) e.Graphics.DrawString(strText, PrintFont, Brushes.Black, (e.MarginBounds.Width - e.Graphics.MeasureString(strText, PrintFont).Width) / 2 + 60, conTopCertification) Return 0 End Function Public Shadows Sub Print(ByVal intCount As Integer) Dim r As Integer For r = 1 To intCount MyBase.Print() Next End Sub End Class ，向上向量为(0, 0, 0)，并向下观察(0, 1, 0)轴。

右手规则导致相对于逆时针方向旋转。这意味着围绕-Z轴以正值旋转会导致相机的lookAt向+Y轴移动。将旋转角度设置为负值将使照相机的lookAt朝-X轴移动。

下面的代码同时使用+X和lookAt来改变相机的旋转角度。请注意，看着左边的对象对应于正旋转角度。

rotateOnAxis

const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true})
document.body.appendChild(renderer.domElement)
renderer.setSize(200, 200)
renderer.setClearColor(0x55ccff)

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(28, 1, 1, 1000)

const geo = new THREE.SphereBufferGeometry(10, 32, 32)

const leftMat = new THREE.MeshBasicMaterial({color:"red"})
const rightMat = new THREE.MeshBasicMaterial({color:"blue"})
const frontMat = new THREE.MeshBasicMaterial({color:"green"})

const left = new THREE.Mesh(geo, leftMat)
left.position.set(-50, 0, 0)
const right = new THREE.Mesh(geo, rightMat)
right.position.set(50, 0, 0)
const front = new THREE.Mesh(geo, frontMat)
front.position.set(0, 0, -50)

const light = new THREE.PointLight(0xffffff, 1)

scene.add(left, right, light, front, camera)

function render(){
  renderer.render(scene, camera)
}
render()

document.getElementById("reset").addEventListener("click", ()=>{
  camera.lookAt(front.position)
  render()
})

document.getElementById("leftLook").addEventListener("click", ()=>{
  camera.lookAt(left.position)
  render()
})
document.getElementById("rightLook").addEventListener("click", ()=>{
  camera.lookAt(right.position)
  render()
})

const axis = new THREE.Vector3().set(0, 1, 0)
document.getElementById("leftTurn").addEventListener("click", ()=>{
  camera.rotateOnAxis(axis, Math.PI / 2)
  render()
})
document.getElementById("rightTurn").addEventListener("click", ()=>{
  camera.rotateOnAxis(axis, Math.PI / -2)
  render()
})

.test input {
  width: 150px;
}
.right {
  float: right;
}
.test {
  width: 100%;
}
.test:after {
  content: " "
  clear: both;
}
canvas {
  margin-left: auto;
  margin-right: auto;
}