OrbitControlsZoomToCursor.js

What is OrbitControlsZoomToCursor.js?

OrbitControlsZoomToCursor.js is modified OrbitControls.js with added feature of zooming to cursor position.

All code added to OrbitControls.js is wrapped in this comment pattern:

// ZOOM-TO-CURSOR
some_code();
//

Compatibility

OrbitControlsZoomToCursor.js is compatible with three.js r.146.

How to install

To use OrbitControlsZoomToCursor.js in your THREE.js project, copy OrbitControlsZoomToCursor.js file to your project's directory and import OrbitControls or MapControls from it.

import {OrbitControls, MapControls} from './OrbitControlsZoomToCursor.js';

How to use?

Usage of OrbitControlsZoomToCursor.js is identical as usage of OrbitControls.js from three.js examples. OrbitControls.js documentation: link.

Adding OrbitControlsZoomToCursor.js to your project:

OrbitControls exaple:

// ADDING CONTROLS
const controls = new OrbitControls(camera, renderer.domElement);
//IMPORTANT, enabling zooming to cursor
controls.enableZoomToCursor = true;

MapControls example:

// ADDING CONTROLS
const controls = new MapControls(camera, renderer.domElement);
//IMPORTANT, enabling zooming to cursor
controls.enableZoomToCursor = true;
// setting maximum target distance from origin 
controls.maxTargetDistanceFromOrigin = 2;

Notice that, to enable zooming to cursor, you need to set enableZoomToCursor property of controls to true, by default enableZoomToCursor is set to false, and controls are working identical as original ones from three.js examples.

For MapControls, it is recomended to set maxTargetDistanceFromOrigin value, because in MapControls camera pans in the plane orthogonal to the camera's up direction, and zooming to cursor, while keeping camera in the plane orthogonal to the camera's up direction can result in moving controls target vector to really big coordinates. By default maxTargetDistanceFromOrigin is set to Infinity.

Example scene with OrbitControlsZoomToCursor.js

import * as THREE from 'three';
import {OrbitControls, MapControls} from '../OrbitControlsZoomToCursor.js';
import {GUI} from './lib/three.js/lil-gui.module.min.js';
import Stats from './lib/three.js/stats.module.js';

THREE.Object3D.DefaultUp = new THREE.Vector3(0, 0, 1);

function resize(){
    renderer.setPixelRatio(window.devicePixelRatio);
    const width = container.clientWidth;
    const height = container.clientHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;

    if(camera.isOrthographicCamera){
        const cameraHeight = 2;

        camera.left = -cameraHeight / 2 * width / height;
        camera.right = cameraHeight / 2 * width / height;
        camera.top = cameraHeight / 2;
        camera.bottom = -cameraHeight / 2;
    }
    camera.updateProjectionMatrix();
}

//SETTING UP THREE.JS SCENE.
const scene = new THREE.Scene();
// const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.01, 1000);
const camera = new THREE.OrthographicCamera();

const renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
const container = document.getElementById("container")
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);

window.addEventListener('resize', e => resize(e));
resize();

camera.position.set(1, 1, 1);

// ADDING CONTROLS
const controls = new MapControls(camera, renderer.domElement);
// const controls = new OrbitControls(camera, renderer.domElement);
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI / 2;
//IMPORTANT, enabling zooming to cursor
controls.enableZoomToCursor = true;
controls.maxTargetDistanceFromOrigin = 2;

// ADDING STATS BOX
const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);

const gui = new GUI();
gui.add(controls, 'enableZoomToCursor')

const size = 1;
const divisions = 10;
const grid = new THREE.GridHelper(size, divisions);
grid.rotation.x = Math.PI / 2;
scene.add(grid);
const axesHelper = new THREE.AxesHelper(1);
scene.add(axesHelper);

const cube = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.5, 0.5), [
    new THREE.MeshBasicMaterial({color: 0xff0000}),
    new THREE.MeshBasicMaterial({color: 0x00ff00}),
    new THREE.MeshBasicMaterial({color: 0x0000ff}),
    new THREE.MeshBasicMaterial({color: 0xffff00}),
    new THREE.MeshBasicMaterial({color: 0xff00ff}),
    new THREE.MeshBasicMaterial({color: 0x00ffff}),
]);
scene.add(cube);
cube.position.z = 0.25;


// CREATING ANIMATION LOOP.
function animate() {
    stats.begin();

    requestAnimationFrame(animate);

    renderer.render(scene, camera);

    controls.update();

    stats.end();
};

animate();

You can find this code in examples/example.js. To run this code, run server.exe, and in browser go to localhost/examples/example.html

Creator: Artur Brytkowski

• Fiverr
• GitHub