三个js lookAt函数失败

Question

我在这里可以看到以下场景：http://gravient.thomashoek.com/drag_example/

在初始模式下，文本会查看鼠标。但是当你进行鼠标移动时，文字似乎会直接翻转鼠标。据我所知，当鼠标穿过画布的中间时会发生这种情况。

快速深入解释问题：因此当鼠标位于屏幕顶部时，网格会看到屏幕底部。所有方向都是如此。

但是当你以某种不确定的方式再次移动鼠标时，问题就会自行解决。

所以我的问题是：我怎样才能防止这种情况发生？

我的代码看起来如下：

＆＃13;

＆＃13;

var data = {
	text : ["THE NEXT","POINT","OF VIEW"],
	size : 5,
	height : 2,
	curveSegments : 12,
	line_height : 1.7
};

function generateTextGeometry(mesh) {

	var y_start =  (0 - data.text.length * data.size / 2 - data.size / 2 - (data.text.length - 1) * data.line_height)/2;
	var loader = new THREE.FontLoader();

	loader.load( '../data/suisse_2.json', function ( font ) {

		for (var i = data.text.length - 1; i >= 0; i--) {
			var geometry = new THREE.TextGeometry( data.text[i], {
				font: font,
				size: data.size,
				height: data.height,
				curveSegments: data.curveSegments
			});
			geometry.center();
			mesh.children[i].geometry = geometry;
			mesh.children[i].position.y = y_start;

			if (i < data.text.length) {
				y_start += (data.size + data.line_height);
			}else{
				y_start += data.size;
			}
		}
	});
}



//global vars for al the desired options all are false because we dont know if it will work. 
var current_interaction_mode = null;
var webcam = false;
var gyroscope = false;
var followMouse = false;
var dragMouse = true;
var rotation_vals = {
	x: -0.51,
	y: 0.51,
	range: 0.2
}

check_user_hardware();

//check if all the wanted options are available
function check_user_hardware(){
	window.addEventListener("devicemotion", function(event){
		if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma){
			if (!gyroscope) {
				gyroscope = true;
				current_interaction_mode = 'gyroscope_option';
				set_user_ui_elements();
			}
		}else{
			followMouse = true;
			current_interaction_mode = 'followMouse_option';
			set_user_ui_elements();
			window.addEventListener('mousemove', get_user_mouse_pos);
		}
		calculate_rotation_mesh_pos(event.rotationRate.beta, event.rotationRate.gamma);
	});
}

function get_user_mouse_pos(event){
	rotation_vals.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	rotation_vals.y =  - ( event.clientY / window.innerHeight ) * 2 + 1;
}

function calculate_rotation_mesh_pos(x_angle, y_angle){
	// rotation_vals.x = some calculation that needs to be done here
	// rotation_vals.y = some calculation that needs to be done here
}


function set_user_ui_elements(){

	if (followMouse) {
		$('#followMouse_option').show();
	}
	if (gyroscope) {
		$('#gyroscope_option').show();
	}
	if (dragMouse) {
		$('#dragMouse_option').show();
	}
	if (current_interaction_mode == 'followMouse_option') $('#followMouse_option').css('color', '#ff0000');
	if (current_interaction_mode == 'gyroscope_option') $('#gyroscope_option').css('color', '#ff0000');

}




var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera( window.innerWidth / - 40, window.innerWidth / 40, window.innerHeight / 40, window.innerHeight / - 40, 0, 2000 );
camera.position.z = 1000;

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1 );
document.getElementById('interactive_container').appendChild( renderer.domElement );


//set up interaction parameters
var fakeMouseLoc = new THREE.Vector3();
var orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;
orbit.enableKeys = false;
orbit.enablePan = false;
orbit.enabled = false;

//generate the text mesh
var mesh = new THREE.Object3D();
for (var i = data.text.length - 1; i >= 0; i--) {
	mesh.add( new THREE.Mesh(
		new THREE.Geometry(),
		new THREE.MeshBasicMaterial({
			color: 0xFFFFFF
		})
	));
}

var options =  generateTextGeometry(mesh);
scene.add( mesh );


var render = function(){

	if (current_interaction_mode == 'followMouse_option' || current_interaction_mode == 'gyroscope_option') {
		fakeMouseLoc.set(rotation_vals.x, rotation_vals.y, rotation_vals.range);
		mesh.lookAt(fakeMouseLoc);	
	}

	renderer.render( scene, camera );
	requestAnimationFrame( render );
};	

render();




window.addEventListener( 'resize', function () {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}, false );

function add_geometry_to_container(container){
	container.add( new THREE.Mesh(
		new THREE.Geometry(),
		new THREE.MeshBasicMaterial({
			color: 0xFFFFFF
		})
	));
}

function clear_geometry_of_container(container, empty){
	if (!empty) {
		container.children[0].geometry.dispose();
		container.children[0].material.dispose();
		container.remove(container.children[0]);
	}else{
		for (var i = container.children.length - 1; i >= 0; i--) {
			container.children[i].geometry.dispose();
			container.children[i].material.dispose();
			container.remove(container.children[i]);
		}
	}
}

function invert_color(state){
	if(state){
		console.log("switch to white bg");
		renderer.setClearColor( 0xFFFFFF, 1 );
		for (var i = data.text.length - 1; i >= 0; i--) {
			mesh.children[i].material.color.setHex( 0x000000, 1 );
		}
	}else{
		console.log("switch to black bg");
		renderer.setClearColor( 0x000000, 1 );
		for (var i = data.text.length - 1; i >= 0; i--) {
			mesh.children[i].material.color.setHex( 0xFFFFFF, 1 );
		}
	}
}

＆＃13;

<script src="../supporting_files/general/jquery-3.1.0.min.js"></script>
	<script src="../supporting_files/3d_interactive/three.min.js"></script>
	<script src="../supporting_files/3d_interactive/OrbitControls.js"></script>
	<script src='../supporting_files/3d_interactive/geometry.js'></script>
	<script src="../supporting_files/general/check_features.js"></script>
	<script src="../supporting_files/main_page_js/desktop_main.js"></script>
<script src="../supporting_files/3d_interactive/main_3d_scene.js"></script>

＆＃13;

＆＃13;

＆＃13;

如果您需要更多信息，背景或某些内容尚不清楚，请告诉我，以便澄清：）