OrbitControls unable to zoom in angular component

Questions
,
1

Hi,

I am trying to make use of three in my angular component.

Same OrbitControls code works fine in plain js application, but in angular component I get following message:

WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.

I am basically unable to zoom in/out the camera.

Is there any solution available for it?

1 Like
2

This message is normally logged when neither an orthographic nor a perspective camera is used with OrbitControls. Please demonstrate the problem with a live example so it’s easier to debug the issue.

2 Likes
3

See if this piece of code helps you

public addControls() {
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    // this.controls.rotateSpeed = 1.0;
    // this.controls.zoomSpeed = 1.2;
    this.controls.enableDamping = true;
    this.controls.dampingFactor = 0.25;
    this.controls.enableZoom = true;

    this.controls.enablePan = false;
    this.controls.addEventListener('change', this.render.bind(this));
    console.log('addControls');

  }
  render() {
    this.renderer.render(this.scene, this.camera);
  }
1 Like
4

I am using perspective camera, and as I told code works fine in plain js. Problem is faced when same piece of code is used in angular component.

5

The above piece of code taken from working example in Angular 7.
Your plain js code may not work exactly same in Angular unless you install the right library.
For OrbitControls the one it works perfectly is npm package ‘three-orbitcontrols’;

import * as OrbitControls from ‘three-orbitcontrols’;

6

We do not recommend to use such npm packages since in most cases they are outdated. It’s best to convert the latest classes from the official repository into modules.

@mghildiy If you not provide an example for debugging, it won’t be possible to help you further.

7

My dependency is:

“three-orbitcontrols-ts”: “^0.1.2”

8

@Mohamed_Fayeeg, that code snippet didn’t work.

9

“three-orbitcontrols”: “^2.96.3”,

NO ts at the end.

10

I agree and understand. However I am not expert in converting JS classes to TS modules so we have no other choice other than using 3rd party npm packages. Shall learn how to. Thanks,

11

@Mugen87, can angular code be provided in jsfiddle?

12

I’m not familiar with Angular. But you can also share a github repository with a demo. It’s only important that it’s easy to start you application e.g. via npm start.

13

I would arrange to give you project in zip format.

Meanwhile, what I found during debugging is as follows:

OrbitControls code which causes this message:

OrbitControls.prototype.dollyOut = function (dollyScale) {
if (this.object instanceof THREE.PerspectiveCamera) {
this.scale *= dollyScale;
}
else if (this.object instanceof THREE.OrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
this.object.updateProjectionMatrix();
this.zoomChanged = true;
}
else {
console.warn(‘WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.’);
this.enableZoom = false;
}
};

During execution, first 2 conditions are not met, and hence WARNING is printed.

But camera object is as:

aspect: 1.1690140845070423
castShadow: false
children:
far: 1500
filmGauge: 35
filmOffset: 0
focus: 10
fov: 75
frustumCulled: true
layers: Layers {mask: 1}
matrix: Matrix4 {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: Matrix4 {elements: Array(16)}
matrixWorldInverse: Matrix4 {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: “”
near: 0.1
parent: null
position: Vector3 {x: -815723.5937499744, y: 20538446, z: -18.5744996071944}
projectionMatrix: Matrix4 {elements: Array(16)}
projectionMatrixInverse: Matrix4 {elements: Array(16)}
quaternion: Quaternion {_x: 0.013885388882011952, _y: 0.8484427548512026, _z: 0.5286354507596418, _w: -0.02228559885324642, onChangeCallback: ƒ}
receiveShadow: false
renderOrder: 0
rotation: Euler {_x: -2.026632935293051, _y: -0.023137556527694465, _z: -3.094438734153151, _order: “XYZ”, onChangeCallback: ƒ}
scale: Vector3 {x: 1, y: 1, z: 1}
type: “PerspectiveCamera”
up: Vector3 {x: 0, y: 1, z: 0}
userData: {}
uuid: “A12F002C-C500-4943-B892-105428B922AA”
view: null
visible: true
zoom: 1
eulerOrder: (…)
id: 7
modelViewMatrix: Matrix4 {elements: Array(16)}
normalMatrix: Matrix3 {elements: Array(9)}
useQuaternion: (…)
proto: Camera

So, you can see camera is type: “PerspectiveCamera”.

Hence, I am not sure why this issue occurs?

14

Any answer on that? same problem here

15

Solution :wink: