React Three Drei：PresentationControls控件无法使用问题求助

问题代码 #

import React from 'react'
import { PresentationControls, Stage } from '@react-three/drei'
import { Canvas, useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import './styles.css'

export default function App() {
  const { scene } = useLoader(
    GLTFLoader,
    'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf'
  )
  return (
    <Canvas shadows fov={80} near={0.1} far={1000}>
      <Stage>
        <PresentationControls snap={true}>
          <primitive object={scene} />
        </PresentationControls>
      </Stage>
    </Canvas>
  )
}

控制台报错信息 #

[@use-gesture]: 你创建了一个使用`hover`手势的自定义处理器，但配置不正确。

请在创建处理器时添加`hoverAction`。

原因分析 #

报错源于Stage组件与PresentationControls的手势逻辑冲突：Stage默认会启用内置的OrbitControls相机控制器，而你将PresentationControls嵌套在Stage内部，两者的手势处理逻辑相互干扰，触发了@use-gesture的配置错误。

解决办法 #

调整组件层级，将PresentationControls移至Stage外层，并禁用Stage的默认控制器：

import React from 'react'
import { PresentationControls, Stage } from '@react-three/drei'
import { Canvas, useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import './styles.css'

export default function App() {
  const { scene } = useLoader(
    GLTFLoader,
    'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf'
  )
  return (
    <Canvas shadows fov={80} near={0.1} far={1000}>
      <PresentationControls snap={true}>
        <Stage controls={false}>
          <primitive object={scene} />
        </Stage>
      </PresentationControls>
    </Canvas>
  )
}

若不需要Stage提供的环境、灯光等效果，也可直接移除Stage组件，仅用PresentationControls包裹模型即可。

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