如何用鼠标移动而不是鼠标点击来移动相机答案

【问题标题】：How to move camera with mouse move instead of mouse click如何用鼠标移动而不是鼠标点击来移动相机
【发布时间】：2022-03-25 07:09:47
【问题描述】：

我正在使用 react-three-fiber 包，并希望通过鼠标移动而不是鼠标单击来实现相机移动功能。例如，如果您访问roundme.com，那么您将看到一张旅游图片，当您移动鼠标相机时，有点移动到指针的位置。因此，为了实现它，我决定获取鼠标的当前位置并将该位置放到 OrbitControls 中，如下所示：

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;

但是当我移动鼠标时相机不移动。

【问题讨论】：

你在哪里用鼠标位置更新 OrbitControls？

标签： reactjs three.js

【解决方案1】：

我不确定您是否可以在 drei 的 OrbitControls 中使用相同的模式，但您可以通过 camera-controls 包来实现它：

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]} />
}

然后只需将<Controls /> 放入您的<Canvas />。

【讨论】：