OrbitControls 三光纤在下一个 js 中不起作用

Question

这里我希望相机轨道能够使用鼠标与前面的物体进行右、左、上、下旋转，物体显示正常但不是

<OrbitControls/>

我已经使用了

<PerspectiveCamera/>

和

<OrbitControls/>

，但它不起作用任何人都可以帮助我

"use client";

import React, { Suspense } 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 -z-10 relative", className)}
      shadows={true}
      dpr={[1, 2]}
    >
      <PerspectiveCamera 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>
    </Canvas>
  );
};

export default RenderModel;

"@react-three/drei": "^9.105.4",
"@react-three/fiber": "^8.16.2",
"three": "^0.164.1",

Answer 1

删除导入：

import clsx from "clsx";

并将画布替换为：

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

并添加导入

CameraControls

完整脚本：

"use client";

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { Environment, CameraControls } from "@react-three/drei";

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

const RenderModel: React.FC<RenderModelProps> = ({ children, className }) => {
  return (
    <Canvas shadows={true} resize={{ scroll: false }} dpr={[1, 2]}>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Suspense fallback={null}>{children}</Suspense>{" "}
      <spotLight
        intensity={0.5}
        angle={0.1}
        penumbra={1}
        position={[10, 15, 10]}
        castShadow
      />
      <Environment preset="dawn" />
      <CameraControls />
    </Canvas>
  );
};
export default RenderModel;