Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TrackballControls don't work if camera.position is on the y-axis

See original GitHub issue

In the example below, if camera.position is set to (0,distance,0) where distance is some positive number, the trackball controls don’t work properly anymore. Instead there is only zooming if the left mouse button is pressed and the mouse is moved around. Just press the “ALIGN Y” button to see this. The behavior is not observed pressing the “ALIGN X” or “ALIGN Z” button.

`<!DOCTYPE html>

<html lang="en"> <head> <title>TrackballControls test</title> <meta charset="utf-8"> </head>

<body>

	<script src='js/libs/inflate.min.js'></script>
	<script src="js/three.js"></script>

	<script src="js/controls/TrackballControls.js"></script>

	<div>
	<button onclick="alignX()" >ALIGN X</button>
	<button onclick="alignY()" >ALIGN Y</button>
	<button onclick="alignZ()" >ALIGN Z</button>
	</div>

	<script>

		var container, camera, controls, scene, renderer, distance;

		init();
		animate();

		function alignX() {controls.reset(); camera.position.set(distance,0,0);}
		function alignY() {controls.reset(); camera.position.set(0,distance,0);}
		function alignZ() {controls.reset(); camera.position.set(0,0,distance);}

		function init() {

			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1000 );
			distance = 2.2;
			camera.position.set(0,0,distance);

			controls = new THREE.TrackballControls( camera );

			controls.rotateSpeed = 5.0;
			controls.zoomSpeed = 5;
			controls.panSpeed = 2;

			controls.noZoom = false;
			controls.noPan = false;

			controls.staticMoving = true;
			controls.dynamicDampingFactor = 0.3;

			scene = new THREE.Scene();

			// light

			var ambientLight = new THREE.AmbientLight(0x222222);
			camera.add( ambientLight );

			var light = new THREE.PointLight();
                            light.position.set( 2, 2, 2 );
                            camera.add( light );

			scene.add( camera );

			// objects

			var material = new THREE.MeshLambertMaterial({ vertexColors: THREE.FaceColors });

			var ico = new THREE.IcosahedronGeometry( 0.8, 0 );
			for ( var i = 0; i < ico.faces.length; i ++ ) {
				var face = ico.faces[ i ];
				face.color.setHex( Math.random() * 0xffffff );
			}
			var bert = new THREE.Mesh( ico, material );
			scene.add( bert )

			// renderer

			renderer = new THREE.WebGLRenderer( { antialias: false } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );

			container = document.createElement( 'div' );
			document.body.appendChild( container );
			container.appendChild( renderer.domElement );

			window.addEventListener( 'resize', onWindowResize, false );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

			controls.handleResize();

		}

		function animate() {

			requestAnimationFrame( animate );

			controls.update();
			renderer.render( scene, camera );

		}

	</script>

</body>

</html>`

Three.js version

Browser

All of them
Chrome
Firefox
Internet Explorer

OS

All of them
Windows
Linux
Android
IOS

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:9 (2 by maintainers)

Top GitHub Comments

2reactions

h-a-n-n-e-scommented, May 24, 2017

Yes, the problem is that camera.up defaults to the y-axis. I fixed it by adding

if ( objectSidewaysDirection.lengthSq() < EPS ) {
  var a = - Math.sign(_this.object.position.y);
  _this.object.up.set(0,0,a);
  objectUpDirection.set(0,0,a);
  objectSidewaysDirection.set(a,0,0);
}

at line 170 in TrackballControls.js If somebody could add this to the actual file that would be great.

1reaction

MarkBirch3Dcommented, Oct 30, 2018

@h-a-n-n-e-s this helped me greatly, and for anyone else, changing my camera’s up after construction also works

this.camera.up.set(0, 0, 1);