# After applying rotateZ to my object, when I try to rotate it with the mouse, it turns in the wrong direction

**URL:** <https://discourse.threejs.org/t/after-applying-rotatez-to-my-object-when-i-try-to-rotate-it-with-the-mouse-it-turns-in-the-wrong-direction/60183>\
**Category:** Questions\
**Tags:** trackball-controls\
**Created:** [January 11, 2024, 9:22am UTC](https://discourse.threejs.org/t/after-applying-rotatez-to-my-object-when-i-try-to-rotate-it-with-the-mouse-it-turns-in-the-wrong-direction/60183 "2024-01-11T09:22:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hrn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hrn/32/43697_2.png) [@Hrn](https://discourse.threejs.org/u/Hrn)\
**Post date:** [January 11, 2024, 9:22am UTC](https://discourse.threejs.org/t/after-applying-rotatez-to-my-object-when-i-try-to-rotate-it-with-the-mouse-it-turns-in-the-wrong-direction/60183/1 "2024-01-11T09:22:26Z")

</div>

```javascript
import * as THREE from 'three';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
import * as dat from 'dat.gui';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(3, 0, 0);
camera.lookAt(0, 0, 0);
camera.updateProjectionMatrix();

const orbit = new TrackballControls(camera, renderer.domElement);
orbit.rotateSpeed = 4;

const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
const sphereMaterial = new THREE.MeshBasicMaterial({
  wireframe: true,
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

let angle2 = 0;

function yan(a) {
  angle2 = (Math.PI / 180) * a;
}

const gui = new dat.GUI();
const settings = {
  angle: 0,
};

gui.add(settings, 'angle', -180, 180).onChange(function (a) {
  yan(a);
});

function animate() {
  
  orbit.update();

  camera.rotateZ(angle2);

  camera.position.copy(orbit.object.position);
  camera.rotation.copy(orbit.object.rotation);

  camera.updateProjectionMatrix();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

animate();

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 12, 2024, 12:37am UTC](https://discourse.threejs.org/t/after-applying-rotatez-to-my-object-when-i-try-to-rotate-it-with-the-mouse-it-turns-in-the-wrong-direction/60183/2 "2024-01-12T00:37:45Z")

</div>

There’s no mouse-related rotation in the code you’ve shared. When trying to point an object in a specific direction / angle, consider using [Object.lookAt](https://threejs.org/docs/index.html?q=objec#api/en/core/Object3D.lookAt) instead of setting the rotations directly.

(Also, on a bit unrelated note, but related to the code itself, you may find [THREE.MathUtils.degToRad](https://threejs.org/docs/index.html?q=mathuti#api/en/math/MathUtils.degToRad) helpful - minimizes the amount of math in code.)

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [January 12, 2024, 6:03am UTC](https://discourse.threejs.org/t/after-applying-rotatez-to-my-object-when-i-try-to-rotate-it-with-the-mouse-it-turns-in-the-wrong-direction/60183/3 "2024-01-12T06:03:20Z")

</div>

Also, do you want to rotate the object or the camera? The title of your question indicates object, but the code seems to indicate that you are rotating the camera.