Next.js中OrbitControls失效求助：鼠标无法旋转相机

核心问题分析 #

你的OrbitControls失效主要有两个关键原因：

• Canvas的-z-10层级设置导致鼠标事件被上层元素拦截，控件无法接收交互输入
• 手动添加的PerspectiveCamera未设置为默认相机，OrbitControls可能绑定到了Canvas自动创建的默认相机而非你定义的相机

具体修复步骤 #

1. 调整Canvas的z-index层级 #

移除className中的-z-10，确保Canvas处于可接收鼠标事件的层级：

<Canvas
  className={clsx("w-screen h-screen relative", className)}
  shadows={true}
  dpr={[1, 2]}
>

2. 让自定义相机成为默认相机 #

给PerspectiveCamera添加makeDefault属性，确保OrbitControls绑定到你配置的相机：

<PerspectiveCamera 
  makeDefault
  position={[0, 0, 5]} 
  fov={75} 
  near={0.1} 
  far={1000} 
/>

3. 可选：手动绑定相机到OrbitControls #

如果上述步骤仍不生效，可以显式给OrbitControls指定camera属性（需要通过useThree hook获取相机）：

import { useThree } from '@react-three/fiber';

// 在组件内部获取相机
const { camera } = useThree();

// 然后给OrbitControls赋值
<OrbitControls
  camera={camera}
  minZoom={2}
  maxAzimuthAngle={20}
  enableZoom={true}
  enablePan={true}
  enableRotate={true}
/>

修复后的完整代码 #

"use client";

import React from "react";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import clsx from "clsx";

interface RenderModelProps {
  children: React.ReactNode;
  className?: string;
}

const RenderModel: React.FC<RenderModelProps> = ({ children, className }) => {
  return (
    <Canvas
      className={clsx("w-screen h-screen relative", className)}
      shadows={true}
      dpr={[1, 2]}
    >
      <PerspectiveCamera 
        makeDefault
        position={[0, 0, 5]} 
        fov={75} 
        near={0.1} 
        far={1000} 
      />
      <OrbitControls
        minZoom={2}
        maxAzimuthAngle={20}
        enableZoom={true}
        enablePan={true}
        enableRotate={true}
      />
      <mesh>
        <boxGeometry />
        <meshBasicMaterial color={"blue"} />
      </mesh>
      {children}
    </Canvas>
  );
};

export default RenderModel;

额外验证点 #

• 检查页面中是否有其他绝对定位元素覆盖在Canvas上方，导致鼠标事件无法穿透
• 确认依赖版本兼容性：你的@react-three/drei、@react-three/fiber和three版本匹配，无需降级

内容的提问来源于stack exchange，提问作者d41d8cd98f00b204e9800998ecf842