Pivot Camera

That's the inverse of an OrbitControlled camera. Camera position remains fixed, but target orbits.

by Chrisssie

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";

	let scene, orbitCamera, pivotCamera, observerCamera, renderer, controls, orbitHelper, pivotHelper;
	let pivotCamElevation = 10;		// elevate pivot camera along y-axis by this amount, for clarity
	let orbitCamElevation = 1;		// elevate orbit camera along y-axis by this amount, for clarity

	renderer = new THREE.WebGLRenderer({antialias: true, alpha: true });
   renderer.setSize( window.innerWidth, window.innerHeight );
   renderer.setPixelRatio( window.devicePixelRatio );
   document.body.appendChild( renderer.domElement );

   scene = new THREE.Scene();
	
   orbitCamera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 20 );
	orbitCamera.position.set( 0, orbitCamElevation, 50  );
	orbitCamera.updateMatrix();

   pivotCamera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 20 );
	pivotCamera.position.x  = 0;
	pivotCamera.position.y  = pivotCamElevation;
	pivotCamera.position.z  = 0;
	pivotCamera.rotation.set( 0, 0, 0 );
	pivotCamera.updateMatrix();

	observerCamera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 2000 );
	observerCamera.position.set( 0, 20, 90  );

   controls = new OrbitControls( orbitCamera, renderer.domElement );
	controls.addEventListener( 'change', render );
	controls.target = new THREE.Vector3( 0, orbitCamElevation, 0 );  // note that we are restricting the orbit plane to be horizontal!
	controls.minPolarAngle = Math.PI / 2;
	controls.maxPolarAngle = Math.PI / 2;
	controls.enableZoom = false;
	controls.update();
	
	orbitHelper = new THREE.CameraHelper( orbitCamera );
	scene.add( orbitHelper );

	pivotHelper = new THREE.CameraHelper( pivotCamera );
	scene.add( pivotHelper );
																

	scene.background = new THREE.Color( 0xffffff );

	// axes
	scene.add( new THREE.AxesHelper(...