CODEWITHSUNDEEP
three.js
sathish94us
sathish94us

Reputation: 178

How to do zoom, rotation and pan operations programmatically using trackballcontrols in three.js?

I am trying to do some cad operations like zoom, rotate and pan. I want to provide a button for each operation and do the corresponding operation on click.

Upvotes: 0

Views: 365

Answers (1)

Chantal
Chantal

Reputation: 21

The controls should automatically allow the user to use the mouse to perform those operations. Button controls wouldn't be as smooth or freeform as the default controls, since a click has no direction or duration. For instance, a rotate button would only be able to rotate a certain number of radians at a time in one direction, while the default controls allow for any amount of rotation.

But if you do really want buttons, I'd suggest implementing them in the following ways:

  • Zoom: Two buttons to move the camera's position a certain amount forward or backward.

  • Rotate: Buttons rotate the object n radians.

  • Pan: Buttons shift the camera's position left or right.

You may notice that none of these solutions use Trackballcontrols. Trackballcontrols is a set of mouse controls, it's not meant to be transferred to button commands. You can achieve the same result much more simply by assigning functions to the buttons that change the object's or camera's rotation or position. I think you'll find the following list useful: https://threejs.org/docs/#api/en/core/Object3D. Look at the rotate and translate methods.

Upvotes: 1

Related Questions