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

Questions
1 
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();
2

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 instead of setting the rotations directly.

(Also, on a bit unrelated note, but related to the code itself, you may find THREE.MathUtils.degToRad helpful - minimizes the amount of math in code.)

3

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.