OrthographicTrackballControls - Rotate around a point without lookAt

Questions
1

Hi,

I’m trying to get OrthographicTrackballControls to rotate around a raycasted point without the OrthographicCamera directly looking at it. So, I changed the mouse down event’s rotate part to this:

if (this.state === STATE.ROTATE && !this.noRotate)
{
	const mX = (event.offsetX / this.screen.width) * 2 - 1;
	const mY = -(event.offsetY / this.screen.height) * 2 + 1;

	this._raycaster.setFromCamera(new THREE.Vector2(mX, mY), this.object);

	let intersects = this._raycaster.intersectObjects(this._scene.children);
	console.log("intersects: " + intersects.length);

	if (intersects.length > 0)
	{
		let intersect = intersects[0];
		let point = intersect.point;

		console.log(point);

		this.target.copy(point);
	}
	else
	{
		this.target.copy(this.center);
	}

	this.rotateStart.copy(this.getMouseProjectionOnBall(event.pageX, event.pageY));
	this.rotateEnd.copy(this.rotateStart);
}

This successfully rotates around the point. However, on the initial button press, the camera jumps and looks at the point and the cursor becomes offset. Not only is this jarring, but the rotation feels odd.

Is there anyway to get it to rotate around a point without the camera jumping and looking at the point?

Any help will be appreciated.

Thanks,
Mike

2

Hi,

Can anyone help me with this? I can post a fiddle or gif example if needed.

Thanks,
Mike

3

That would be great!

4

Hi,

Here’s the gif: https://gph.is/g/E1mPzyw

Thanks,
Mike

5

Can you also share a fiddle or codepen for debugging?

https://jsfiddle.net/f2Lommf5/

6

Here’s the StackBlitz: https://stackblitz.com/edit/three-rotate-around-point

1 Like
7

Um, you are modifying the target vector of the controls in mousedown(). This vector is actually used at the following place in order to orient the camera:

So, OrthographicTrackballControls ensures by default to orient the camera towards the defined target. I guess you have to make sure to decouple this vector from the rest of the logic.

8

I know about that lookAt. I don’t know how to decouple it from the rest. Any ideas?

9

Couldn’t you expose an additional 3D vector called OrthographicTrackballControls.lookAtTarget? You use it only for the lookAt() call and define an arbitrary value in your application.

10

I’ve tried that before, but the rotation code seems to rely on the target vector being set as the lookAt, it just rotates around what the camera’s lookAt is. I know a way to do it with a perspective camera but not orthographic.

11

Any ideas on how to modify the rotation code to not rely on lookAt?

12

No, sorry. At least not without preparation.