How to rotate the camera clockwise?

Questions
, , , ,
1 
const handleButtonClick = async (targetRef) => {
  const currentPos = await refs.cameraControlsRef.current.getPosition();
  const target = await targetRef.current.position;

  const geometry = targetRef.current.children[0].children[0].geometry;

  const faceNormals = targetRef.current.children[0].children[0].geometry.attributes.normal.array;


  const center = new THREE.Vector3();
  geometry.computeBoundingBox();
  geometry.boundingBox.getCenter(center);
  targetRef.current.localToWorld(center);


  const normal = new THREE.Vector3();
  faceNormals.forEach((n, i) => {
    if (i % 2 !== 1) {
      normal.set(n, faceNormals[i+1], faceNormals[i+2]);
      targetRef.current.children[0].children[0].matrixWorld.extractRotation(targetRef.current.children[0].children[0].matrixWorld);
      normal.applyMatrix4(targetRef.current.children[0].children[0].matrixWorld);
      normal.negate(); // Invert the direction of the normal vector
      return;
    }
  });





  const distance = 15;
  const cameraPosition = center.clone().add(normal.clone().multiplyScalar(distance));
  

  gsap.to(currentPos, {
    duration: 1,
    x: cameraPosition.x,
    y: cameraPosition.y,
    z: cameraPosition.z,
    onUpdate: () => {
      refs.cameraControlsRef.current.setPosition(currentPos.x, currentPos.y, currentPos.z);
      refs.cameraControlsRef.current.setLookAt(
        cameraPosition.x,
        cameraPosition.y,
        cameraPosition.z,
        target.x,
        target.y,
        target.z,

        true
      );

    },

  });
console.log(refs.cameraControlsRef.current);
  
};

this code is supposed to bring the camera towards a mesh and align it with it. rotating the camera around its own axis using CameraControls just seems impossible. here is how the problem looks like: pls rotate - Album on Imgur - two of those meshes arent pointing up and there is just no means of rotating camera so that its aligned with the mesh on z axis. what should i do ? thanks

2

I’m not familiar with gsap and setLookAt, but traditionally look-at functions in Computer Graphics require three vectors – position, target and up. The up vector is the one that does clockwise or counterclockwise rotation of the camera. Your code is gsapping only position and target. Maybe it has to gsap up too? (the up vector must match the direction of the top of the plate).

image
image785×609 20.6 KB

3

thanks for your help ! this actually worked, eventhough i already tried it before. i tried to update the cameras up with the meshes up, but it didnt work. then someone from three.js discord suggested i use vector3(0,1,0) instead (which is the same as the targets up…) and it magically worked.