I have used useFrame hook to get the current camerapositions and rotation . and i have added some buttons for particular positions. but when i change planes position (i.e; when i drag the 3dspace using right mouse button) and i will set the position based on that current position which i have now in useFrame. then after i refresh and navigate to that position by clicking the btn i dont navigate to correct posiotn. but if i didnt move the plane, but only rotate and zoom and set a position then im able to navigate to the correct position. but only with roation and zooming . i will not get the disred position in my 3d space. how can i achieve this?
I have small problems with understanding your needs…
So, do you have two logics: for the plane
, and camera
?
Because what you are talking about is not plane
manipulation but camera
manipulation, specifically pan
…
…also you saying, that you have buttons… but for what? For storing camera
position or plane
(if you have separate logics)…
Anyway, could you share some example with this issue?
Hi Lukas, thanks for the reply,
i had some predifined objects stored for some random camera positions and rotatios initially. when i click each button im setting cameraPosition from that. but when i move plane . and set the positions i wasnt getting the correct positions. But now i have added one more field target from controls object ,because i was also using orbitalCOntrols. now im able to nvaigate to the correct positions even if i moved the plane.
It’s really a bit hard to understand what you mean… Once, for another question, I made an example [probably] with something similar to what you’re talking about. Raycaster
is used instead of buttons, but I don’t think that matters in the context of your question. If this is not what you are talking about, it would be good if you could send some code for us to examine…
const cameraPositions = [
{
name: ‘IT’,
position: [-5.481855137394655, -1.3353487086855464, 3.4076973620632596],
rotation: [-0.2582056431420062, -1.2557086985944457, -0.24601295069021087],
target:[0.25199922037460026,-1.812572528488735,1.6007238607894454],
fov: 50
},
{
name: ‘MT’,
position: [-2.535609959241647,-1.6888006384386336,2.4224729244961183],
rotation: [-0.5523979631523849,-0.9300026752381965,-0.4589382421166179],
target:[-0.16929103688579739,-2.5838987591716447,0.9224940516809402],
fov: 50
},
// Add more camera positions and rotations as needed
];
// camera navigation component for buttons
const CameraNavigation = ({ camera, setCameraPosition }) => {
return (
<div className={styles[“camera-navigation”]}>
{cameraPositions.map((position, index) => (
<button key={index} onClick={() => {
const newPosition = { …position };
setCameraPosition(newPosition);
// Reset the camera controls to the default values
}}>
Camera {position.name}
</button>
))}
</div>
);
};
const CameraController = ({ cameraPosition, controls }) => {
const cameraRef = useRef();
useEffect(() => {
if (cameraRef.current && controls.current) {
const defaultPosition = cameraPositions[1]; // Set a default camera position
cameraRef.current.position.set(…(cameraPosition || defaultPosition).position);
cameraRef.current.rotation.set(…(cameraPosition || defaultPosition).rotation);
cameraRef.current.fov = (cameraPosition || defaultPosition).fov;
cameraRef.current.updateProjectionMatrix();
controls.current.target.set(...(cameraPosition || defaultPosition).target);
controls.current.update(); // important to re-sync controls
}
}, [cameraPosition, controls]);
return ;
};
// main component
const [cameraPosition, setCameraPosition] = useState(cameraPositions[1]);
const controls = useRef(null);
<OrbitControls
enablePan={false}
ref={controls}
// target={[0, 0, 0]}
maxPolarAngle={Math.PI / 2}
/>
<primitive object={scene} />
previously in the camera posiotn i didnt included target, after including target to each position i am able to navigate to the correct positions.