### Install Project Dependencies

Source: https://github.com/yomotsu/camera-controls/blob/dev/CONTRIBUTING.md

Installs project dependencies using npm ci, which is recommended for CI environments as it installs exact versions from the lock file.

```sh
$ npm ci
```

--------------------------------

### Basic Three.js Setup with CameraControls

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/viewport.html

Initializes a Three.js scene, camera, and renderer, and integrates the camera-controls library for camera manipulation. It sets up a basic scene with a red box and a grid helper.

```javascript
const width = window.innerWidth;
const height = window.innerHeight;
const clock = new THREE.Clock();

const renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
camera.position.set( 0, 0, 5 );

const scene = new THREE.Scene();
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 );

CameraControls.install( { THREE: THREE } );
const cameraControls = new CameraControls( camera, renderer.domElement );
cameraControls.dollyToCursor = true;

const render = () => {
  renderer.render( scene, camera );
  console.log( 'rendered' );
}
render();
```

--------------------------------

### Initialize Camera Controls with Three.js

Source: https://github.com/yomotsu/camera-controls/blob/dev/readme.md

This snippet demonstrates the basic setup for using camera-controls with Three.js. It includes installing the library, initializing the camera and renderer, and updating the controls in an animation loop. Ensure Three.js is installed before using this.

```javascript
import * as THREE from 'three';
import CameraControls from 'camera-controls';

CameraControls.install( { THREE: THREE } );

// snip ( init three scene... )
const clock = new THREE.Clock();
const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 1000 );
const cameraControls = new CameraControls( camera, renderer.domElement );

( function anim () {

	// snip
	const delta = clock.getDelta();
	const hasControlsUpdated = cameraControls.update( delta );

	requestAnimationFrame( anim );

	// you can skip this condition to render though
	if ( hasControlsUpdated ) {

		renderer.render( scene, camera );

	}

} )();
```

--------------------------------

### Install Node.js using NVM

Source: https://github.com/yomotsu/camera-controls/blob/dev/CONTRIBUTING.md

Installs and configures Node Version Manager (NVM) to manage Node.js versions. It ensures the correct Node.js version is used for the project.

```sh
$ nvm install
$ nvm use
$ node -v # make sure your version satisfies package.json#engines.node
nb: if you want this node version to be your default nvm's one: `nvm alias default node`
```

--------------------------------

### Install npm using Corepack

Source: https://github.com/yomotsu/camera-controls/blob/dev/CONTRIBUTING.md

Enables and activates Corepack for managing npm versions. It verifies the installed npm version against the project's requirements.

```sh
$ corepack enable
$ corepack prepare --activate # it reads "packageManager"
$ npm -v # make sure your version satisfies package.json#engines.npm
```

--------------------------------

### Three.js Scene Setup and Rendering

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/keyboard.html

Demonstrates the basic setup for a Three.js scene, including creating a camera, a renderer, adding a mesh (a red wireframe cube), and a grid helper. It also includes the animation loop for rendering the scene.

```javascript
import * as THREE from '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 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();
  cameraControls.update( delta ); // Assuming cameraControls is defined elsewhere
  requestAnimationFrame( anim );
  renderer.render( scene, camera );
} )();
```

--------------------------------

### Run Development Server

Source: https://github.com/yomotsu/camera-controls/blob/dev/CONTRIBUTING.md

Starts the development server and opens the application in the default browser. This command is used for local development and testing.

```sh
$ npm run dev
$ open http://localhost:3000/basic.html
```

--------------------------------

### Three.js Scene Setup and Camera Controls Initialization

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/effect-shake.html

Initializes a Three.js scene, camera, renderer, and the CameraControls library. It sets up a basic scene with a cube and a grid, and starts an animation loop to render the scene.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );

  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();

globalThis.cameraControls = cameraControls;
```

--------------------------------

### Initialize Camera Controls with Three.js

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/look-in-direction.html

This snippet demonstrates the basic setup for using the camera-controls library with Three.js. It includes importing necessary modules, installing the controls, setting up the scene, camera, and renderer, and creating a simple mesh. The animation loop continuously updates the camera controls and re-renders the scene.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );

const points = [
  new THREE.Mesh(
    new THREE.SphereGeometry( .1, 16, 16 ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } )
  ),
  new THREE.Mesh(
    new THREE.SphereGeometry( .1, 16, 16 ),
    new THREE.MeshBasicMaterial( { color: 0xffff00 } )
  ),
  new THREE.Mesh(
    new THREE.SphereGeometry( .1, 16, 16 ),
    new THREE.MeshBasicMaterial( { color: 0x0000ff } )
  ),
];
points[ 0 ].position.set( 1, 0, 3 );
points[ 1 ].position.set( 2, 1, 0 );
points[ 2 ].position.set( 3, 2, - 1 );
scene.add( ...points );

renderer.render( scene, camera );

( function anim () {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();
  const updated = cameraControls.update( delta );

  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
}
)();

globalThis.cameraControls = cameraControls;
```

--------------------------------

### Three.js Scene Setup and Camera Controls Initialization

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/fit-to-rect.html

Initializes a Three.js scene, camera, and renderer, then sets up and installs the CameraControls library. This code forms the foundation for interactive camera manipulation in a 3D environment.

```javascript
import * as THREE from 'three';
import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';
import CameraControls from './dist/camera-controls.module.js';

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 );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild( renderer.domElement );

const cameraControls = new CameraControls( camera, renderer.domElement );
```

--------------------------------

### Three.js Camera Controls Setup and Animation

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/camera-up.html

This snippet demonstrates the basic setup for using the camera-controls library with Three.js. It initializes the scene, camera, renderer, and the camera controls themselves. It also includes an animation loop that updates the camera controls and re-renders the scene.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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.up.set( 0, 0, 1 );
camera.position.set( 0, 5, 0 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

const cameraControls = new CameraControls( camera, renderer.domElement );

const mesh = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ) );
scene.add( mesh );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

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 needsUpdate = cameraControls.update( delta );

  requestAnimationFrame( anim );

  if ( needsUpdate ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();

// make variable available to browser console
globalThis.THREE = THREE;
globalThis.cameraControls = cameraControls;
```

--------------------------------

### Three.js Scene Setup and Camera Controls Initialization

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/path-animation.html

Initializes a Three.js scene, camera, renderer, and custom camera controls. It also sets up a basic scene with a box mesh and a grid helper. The camera controls are installed and linked to the camera and renderer.

```javascript
import * as THREE from 'three';
import gsap from "https://unpkg.com/gsap@3.13.0/index.js";
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );
```

--------------------------------

### Basic Camera Control Setup

Source: https://github.com/yomotsu/camera-controls/blob/dev/readme.md

Demonstrates the fundamental setup and usage of the camera-controls library for basic camera manipulation in a three.js scene. This includes initializing the controls and linking them to a camera and its DOM element.

```javascript
import CameraControls from 'camera-controls';
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

CameraControls.install({ eventPrefix: 'my' });

const controls = new CameraControls(camera, renderer.domElement);

// Optional: Add event listeners for camera movement
controls.addEventListener('update', () => {
    renderer.render(scene, camera);
});

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    controls.update();
}

animate();
```

--------------------------------

### Three.js Scene and Custom Camera Controls Setup

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/collision-custom.html

Initializes a Three.js scene, camera, and renderer. It then sets up custom camera controls with Octree collision detection and adds basic scene elements like a cube, grid, and colliders. The Octree is populated from the scene's graph for collision testing.

```javascript
import * as THREE from 'three';
import { Octree } from 'three/addons/math/Octree.js';
import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js';
import CameraControls from './dist/camera-controls.module.js';

CameraControls.install( { THREE: THREE } );

const _ORIGIN = new THREE.Vector3( 0, 0, 0 );
const _v3A = new THREE.Vector3();
const _v3B = new THREE.Vector3();
const _v3C = new THREE.Vector3();
const _ray = new THREE.Ray();
const _rotationMatrix = new THREE.Matrix4();

class CustomCameraControls extends CameraControls {
  constructor( camera, domElement ) {
    super( camera, domElement );
    this.octree = new Octree();
  }

  _collisionTest() {
    let distance = Infinity;
    if ( ! this.octree ) return distance;

    const direction = _v3A.setFromSpherical( this._spherical ).divideScalar( this._spherical.radius );
    _rotationMatrix.lookAt( _ORIGIN, direction, this._camera.up );

    for ( let i = 0; i < 4; i ++ ) {
      const nearPlaneCorner = _v3B.copy( this._nearPlaneCorners[ i ] );
      nearPlaneCorner.applyMatrix4( _rotationMatrix );
      const origin = _v3C.addVectors( this._target, nearPlaneCorner );
      _ray.set( origin, direction );
      const intersect = this.octree.rayIntersect( _ray );
      if ( intersect && intersect.distance < distance ) {
        distance = intersect.distance;
      }
    }
    return distance;
  }
}

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 CustomCameraControls( camera, renderer.domElement );

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 );

// colliders
const colliderMesh0 = new THREE.Mesh( new THREE.BoxGeometry( 3, 0.1, 3 ), new THREE.MeshNormalMaterial(), );
colliderMesh0.position.y = - 1;
scene.add( colliderMesh0 );

const colliderMesh1 = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshNormalMaterial(), );
colliderMesh1.position.set( 3, 0, 0 );
scene.add( colliderMesh1 );

const colliderMesh2 = new THREE.Mesh( new THREE.SphereGeometry( 1, 32, 32 ), new THREE.MeshNormalMaterial(), );
colliderMesh2.position.set( - 3, 0, 0 );
scene.add( colliderMesh2 );

const colliderMesh3 = new THREE.Mesh( new THREE.TorusGeometry( 1, 0.3, 16, 64 ), new THREE.MeshNormalMaterial(), );
colliderMesh3.position.set( 0, 0, - 3 );
scene.add( colliderMesh3 );

// make collider octree for the camera
cameraControls.octree.fromGraphNode( scene );

const helper = new OctreeHelper( cameraControls.octree );
scene.add( helper );

renderer.render( scene, camera );

( function anim () {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();
  const updated = cameraControls.update( delta );

  // if ( elapsed > 130 ) {
  //   return;
  // }
  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();

// make variable available to browser console
globalThis.THREE = THREE;
globalThis.cameraControls = cameraControls;
```

--------------------------------

### Three.js Scene and Camera Controls Initialization

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/iframe-child.html

Sets up a Three.js scene, camera, renderer, and initializes the CameraControls. It also adds a mesh and a grid helper to the scene and makes the cameraControls globally accessible.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );

globalThis.cameraControls = cameraControls;
```

--------------------------------

### Initialize and Basic Setup

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/cursor.html

Sets up a Three.js scene, camera, renderer, and initializes the CameraControls library. It includes event listeners for controlling camera actions and a basic animation loop.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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.addEventListener( 'controlstart', () => {
  switch ( cameraControls.currentAction ) {
    case CameraControls.ACTION.ROTATE:
    case CameraControls.ACTION.TOUCH_ROTATE:
      {
        renderer.domElement.classList.add( '-dragging' );
        break;
      }
    case CameraControls.ACTION.TRUCK:
    case CameraControls.ACTION.TOUCH_TRUCK:
      {
        renderer.domElement.classList.add( '-moving' );
        break;
      }
    case CameraControls.ACTION.DOLLY:
    case CameraControls.ACTION.ZOOM:
      {
        renderer.domElement.classList.add( '-zoomIn' );
        break;
      }
    case CameraControls.ACTION.TOUCH_DOLLY_TRUCK:
    case CameraControls.ACTION.TOUCH_ZOOM_TRUCK:
      {
        renderer.domElement.classList.add( '-moving' );
        break;
      }
    default:
      {
        break;
      }
  }
} );

cameraControls.addEventListener( 'controlend', () => {
  renderer.domElement.classList.remove( '-dragging', '-moving', '-zoomIn' );
} );

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' );
  }
} )();

// make variable available to browser console
globalThis.cameraControls = cameraControls;
```

--------------------------------

### Three.js Scene Setup and Animation

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/padding-with-view-offset.html

Initializes a Three.js scene, camera, and renderer, then sets up an animation loop to update camera controls and render the scene. Includes a basic cube and grid helper.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );

// setPadding( 0, 0, 0, 200 );
setPadding( 0, 0, 0, 200 );

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' );
  }
} )();

// make variable available to browser console
globalThis.cameraControls = cameraControls;
globalThis.setPadding = setPadding;
```

--------------------------------

### Three.js Scene Setup and Camera Controls Initialization

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/config.html

This snippet demonstrates how to set up a basic Three.js scene with a camera, renderer, and a mesh. It also initializes the CameraControls library, linking it to the camera and renderer's DOM element, and includes an animation loop for rendering updates.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );

  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();

// make variable available to browser console
globalThis.CameraControls = CameraControls;
globalThis.cameraControls = cameraControls;
```

--------------------------------

### Install Camera Controls with a Subset of Three.js

Source: https://github.com/yomotsu/camera-controls/blob/dev/readme.md

This code demonstrates how to install camera-controls using only a subset of Three.js, which can help reduce the final bundle size. It explicitly imports only the necessary Three.js components required by camera-controls.

```javascript
import {
	Vector2,
	Vector3,
	Vector4,
	Quaternion,
	Matrix4,
	Spherical,
	Box3,
	Sphere,
	Raycaster,
} from 'three';

const subsetOfTHREE = {
	Vector2   : Vector2,
	Vector3   : Vector3,
	Vector4   : Vector4,
	Quaternion: Quaternion,
	Matrix4   : Matrix4,
	Spherical : Spherical,
	Box3      : Box3,
	Sphere    : Sphere,
	Raycaster : Raycaster,
};

CameraControls.install( { THREE: subsetOfTHREE } );
```

--------------------------------

### Three.js Camera Controls Setup and Usage

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/collision.html

Initializes Three.js scene, camera, renderer, and the CameraControls library. Demonstrates adding meshes, colliders, and setting up an animation loop for rendering updates.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

// Add meshes and colliders
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 );

const colliderMesh0 = new THREE.Mesh( new THREE.BoxGeometry( 3, 0.1, 3 ), new THREE.MeshNormalMaterial() );
colliderMesh0.position.y = - 1;
scene.add( colliderMesh0 );

const colliderMesh1 = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshNormalMaterial() );
colliderMesh1.position.set( 3, 0, 0 );
scene.add( colliderMesh1 );

const colliderMesh2 = new THREE.Mesh( new THREE.SphereGeometry( 1, 32, 32 ), new THREE.MeshNormalMaterial() );
colliderMesh2.position.set( - 3, 0, 0 );
scene.add( colliderMesh2 );

const colliderMesh3 = new THREE.Mesh( new THREE.TorusGeometry( 1, 0.3, 16, 64 ), new THREE.MeshNormalMaterial() );
colliderMesh3.position.set( 0, 0, - 3 );
scene.add( colliderMesh3 );

cameraControls.colliderMeshes.push( colliderMesh0 );
cameraControls.colliderMeshes.push( colliderMesh1 );
cameraControls.colliderMeshes.push( colliderMesh2 );
cameraControls.colliderMeshes.push( colliderMesh3 );

// Animation loop
( function anim () {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();
  const updated = cameraControls.update( delta );

  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();

// Make variables available to browser console
globalThis.THREE = THREE;
globalThis.cameraControls = cameraControls;
```

--------------------------------

### Basic Three.js Scene Setup with Camera Controls

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/basic.html

Initializes a Three.js scene, camera, and renderer, then integrates the CameraControls library to manage camera interactions. Includes an animation loop that updates the camera controls and re-renders the scene.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );

  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();

globalThis.THREE = THREE;
globalThis.camera = camera;
globalThis.cameraControls = cameraControls;
globalThis.mesh = mesh;
```

--------------------------------

### Initialize Camera Controls and Scene Setup

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/fit-to-bounding-sphere.html

Sets up the Three.js scene, renderer, camera, and initializes the CameraControls library. It also configures renderer properties like tone mapping and encoding.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import CameraControls from './dist/camera-controls.module.js';

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 );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild( renderer.domElement );
```

--------------------------------

### Basic Three.js Scene Setup with Camera Controls

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/orthographic.html

Initializes a Three.js scene, camera, and renderer, then integrates the CameraControls library to manage camera interactions. Includes an animation loop that updates the camera and re-renders the scene.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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.OrthographicCamera( width / - 200, width / 200, height / 200, height / - 200, 1, 1000 );
camera.position.set( 0, 0, 100 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

const cameraControls = new CameraControls( camera, renderer.domElement );

const mesh = new THREE.Mesh( new THREE.BoxGeometry( 2, 2, 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 );

  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();

globalThis.THREE = THREE;
globalThis.camera = camera;
globalThis.cameraControls = cameraControls;
globalThis.mesh = mesh;
```

--------------------------------

### Environment Map Setup

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/fit-to-bounding-sphere.html

Loads an equirectangular map and uses it to create an environment map for the scene, enhancing lighting and reflections. It utilizes PMREMGenerator for efficient processing.

```javascript
new THREE.TextureLoader().load( './env.jpg', ( equirectangularMap ) => {
  const pmremGenerator = new THREE.PMREMGenerator( renderer );
  pmremGenerator.compileEquirectangularShader();
  const envMapRenderTarget = pmremGenerator.fromEquirectangular( equirectangularMap );
  envMapRenderTarget.texture.encoding = THREE.sRGBEncoding;
  equirectangularMap.dispose();
  scene.environment = envMapRenderTarget.texture;
} );
```

--------------------------------

### Initialize and Render Three.js Scene with Camera Controls

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/event-attach.html

This snippet demonstrates the basic setup for a Three.js scene, including creating a camera, renderer, and adding a mesh. It also initializes and uses the CameraControls library to manage camera interactions and renders the scene in an animation loop. The code includes global variables for easy console access.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );

  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();

globalThis.THREE = THREE;
globalThis.renderer = renderer;
globalThis.cameraControls = cameraControls;
```

--------------------------------

### Three.js Scene Setup and Camera Controls Initialization

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/rest-and-sleep.html

Initializes a Three.js scene, camera, renderer, and camera controls. It also sets up a basic scene with a cube and a grid. The camera controls are configured to work with the provided camera and renderer's DOM element.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );

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 );

// Make variables available to browser console
globalThis.THREE = THREE;
globalThis.cameraControls = cameraControls;
```

--------------------------------

### Path Animation Setup

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/path-animation.html

Defines a Catmull-Rom curve and creates a visual representation of the path using a line. This path will be used for animating the camera.

```javascript
const curve = new THREE.CatmullRomCurve3( [
  new THREE.Vector3( - 3, 2, 1 ),
  new THREE.Vector3( 2, 2, 0 ),
  new THREE.Vector3( - 1, 0, 3 ),
  new THREE.Vector3( 2, - 1, 0 ),
] );

const points = curve.getPoints( 50 );
const pathMesh = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints( points ),
  new THREE.LineBasicMaterial( { color: 0x00ffff } )
);
scene.add( pathMesh );
```

--------------------------------

### Basic Three.js Scene Setup with CameraControls

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/first-person.html

Initializes a Three.js scene, camera, and renderer, then integrates CameraControls for camera manipulation. It sets up basic camera properties, controls, and adds a mesh and grid helper to the scene. An animation loop continuously updates the camera controls and re-renders the scene if changes occur.

```javascript
import * as THREE from 'three';
import CameraControls from './dist/camera-controls.module.js';

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 );
const EPS = 1e-5; // in order to archive FPS look, set EPSILON for the distance to the center
camera.position.set( 0, 0, EPS );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

const cameraControls = new CameraControls( camera, renderer.domElement );
cameraControls.minDistance = cameraControls.maxDistance = 1;
cameraControls.azimuthRotateSpeed = - 0.3; // negative value to invert rotation direction
cameraControls.polarRotateSpeed = - 0.3; // negative value to invert rotation direction
cameraControls.truckSpeed = 10;
cameraControls.mouseButtons.wheel = CameraControls.ACTION.ZOOM;
cameraControls.touches.two = CameraControls.ACTION.TOUCH_ZOOM_TRUCK;
cameraControls.saveState();

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' );
  }
} )();

// Make variables available to browser console
globalThis.THREE = THREE;
globalThis.CameraControls = CameraControls;
globalThis.camera = camera;
globalThis.cameraControls = cameraControls;
```

--------------------------------

### CameraControls Event Handling

Source: https://github.com/yomotsu/camera-controls/blob/dev/readme.md

Demonstrates how to subscribe and unsubscribe to events emitted by the CameraControls instance. Events provide feedback on camera control states like starting, updating, and resting.

```javascript
cameraControl.addEventListener( 'eventname', function );
cameraControl.removeEventListener( 'eventname', function );
```

--------------------------------

### Viewport Management and Animation Loop

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/viewport.html

Defines and manages the viewport for the camera and renderer, and sets up an animation loop to continuously render the scene and update camera controls. The `setViewport` function adjusts camera aspect ratio and renderer settings when the viewport changes.

```javascript
const viewport = new THREE.Vector4( 0, 0, window.innerWidth, window.innerHeight );

const setViewport = () => {
  camera.aspect = viewport.z / viewport.w;
  camera.updateProjectionMatrix();
  renderer.setViewport( viewport );
  cameraControls.setViewport( viewport );
  render();
}

const animate = () => {
  requestAnimationFrame( animate );
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();
  const updated = cameraControls.update( delta );
  if ( updated ) {
    render();
  }
}

animate();

globalThis.THREE = THREE;
globalThis.cameraControls = cameraControls;
globalThis.viewport = viewport;
globalThis.setViewport = setViewport;
```

--------------------------------

### Three.js Animation Loop with Camera Controls Update

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/iframe-child.html

The animation loop continuously updates the camera controls based on the time delta and re-renders the scene if the camera has been updated. It uses requestAnimationFrame for smooth animation.

```javascript
( function anim () {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();
  const updated = cameraControls.update( delta );

  requestAnimationFrame( anim );

  if ( updated ) {
    renderer.render( scene, camera );
    console.log( 'rendered' );
  }
} )();
```

--------------------------------

### Move Camera to Animation Start Point

Source: https://github.com/yomotsu/camera-controls/blob/dev/examples/path-animation.html

A function to move the camera to the starting point of the defined path. It uses `setLookAt` from `cameraControls` to position the camera and orient its view.

```javascript
const moveToStartPoint = () => {
  curve.getPoint ( 0, _tmp );
  cameraControls.normalizeRotations().setLookAt( _tmp.x, _tmp.y, _tmp.z, 0, 0, 0, true );
};
```

--------------------------------

### Get Camera Position

Source: https://github.com/yomotsu/camera-controls/blob/dev/readme.md

Retrieves the current position of the camera. It can return the current position or the position at the end of a transition.

```APIDOC
getPosition( out: THREE.Vector3, receiveEndValue: boolean = true ): THREE.Vector3
  - out: A THREE.Vector3 instance to store the result.
  - receiveEndValue: If true, returns the transition end coordinates; otherwise, returns current coordinates. Defaults to true.
```

--------------------------------

### Get Camera Target Position

Source: https://github.com/yomotsu/camera-controls/blob/dev/readme.md

Retrieves the current position the camera is focused on. It can return the current target or the target at the end of a transition.

```APIDOC
getTarget( out: THREE.Vector3, receiveEndValue: boolean = true ): THREE.Vector3
  - out: A THREE.Vector3 instance to store the result.
  - receiveEndValue: If true, returns the transition end coordinates; otherwise, returns current coordinates. Defaults to true.
```