Three.js相機旋轉問題

我想在y-z平面上圍繞x軸旋轉相機，同時查看(0, 0, 0)點。事實證明lookAt函數行爲怪異。當旋轉180°後，幾何圖形意外跳到另一側。你能解釋爲什麼發生這種情況，以及如何避免它？Three.js相機旋轉問題

你可以看到的jsfiddle的現場演示：http://jsfiddle.net/ysmood/dryEa/

class Stage 
    constructor: -> 
     window.requestAnimationFrame = 
      window.requestAnimationFrame or 
      window.webkitRequestAnimationFrame or 
      window.mozRequestAnimationFrame 

     @init_scene() 
     @make_meshes() 

    init_scene: -> 
     @scene = new THREE.Scene 

     # Renderer 
     width = window.innerWidth; 
     height = window.innerHeight; 
     @renderer = new THREE.WebGLRenderer({ 
      canvas: document.querySelector('.scene') 
     }) 
     @renderer.setSize(width, height) 

     # Camera 
     @camera = new THREE.PerspectiveCamera(
      45,     # fov 
      width/height,  # aspect 
      1,     # near 
      1000    # far 
     ) 
     @scene.add(@camera) 

    make_meshes: -> 
     size = 20 
     num = 1 

     geo = new THREE.CylinderGeometry(0, size, size) 
     material = new THREE.MeshNormalMaterial() 
     mesh = new THREE.Mesh(geo, material) 
     mesh.rotation.z = Math.PI/2 

     @scene.add(mesh) 

    draw: => 
     angle = Date.now() * 0.001 
     radius = 100 

     @camera.position.set(
      0, 
      radius * Math.cos(angle), 
      radius * Math.sin(angle) 
     ) 
     @camera.lookAt(new THREE.Vector3()) 

     @renderer.render(@scene, @camera) 
     requestAnimationFrame(@draw) 

stage = new Stage 
stage.draw()

來源

2013-07-17 Yad Smood

您可能碰到了Gimbal Lock問題（您可以在網上搜索）。解決方法是使用四元數旋轉（也可研究）。請注意，最新的Three.js，r59現在默認使用四元數，並且在Object3D中有新的旋轉方法可以幫助（rotateX（），rotateAroundAxis（）和朋友）。 – yaku

你確定這是一個萬向節鎖定問題嗎？問題是我不知道'lookAt'函數的機制。爲什麼團隊不在'lookAt'函數中使用Quaternion？ –

你周圍旋轉在Y-Z平面X軸相機。當相機經過「北」和「南」極時，它會翻轉以保持正面朝上。相機的向上矢量默認爲(0, 1, 0)。

將相機x位置設置爲100，其行爲對您而言顯得正確。在您的演示中添加一些軸作爲參考框架。

這不是圖書館的錯。看看Camera.lookAt()源代碼。

如果您想通過四元數設置相機方向，您可以這樣做。

three.js r.59

來源

2013-07-17 12:52:11 WestLangley

我閱讀了源代碼。謝謝，它有幫助。 three.js的文件誤導了我的想法。 –

我已經給出了x位置的偏移量，但同樣的問題出現http://jsfiddle.net/ysmood/dryEa/ –

爲了幫助您瞭解發生了什麼，請將相機偏移量設置爲200，然後是50，然後是20。一切正常，因爲它應該 - 相機避免被顛倒旋轉。如果您不在乎相機是否倒置，請使用「TrackballControls」來控制相機。 http://threejs.org/examples/misc_controls_trackball.html – WestLangley

Three.js相機旋轉問題

回答

相關問題