CODEWITHSUNDEEP
three.js
anuj rajput
anuj rajput

Reputation: 337

Rotate orbit controls (three js) by 90 degree

i have a plane in three js and i want to rotate it by 90 degree, i am using orbit controls. Currently, i am using below code for this, but it is not working correctly:

controls.customRotate(Math.PI / 2);

Upvotes: 2

Views: 7304

Answers (3)

Mateusz Mościcki
Mateusz Mościcki

Reputation: 31

  1. Specify rotation in degrees:
const deg = 90;
  1. Convert degrees to radians:
const rad = THREE.MathUtils.degToRad(deg);
  1. Get current camera position:
const cx1 = camera.position.x;
const cy1 = camera.position.y;
const cz1 = camera.position.z;
  1. Calculate new camera position:
const cx2 = Math.cos(rad) * cx1 - Math.sin(rad) * cz1;
const cy2 = cy1;
const cz2 = Math.sin(rad) * cx1 + Math.cos(rad) * cz1;
  1. Set new camera position:
camera.position.set(cx2, cy2, cz2);
  1. Repeat last steps to target (optional):
const tx1 = target.x;
const ty1 = target.y;
const tz1 = target.z;

const tx2 = Math.cos(rad) * tx1 - Math.sin(rad) * tz1;
const ty2 = ty1;
const tz2 = Math.sin(rad) * tx1 + Math.cos(rad) * tz1;

target = new THREE.Vector3(tx2, ty2, tz2);

Upvotes: 3

Goon Nguyen
Goon Nguyen

Reputation: 1520

I know this is old, but someone might need this. I've found this plugin and it's totally awesome: https://github.com/yomotsu/camera-controls

You can rotate it with: rotateTo( azimuthAngle, polarAngle, enableTransition )

Upvotes: 3

Jirka Zvěřina
Jirka Zvěřina

Reputation: 33

If you are using orbit controls, just move your camera to a position you want.

controls = new THREE.OrbitControls(camera, renderer.domElement);

camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 0;

front view

camera.position.x = 0;
camera.position.y = 40;
camera.position.z = 40;

left view

Upvotes: 2

Related Questions