我正在使用轨迹球控件在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>
&#13;
要解决此问题,我可以将camera.position
和controls.target
设置为稍微不同的值,但我想了解为什么控件会在这些值设置相同时冻结。< / p>
有没有人知道在这种情况下可能导致控件冻结的原因?我非常感谢别人对这个问题的任何建议。
答案 0 :(得分:1)
如果您查看THREE.TrackballControls()
的源代码,例如here,那么您会注意到内部变量_eye
将具有坐标[0, 0, 0]
和当您将相机的位置和控制目标设置为相同的坐标时,其长度将为0
。
这导致所有带_eye
的交叉产品将生成[0, 0, 0]
的向量,长度为零。实际上,使用此变量的所有计算(cross()
,.crossVectors()
,.setFromAxisAndAngle()
)将具有零向量,零长度或零四元数的结果。因此,没有平移,没有变焦,没有旋转。
P.S。如果我错了,也许更多的专家会添加更多信息甚至纠正我