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
