Hey guys I want this camera movement effect —> Shopping - CodeSandbox in my project, but I am having trouble implementing it. When I take the relevant code, which is the code inside the useFrame, yes it applies the effect to my camera HOWEVER, it resets the position that I have set for my camera. Im not sure what to modify in the useFrame() easing.damp3() in order to preserve the position and target that I have set for my camera.
Here is my code(simplified),
<>
<PerspectiveCamera
ref={livingRoomCam}
fov={50}
filmGauge={135}
makeDefault
aspect={size.width / size.height}
left={-1}
right={1}
top={1}
bottom={-1}
near={0.1}
far={3000}
position={[65, 137, 153]}
rotation={[-0.2, -0, -0]}
/>
<OrbitControls
makeDefault
ref={controls}
position={[65, 137, 153]}
target={[52, 101, -46]}
/>
<Effects />
</>
This is the code I took from the example.
function Effects() {
const { size } = useThree();
useFrame((state, delta) => {
easing.damp3(
state.camera.position,
[
state.pointer.x ,
1 + state.pointer.y / 2,
8 + Math.atan(state.pointer.x * 2),
],
0.3,
delta
);
state.camera.lookAt(state.camera.position.x * 0.9, 0, -4);
});
return (
<EffectComposer
stencilBuffer
disableNormalPass
autoClear={false}
multisampling={4}
>
</EffectComposer>
);
}