How to make both camera movement and page scrolling work together?

[luisvgs]

Hello folks! Sorry for the vague title. I'm currently developing a small project for the company I'm working with. It's a landing page where we present our product, and I'm using Three.js (and three-fiber) for the 3d animations. I'm trying to implement this functionality where the camera slightly moves according to the mouse position (like in this example), as well as this scrolling functionality. The latter works like a charm however, after trying to implement the move-with-mouse camera feature, nothing happens. What am I missing? This is what I tried:

import React, { useState, Suspense, useRef, useEffect } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { PerspectiveCamera, Stars, OrbitControls } from "@react-three/drei";
import "./App.scss";
import state from "./state";
import * as THREE from "three";
import { Block } from "./block";


const Cube = () => {
  const mesh = useRef();
  const [hovered, setHover] = useState(false);
  const [active, setActive] = useState(false);
  useFrame(() => (mesh.current.rotation.x += 0.01));
  return (
    <mesh
      position={[5, -19, 2]}
      ref={mesh}
      scale={active ? 1.5 : 1}
      onClick={() => setActive(!active)}
      onPointerOver={() => setHover(true)}
      onPointerOut={() => setHover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
    </mesh>
  );
};

// Mouse-camera movement
const Rig = () => {
  const { camera, mouse } = useThree();
  const vec = new THREE.Vector3();
  return useFrame(() =>
    camera.position.lerp(
      vec.set(mouse.x * 2, mouse.y * 1, camera.position.z),
      0.02
    )
  );
};

const App = () => {
  const scrollArea = useRef();
  const onScroll = (e) => (state.top.current = e.target.scrollTop);
  useEffect(() => void onScroll({ target: scrollArea.current }), []);
  return (
    <>
      <Canvas
        concurrent
        pixelRatio={1.25}
        camera={{ position: [0, 0, 15], near: 5, far: 40 }}
      >
        <fog attach="fog" args={["#272730", 16, 30]} />
        <ambientLight intensity={0.8} />
        <directionalLight castShadow position={[2.5, 12, 12]} intensity={4} />
        <pointLight position={[10, 10, 10]} intensity={1.5} />
        <Suspense fallback={null}>
          <Block factor={1.5} offset={0}>
            <Cube castShadow />
          </Block>
        </Suspense>
        <OrbitControls />
        <Rig />
      </Canvas>
      <div className="scrollArea" ref={scrollArea} onScroll={onScroll}>
        <div style={{ height: `${state.pages * 100}vh` }} />
      </div>
      <div className="layer" />
    </>
  );
};
export default App;

[drcmda]

this has become so much easier! https://github.com/pmndrs/drei#scrollcontrols