when i zoom in and zoom out in the browser the iframe inside the changes its position.
i am using react three fiber to create a portfolio website. i tried to changing the distanceFactor but it doesn't work.
i tried to changing the distanceFactor but it doesn't work.
import React from "react";
import { Canvas } from "@react-three/fiber";
import { Html, OrbitControls, PresentationControls } from "@react-three/drei";
import { useGLTF } from "@react-three/drei";
const Computer = ({
position,
handleComputerPointerEnter,
handleComputerPointerLeave,
cameraRef,
}) => {
const { scene } = useGLTF("/3d-assets/tab-compressed.glb");
return (
<group position={position}>
<primitive
object={scene}
scale={[0.09, 0.09, 0.09]}
// rotation={[0, Math.PI, 0]}
>
<Html
wrapperClass="laptop "
position={[5.5, 10, 0]}
transform
billboard
// rotation-x={0.25}
// rotation={[0, Math.PI, 0]}
>
<div className="iframe-container">
<iframe
src={`${window.location.origin}/portfolio`}
// src=";
onPointerEnter={handleComputerPointerEnter}
onPointerLeave={handleComputerPointerLeave}
className="space-tab overflow-hidden "
/>
</div>
</Html>
</primitive>
</group>
);
};
export default Computer;