After controls.reset() Pan is very slow how to increase pan to move objects smoothly

Questions
1

Tried this but not working,

this.controls.reset();
this.controls.noPan = false;
this.controls.staticMoving = true;
this.controls.update();

Any suggestions would be helpful!

2

Some notes about your code:

  • staticMoving is deprecated and should not be used anymore. The replacement is enableDamping.
  • Same for noPan. It’s enablePan now.
  • update() is automatically called in reset().
  • If you disable damping, panning is indeed slower. You can verify this with the following live example: https://jsfiddle.net/td5revyL/. AFAIK, nobody complained about that difference in speed and sensitivity since most user do not dynamically toggle damping. If you think the behavior of OrbitControls should be improved, please report a feature request at github. Related:
3

Thanks @Mugen87 :slight_smile:

5

Hi,
In below code panSpeed is set to 2 after reset and update its 2 but not moving smoothly!

Example Code :

alert(this.controls.panSpeed);  // output 2
this.controls.reset();
this.controls.enablePan  = true;
this.controls.panSpeed = 2;
alert(this.controls.panSpeed);   // output 2

but cannot move objects smoothly?

6

Sorry, I’m afraid I do not understand what you mean. You have to describe in more detail what’s going wrong.

7

Hi,

Goal is to achieve multiple views (Top,Left,Right,Front) View on button click. object and controls works good using perspective camera but not in orthographic camera(parallel view ) needed now so using only orthographic camera only.

Following are used to achieve views:

Camera : Orthographic camera
Controls: Orbit Controls
Loader : OBJ Loader2
bounding box : Box3

On default obj load works good, but when i click any buttons(Top,Left,Right,Front) then controls.reset() is called then everything gets mess.

Why controls.reset() is used ?
Its because when i move object to outside screen and when i click any button (Top,Left,Right,Front) i need object to be in center with certain angle for(Top,Front,left,right) view with respective button click (Top,Left,Right,Front).

Js Fiddle link : https://jsfiddle.net/suraj_js/a6Lq9n4d/34/

If this is not the correct way to achieve this,
please let me know correct way to achieve (Top,Front,right,left views) with pan,rotation and zoom object to fit screen when button is clicked(top,front,right,left).

8

check the below link for details

9

Your jsfiddle is full of errors and does not work properly. The idea is to share a workable live demo. Please keep this in mind for your upcoming posts.

I’ve tried to clean a bit so the demo actually works: https://jsfiddle.net/pc8s1fmu/

There are still some warnings since the code base seems to use deprecated properties and methods of three.js.

When using OrbitControls, you do not move the model but the camera. The model always stays at the same position. Hence, I do not understand what you are doing in your event listeners. It should be sufficient to reposition the camera at a certain position if you want to present a specific view.

10

Hi,

Thanks for reply and working jsfiddle.

Please keep this in mind for your upcoming posts.

Sure :slight_smile:

It should be sufficient to reposition the camera at a certain position if you want to present a certain view.

Please let me know how to achieve this using orbit controls to move camera to certain angle.
and also how to fix object in center of screen if model is large.

11

You just set the position of the camera. OrbitControls ensures with the next update that it looks at the defined target.

12

I’m new to Three.js please let me know how to set position of orthographic camera and how centre the object in screen when model is large?

13

Hi,
Can we use this :

control.object.position.set(camX, camY, camZ);
control.target = new THREE.Vector3(targetX, targetY, targetZ);

If yes, then what will be camX,camY,camZ value?

14

You can derive these values of the model’s bounding box. I highly recommend that you study how other viewers automatically compute camera related values and how they center a model after the loading process. One typical recommendation is the following three.js based gltf-viewer. Check out the following code section in order to implement the mentioned features (object is the loaded model):

15

Thank you so much, Mugen87 :slight_smile:

Achieved centering objects/Models.
But need to fix zoom IN and Zoom out programatically based on model size.?

16

Sry, no idea how to do that. Maybe you can derive the value from the size of the model’s bounding box, too.

17

It’s OK,
How can we fix the below issue.
In below image while rotating object using mouse (orbit controls) object/3Dmodel disappears.?

This is Initialization:

var frustumSize = 10000;
var far: 10000;
var near = 1;
posCamera = new THREE.Vector3(0.0,100.0, 100.0),

Is there anything wrong with orbit controls or Orthographic camera.

19

Found solution by self :blush:

var frustumSize = 10000;
var far: 10000;
var near = -10000;
posCamera = new THREE.Vector3(0.0,100.0, 100.0),

Thanks @Mugen87 for providing solutions.
Thanks for your time :slight_smile:

1 Like