2

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);
anuj rajput
  • 317
  • 1
  • 7
  • 12

3 Answers3

3

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 )

Goon Nguyen
  • 1,462
  • 11
  • 26
2

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

Jirka Zvěřina
  • 33
  • 4
  • Hi, @Jirka thanks a lot, it worked like charm, but their is an issue, after rotation if I zoom in or zoom out, then it starts to rotate as well as zoom together. But if i just zoom without clicking on any rotation, then it works fine. – anuj rajput Mar 02 '16 at 05:16
  • https://stackoverflow.com/questions/49606198/how-to-rotate-90-degree-camera-control-angle-rotate-left-right-side-in-three-js. Please tell this answer. I am waiting for your answer.@anujrajput –  Apr 02 '18 at 07:01
1
  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);
Mateusz Mościcki
  • 11
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 16 '23 at 00:35