Camera.position === controls.targetの場合、Three.jsトラックボールコントロールがフリーズするのはなぜですか？

Question

トラックボールコントロールを使用してプログラムでカメラを移動するThree.jsシーンで作業していますが、camera.positionとcontrols.targetを同じ値に設定すると、コントロールが完全にフリーズし、ユーザーはもはやズーム/パン、等が挙げられる。【codepen]：

// Create the scene and a camera to view it 
 
var scene = new THREE.Scene(); 
 

 
/** 
 
* Camera 
 
**/ 
 

 
// Specify the portion of the scene visiable at any time (in degrees) 
 
var fieldOfView = 75; 
 

 
// Specify the camera's aspect ratio 
 
var aspectRatio = window.innerWidth/window.innerHeight; 
 

 
// Specify the near and far clipping planes. Only objects 
 
// between those planes will be rendered in the scene 
 
// (these values help control the number of items rendered 
 
// at any given time) 
 
var nearPlane = 0.1; 
 
var farPlane = 1000; 
 

 
// Use the values specified above to create a camera 
 
var camera = new THREE.PerspectiveCamera(
 
    fieldOfView, aspectRatio, nearPlane, farPlane 
 
); 
 

 
// Finally, set the camera's position in the z-dimension 
 
camera.position.z = 5; 
 

 
/** 
 
* Renderer 
 
**/ 
 

 
// Create the canvas with a renderer 
 
var renderer = new THREE.WebGLRenderer(); 
 

 
// Specify the size of the canvas 
 
renderer.setSize(window.innerWidth, window.innerHeight); 
 

 
// Add the canvas to the DOM 
 
document.body.appendChild(renderer.domElement); 
 

 
/** 
 
* Controls 
 
**/ 
 

 
var controls = new THREE.TrackballControls(camera, renderer.domElement); 
 

 
setTimeout(function() { 
 
    controls.target = new THREE.Vector3(1, 1, 1) 
 
    camera.position.set(1, 1, 1) 
 
    alert('freeze!') 
 
}, 2500) 
 

 
/** 
 
* Cube 
 
**/ 
 

 
// Create a cube with width, height, and depth set to 1 
 
var geometry = new THREE.BoxGeometry(1, 1, 1); 
 

 
// Use a simple material with a specified hex color 
 
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); 
 

 
// Combine the geometry and material into a mesh 
 
var cube = new THREE.Mesh(geometry, material); 
 

 
// Add the mesh to our scene 
 
scene.add(cube); 
 

 
/** 
 
* Render! 
 
**/ 
 

 
function animate() { 
 
requestAnimationFrame(animate); 
 
    renderer.render(scene, camera); 
 
    controls.update(); 
 
} 
 
animate();

* { 
 
margin: 0; 
 
padding: 0; 
 
background: black; 
 
*

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script> 
 
<script src="https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/js/trackball-controls.js"></script>

問題を解決するために、私はcamera.positionとcontrols.targetにわずかに異なる値を設定することができますが、私はちょうど理由を理解したいと思いますそれらの値が設定されるとフリーズを制御するtically。

この場合、コントロールがフリーズする原因は何ですか？私はこの質問に対して他のアドバイスがあればとても感謝しています。

Answer 1

あなたがTHREE.TrackballControls()のソースコードに見てみると、たとえばhereのために、あなたは内部変数_eye座標[0, 0, 0]を持つことになりますし、あなたがお使いのカメラの位置とコントロールの目標を設定したときに、その長さは、0になることに気づくでしょう同じ座標。

これは、_eyeのすべての交差積が、長さゼロの[0, 0, 0]のベクトルを生成することにつながります。実際には、この変数を持つすべての計算（cross()、.crossVectors()、.setFromAxisAndAngle()）はゼロベクトル、ゼロ長さ、またはゼロクォータニオンの結果になります。したがって、パンなし、ズームなし、回転なし。

P.S.たぶん、私が間違っていると、より多くの専門家が情報を追加したり、私を修正したりするでしょう。