My code
import { Scene, OrthographicCamera, WebGLRenderer, Color } from 'three'
import { PCFSoftShadowMap, Fog } from "three"
import addIslandModel from './models/islandModel'
import Resizer from './utilities/Resizer'
import createOrbitControls from './utilities/createOrbitControls'
const width = window.innerWidth
const height = window.innerHeight
const background = new Color('white')
const aspectRatio = width / height
const left = -10 * aspectRatio
const right = 10 * aspectRatio
const top = 10
const bottom = -10
const canvas = document.getElementById('canvas')
const scene = new Scene()
const camera = new OrthographicCamera(left, right, top, bottom, 1, 1000)
const renderer = new WebGLRenderer({ antialias: true, canvas })
scene.background = background
camera.position.set(0, 2.17297031732955, -0)
renderer.setSize(width, height)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.shadowMap.enabled = true
renderer.shadowMap.type = PCFSoftShadowMap
renderer.useLegacyLights = true
createOrbitControls(camera, renderer)
Resizer(camera, renderer)
addIslandModel(scene)
function render() {
requestAnimationFrame(render)
renderer.render(scene, camera)
}
render()
I want to zoom in from here
to here
and I also want to understand how orbit controls do there zoom.
import { OrbitControls } from “https://unpkg.com/three@0.112/examples/jsm/controls/OrbitControls.js”;
and then
control = new OrbitControls(camera, renderer.domElement);
I already have orbitControls…
I just noticed that you are using Orthographic camera, I learned that Orthographic Camera has to be extended in orbitcontrol.js by yourself
this.dollyOut = function (dollyScale) {
if (dollyScale === undefined) {
dollyScale = getZoomScale();
}
if (scope.object instanceof THREE.PerspectiveCamera) {
scale *= dollyScale;
}
else if (scope.object instanceof THREE.OrthographicCamera) {
scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));
scope.object.updateProjectionMatrix();
}
};
Should I add this code in my orbitControls?
this.update = function() {
const offset = new Vector3();
const quat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0));
const quatInverse = quat.clone().invert();
const lastPosition = new Vector3();
const lastQuaternion = new Quaternion();
const twoPI = 2 * Math.PI;
return function update() {
const position = scope.object.position;
offset.copy(position).sub(scope.target);
offset.applyQuaternion(quat);
spherical.setFromVector3(offset);
if (scope.autoRotate && state === STATE.NONE) {
rotateLeft(getAutoRotationAngle());
}
if (scope.enableDamping) {
spherical.theta += sphericalDelta.theta * scope.dampingFactor;
spherical.phi += sphericalDelta.phi * scope.dampingFactor;
} else {
spherical.theta += sphericalDelta.theta;
spherical.phi += sphericalDelta.phi;
}
let min = scope.minAzimuthAngle;
let max = scope.maxAzimuthAngle;
if (isFinite(min) && isFinite(max)) {
if (min < -Math.PI)
min += twoPI;
else if (min > Math.PI)
min -= twoPI;
if (max < -Math.PI)
max += twoPI;
else if (max > Math.PI)
max -= twoPI;
if (min <= max) {
spherical.theta = Math.max(min, Math.min(max, spherical.theta));
} else {
spherical.theta = spherical.theta > (min + max) / 2 ? Math.max(min, spherical.theta) : Math.min(max, spherical.theta);
}
}
spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi));
spherical.makeSafe();
spherical.radius *= scale;
spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius));
if (scope.enableDamping === true) {
scope.target.addScaledVector(panOffset, scope.dampingFactor);
} else {
scope.target.add(panOffset);
}
offset.setFromSpherical(spherical);
offset.applyQuaternion(quatInverse);
position.copy(scope.target).add(offset);
scope.object.lookAt(scope.target);
if (scope.enableDamping === true) {
sphericalDelta.theta *= 1 - scope.dampingFactor;
sphericalDelta.phi *= 1 - scope.dampingFactor;
panOffset.multiplyScalar(1 - scope.dampingFactor);
} else {
sphericalDelta.set(0, 0, 0);
panOffset.set(0, 0, 0);
}
scale = 1;
if (zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {
scope.dispatchEvent(_changeEvent);
lastPosition.copy(scope.object.position);
lastQuaternion.copy(scope.object.quaternion);
zoomChanged = false;
return true;
}
return false;
};
}();
this.dispose = function() {
scope.domElement.removeEventListener("contextmenu", onContextMenu);
scope.domElement.removeEventListener("pointerdown", onPointerDown);
scope.domElement.removeEventListener("pointercancel", onPointerUp);
scope.domElement.removeEventListener("wheel", onMouseWheel);
scope.domElement.removeEventListener("pointermove", onPointerMove);
scope.domElement.removeEventListener("pointerup", onPointerUp);
if (scope._domElementKeyEvents !== null) {
scope._domElementKeyEvents.removeEventListener("keydown", onKeyDown);
scope._domElementKeyEvents = null;
}
};
this.dollyOut = function (dollyScale) {
if (dollyScale === undefined) {
dollyScale = getZoomScale();
}
if (scope.object instanceof THREE.PerspectiveCamera) {
scale *= dollyScale;
}
else if (scope.object instanceof THREE.OrthographicCamera) {
scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));
scope.object.updateProjectionMatrix();
}
};
const scope = this;
const STATE = {
NONE: -1,
ROTATE: 0,
DOLLY: 1,
PAN: 2,
TOUCH_ROTATE: 3,
TOUCH_PAN: 4,
TOUCH_DOLLY_PAN: 5,
TOUCH_DOLLY_ROTATE: 6
};```
I added it.
