How to move camera with mouse move instead of mouse click

user_14208077 0
Viewed 1029

I was using react-three-fiber package and wanted to implement camera movement feature with mouse move instead of mouse click. For example, if you visit roundme.com then you will see a picture of a tour and when you move mouse camera, kinda, moves towards the position of pointer. So, to achieve it I decided to get current position of mouse and put that position to OrbitControls like this:

import React, { Suspense, useRef } from "react";
import { Canvas } from "react-three-fiber";
import { Html, OrbitControls } from "drei";
import "../../styles/index.css";
import { ReactReduxContext, Provider } from "react-redux";
import Portals from "../Portal/portal.component";

const Panorama = () => {
  const mouse = useRef({ x: 0, y: 0 });

  function getMousePos(e) {
    console.log(e.clientX, e.clientY);
    return { x: e.clientX, y: e.clientY };
  }
  return (
    <>
      <ReactReduxContext.Consumer>
        {({ store }) => (
          <Canvas
            onMouseMove={(e) => (mouse.current = getMousePos(e))}
            invalidateFrameloop
            concurrent
            camera={{ position: [50, 0, 0.1] }}
          >
            <OrbitControls
              enableZoom={true}
              enablePan={true}
              dampingFactor={1}
              minDistance={10}
              maxDistance={500}
              autoRotate
              zoomSpeed={5}
              autoRotateSpeed={0.5}
              rotateSpeed={-1.4}
            />
            <Suspense
              fallback={
                <Html center style={{ color: "white" }}>
                  loading...
                </Html>
              }
            >
              <Provider store={store}>
                <Portals />
              </Provider>
            </Suspense>
          </Canvas>
        )}
      </ReactReduxContext.Consumer>
    </>
  );
};

export default Panorama;

But camera does not move when I move mouse.

three.js reactjs
1 Answers

I'm not sure if you can use this same pattern with drei's OrbitControls, but here is how you can achieve it with the camera-controls package:

import CameraControls from 'camera-controls'

CameraControls.install({ THREE })
extend({ CameraControls })

function Controls() {
  const ref = useRef()
  const camera = useThree((state) => state.camera)
  const gl = useThree((state) => state.gl)
  useFrame((state, delta) => {
    // update camera angles according to mouse position 
    ref.current.azimuthAngle = -state.mouse.x
    ref.current.polarAngle = Math.PI / 2 + state.mouse.y
    ref.current.update(delta)
  })
  return <cameraControls ref={ref} args={[camera, gl.domElement]} />
}

And then simply put <Controls /> inside of your <Canvas />.

user_27548540
Related