javascript - 如果camera.position ===controls.target，为什么 Three.js 轨迹球控件会卡住？

Question

我正在使用轨迹球控件开发 Three.js 场景，在其中以编程方式移动相机，并且我注意到如果我设置 camera.position 和 控件.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 设置为略有不同的值，但我想了解控件卡住的原因当这些值设置相同时。

有谁知道在这种情况下什么可能导致控件卡住？如果其他人就这个问题提出任何建议，我将非常感激。

Answer 1

如果你查看THREE.TrackballControls()的源代码，例如here ，那么您会注意到内部变量 _eye 的坐标为 [0, 0, 0]，其长度将为 0，当您将相机的位置和控件的目标设置为相同的坐标。

这导致所有与 _eye 的叉积将产生长度为零的 [0, 0, 0] 向量。实际上，使用此变量的所有计算(cross()、.crossVectors()、.setFromAxisAndAngle())都会得到零向量的结果，或零长度，或零四元数。因此，没有平移、没有缩放、没有旋转。

附注如果我错了，也许更优秀的专家会添加更多信息，甚至纠正我)