yomotsu · yomotsu · Sep 20, 2020 · Sep 20, 2020 · Sep 20, 2020 · Sep 20, 2020
diff --git a/examples/config.html b/examples/config.html
@@ -15,6 +15,7 @@
 	<select onchange="cameraControls.mouseButtons.left = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE" selected>CameraControls.ACTION.ROTATE</option>
 		<option value="TRUCK">CameraControls.ACTION.TRUCK</option>
+		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY">CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
 		<option value="NONE">CameraControls.ACTION.NONE</option>
@@ -24,6 +25,7 @@
 	<select onchange="cameraControls.mouseButtons.middle = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE">CameraControls.ACTION.ROTATE</option>
 		<option value="TRUCK">CameraControls.ACTION.TRUCK</option>
+		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY" selected>CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
 		<option value="NONE">CameraControls.ACTION.NONE</option>
@@ -33,6 +35,7 @@
 	<select onchange="cameraControls.mouseButtons.right = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE">CameraControls.ACTION.ROTATE</option>
 		<option value="TRUCK" selected>CameraControls.ACTION.TRUCK</option>
+		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY">CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
 		<option value="NONE">CameraControls.ACTION.NONE</option>
@@ -42,6 +45,7 @@
 	<select onchange="cameraControls.mouseButtons.wheel = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE">CameraControls.ACTION.ROTATE</option>
 		<option value="TRUCK">CameraControls.ACTION.TRUCK</option>
+		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY" selected>CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
 		<option value="NONE">CameraControls.ACTION.NONE</option>
@@ -52,6 +56,7 @@
 	<select onchange="cameraControls.touches.one = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE" selected>CameraControls.ACTION.TOUCH_ROTATE</option>
 		<option value="TRUCK">CameraControls.ACTION.TOUCH_TRUCK</option>
+		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY">CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
 		<option value="NONE">CameraControls.ACTION.NONE</option>
@@ -60,21 +65,27 @@
 	cameraControls.touches.two =
 	<select onchange="cameraControls.touches.two = CameraControls.ACTION[ this.value ]">
 		<option value="TOUCH_DOLLY_TRUCK" selected>CameraControls.ACTION.TOUCH_DOLLY_TRUCK</option>
+		<option value="TOUCH_DOLLY_OFFSET">CameraControls.ACTION.TOUCH_DOLLY_OFFSET</option>
 		<option value="TOUCH_ZOOM_TRUCK">CameraControls.ACTION.TOUCH_ZOOM_TRUCK</option>
+		<option value="TOUCH_ZOOM_OFFSET">CameraControls.ACTION.TOUCH_ZOOM_OFFSET</option>
 		<option value="TOUCH_DOLLY">CameraControls.ACTION.TOUCH_DOLLY</option>
 		<option value="TOUCH_ZOOM">CameraControls.ACTION.TOUCH_ZOOM</option>
 		<option value="TOUCH_ROTATE">CameraControls.ACTION.TOUCH_ROTATE</option>
 		<option value="TOUCH_TRUCK">CameraControls.ACTION.TOUCH_TRUCK</option>
+		<option value="TOUCH_OFFSET">CameraControls.ACTION.TOUCH_OFFSET</option>
 	</select>
 	<br>
 	cameraControls.touches.three =
 	<select onchange="cameraControls.touches.three = CameraControls.ACTION[ this.value ]">
 		<option value="TOUCH_DOLLY_TRUCK">CameraControls.ACTION.TOUCH_DOLLY_TRUCK</option>
+		<option value="TOUCH_DOLLY_OFFSET">CameraControls.ACTION.TOUCH_DOLLY_OFFSET</option>
 		<option value="TOUCH_ZOOM_TRUCK">CameraControls.ACTION.TOUCH_ZOOM_TRUCK</option>
+		<option value="TOUCH_ZOOM_OFFSET">CameraControls.ACTION.TOUCH_ZOOM_OFFSET</option>
 		<option value="TOUCH_DOLLY">CameraControls.ACTION.TOUCH_DOLLY</option>
 		<option value="TOUCH_ZOOM">CameraControls.ACTION.TOUCH_ZOOM</option>
 		<option value="TOUCH_ROTATE">CameraControls.ACTION.TOUCH_ROTATE</option>
 		<option value="TOUCH_TRUCK" selected>CameraControls.ACTION.TOUCH_TRUCK</option>
+		<option value="TOUCH_OFFSET">CameraControls.ACTION.TOUCH_OFFSET</option>
 	</select>
 </div>
 

diff --git a/examples/focal-offset.html b/examples/focal-offset.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>=^.^=</title>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<div class="info">
+	<p><a href="https://github.com/yomotsu/camera-controls">GitHub repo</a></p>
+	<label><input type="checkbox" onchange="cameraControls.verticalDragToForward = this.checked">vertical drag to move forward</label>
+	<br>
+	<label><input type="checkbox" onchange="cameraControls.dollyToCursor = this.checked">dolly to cursor</label>
+	<br>
+	<br>
+	<button onclick="cameraControls.setFocalOffset( 5, 0, true )">setFocalOffset( 5, 0 )</button>
+	<button onclick="cameraControls.setFocalOffset( -3, 0, true )">setFocalOffset( -3, 0 )</button>
+	<button onclick="cameraControls.setFocalOffset( 2, 2, true )">setFocalOffset( 2, 2 )</button>
+	<br>
+	<button onclick="cameraControls.rotate( 30 * THREE.MathUtils.DEG2RAD, 0, true )">rotate theta 30deg</button>
+	<br>
+	<button onclick="cameraControls.dolly(  1, true )">dolly  1</button>
+	<button onclick="cameraControls.dolly( -1, true )">dolly -1</button>
+	<br>
+	<button onclick="cameraControls.reset( true )">reset</button>
+	<button onclick="cameraControls.saveState()">saveState</button>
+</div>
+
+<script src="https://unpkg.com/three@0.118.3/build/three.min.js"></script>
+<script src="../dist/camera-controls.js"></script>
+<script>
+CameraControls.install( { THREE: THREE } );
+
+const width  = window.innerWidth;
+const height = window.innerHeight;
+const clock = new THREE.Clock();
+const scene  = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
+camera.position.set( 0, 0, 5 );
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize( width, height );
+document.body.appendChild( renderer.domElement );
+
+const cameraControls = new CameraControls( camera, renderer.domElement );
+cameraControls.mouseButtons.right = CameraControls.ACTION.OFFSET;
+cameraControls.touches.one        = CameraControls.ACTION.TOUCH_OFFSET;
+cameraControls.touches.two        = CameraControls.ACTION.TOUCH_DOLLY_OFFSET;
+cameraControls.touches.three      = CameraControls.ACTION.TOUCH_OFFSET;
+
+const mesh = new THREE.Mesh(
+	new THREE.BoxGeometry( 1, 1, 1 ),
+	new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } )
+);
+scene.add( mesh );
+
+const gridHelper = new THREE.GridHelper( 50, 50 );
+gridHelper.position.y = - 1;
+scene.add( gridHelper );
+
+renderer.render( scene, camera );
+
+( function anim () {
+
+	const delta = clock.getDelta();
+	const elapsed = clock.getElapsedTime();
+	const updated = cameraControls.update( delta );
+
+	// if ( elapsed > 30 ) { return; }
+
+	requestAnimationFrame( anim );
+
+	if ( updated ) {
+
+		renderer.render( scene, camera );
+		console.log( 'rendered' );
+
+	}
+
+} )();
+</script>
+
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -15,6 +15,7 @@ A camera control for three.js, similar to THREE.OrbitControls yet supports smoot
 - [basic](https://yomotsu.github.io/camera-controls/examples/basic.html)
 - [fit-and-padding](https://yomotsu.github.io/camera-controls/examples/fit-and-padding.html)
 - [boundary](https://yomotsu.github.io/camera-controls/examples/boundary.html)
+- [focal offset](https://yomotsu.github.io/camera-controls/examples/focal-offset.html)
 - [`viewport` within the canvas](https://yomotsu.github.io/camera-controls/examples/viewport.html)
 - [z-up camera](https://yomotsu.github.io/camera-controls/examples/camera-up.html)
 - [orthographic](https://yomotsu.github.io/camera-controls/examples/orthographic.html)
@@ -121,7 +122,7 @@ See [the demo](https://github.com/yomotsu/camera-movement-comparison#dolly-vs-zo
 | `.verticalDragToForward`  | `boolean` | `false`     | The same as `.screenSpacePanning` in three.js's OrbitControls. |
 | `.dollyToCursor`          | `boolean` | `false`     | `true` to enable Dolly-in to the mouse cursor coords. |
 | `.colliderMeshes`         | `array`   | `[]`        | An array of Meshes to collide with camera ¹. |
-|`.infinityDolly`			|`boolen`	|`false`	  | `true` to enable Infity Dolly ².	| 
+| `.infinityDolly`          | `boolean` | `false`     | `true` to enable Infinity Dolly ². |
 
 1. Be aware colliderMeshes may decrease performance. Collision test uses 4 raycasters from camera, since near plane has 4 corners.
 2. When the Dolly distance less than the minDistance, the sphere of radius will set minDistance.
@@ -147,9 +148,9 @@ Working example: [user input config](https://yomotsu.github.io/camera-controls/e
 
 | button to assign      | behavior |
 | --------------------- | -------- |
-| `mouseButtons.left`   | `CameraControls.ACTION.ROTATE`* \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
-| `mouseButtons.right`  | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK`* \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
-| `mouseButtons.wheel`  | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
+| `mouseButtons.left`   | `CameraControls.ACTION.ROTATE`* \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
+| `mouseButtons.right`  | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK`* \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
+| `mouseButtons.wheel`  | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
 
 - \* is the default.
 - The default of `mouseButtons.wheel` is:
@@ -158,9 +159,9 @@ Working example: [user input config](https://yomotsu.github.io/camera-controls/e
 
 | fingers to assign     | behavior |
 | --------------------- | -------- |
-| `touches.one` | `CameraControls.ACTION.TOUCH_ROTATE`* \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.DOLLY` | `CameraControls.ACTION.ZOOM` | `CameraControls.ACTION.NONE` |
-| `touches.two` | `ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_DOLLY` \| `ACTION.TOUCH_ZOOM` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.NONE` |
-| `touches.three` | `ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_DOLLY` \| `ACTION.TOUCH_ZOOM` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.NONE` |
+| `touches.one` | `CameraControls.ACTION.TOUCH_ROTATE`* \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.DOLLY` | `CameraControls.ACTION.ZOOM` | `CameraControls.ACTION.NONE` |
+| `touches.two` | `ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_DOLLY_OFFSET` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_ZOOM_OFFSET` \| `ACTION.TOUCH_DOLLY` \| `ACTION.TOUCH_ZOOM` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.NONE` |
+| `touches.three` | `ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_DOLLY_OFFSET` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_ZOOM_OFFSET` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.NONE` |
 
 - \* is the default.
 - The default of `touches.two` and `touches.three` is:
@@ -260,6 +261,18 @@ Truck and pedestal camera using current azimuthal angle.
 
 ---
 
+### `setFocalOffset( x, y, enableTransition )`
+
+set focal offset using the screen parallel coordinates.
+
+| Name               | Type      | Description |
+| ------------------ | --------- | ----------- |
+| `x`                | `number`  | Horizontal offset amount |
+| `y`                | `number`  | Vertical offset amount |
+| `enableTransition` | `boolean` | Whether to move smoothly or immediately |
+
+---
+
 #### `forward( distance, enableTransition )`
 
 Move forward / backward.
@@ -500,8 +513,8 @@ Dispose the cameraControls instance itself, remove all eventListeners.
 
 @1.16.0 `dolly()` will take opposite value. e.g. dolly-in to `dolly( 1 )` (used be dolly-in to `dolly( -1 )`)
 
-## Contributors	
+## Contributors
 
-This project exists thanks to all the people who contribute.	
+This project exists thanks to all the people who contribute.
 
 ![](https://contributors-img.web.app/image?repo=yomotsu/camera-controls)