标签: react-use-gesture

我希望能够使用 React-三纤维和正交相机在画布中将对象拖动到平面上（想象一下棋盘上的棋子）。

这是使用固定相机位置的示例（不是我的）：https://codepen.io/kao​​lay/pen/bqKjVz

但我也希望能够移动相机 - 所以我添加了轨道控件，当拖动对象时该控件将被禁用。

我这里有一个代码沙箱，我的尝试基于许多其他示例： https://codesandbox.io/s/inspiring-franklin-2r3ri ?file=/src/Obj.jsx

主要代码位于两个文件中，App.jsx 以及画布、相机和轨道控件。Obj.jsx 包含被拖动的网格以及使用手势 useDrag 函数内部的拖动逻辑。

应用程序.jsx

import React, { useState } from "react";
import { Canvas } from "@react-three/fiber";
import Obj from "./Obj.jsx";
import { OrthographicCamera, OrbitControls } from "@react-three/drei";
import * as THREE from "three";

export default function App() {
  const [isDragging, setIsDragging] = useState(false);

  return (
    <Canvas style={{ background: "white" }} shadows dpr={[1, 2]}>
      <ambientLight intensity={0.5} />
      <directionalLight
        intensity={0.5}
        castShadow
        shadow-mapSize-height={512}
        shadow-mapSize-width={512}
      />

      <mesh rotation={[-Math.PI / 2, 0, …

文档中的拖动示例（例如此示例）速度非常快，并且非常准确地映射到我的手指位置。我尝试一对一复制示例，但与我的手指位置相比有明显的滞后。

这是一个代码沙箱示例，在真实设备上测试时有明显的滞后。

信息：

• React 使用手势版本：（我已经尝试了各种版本组合，但没有影响，但这是codesandbox 中的配置）

    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0",
    "react-spring": "9.1.2",
    "react-use-gesture": "9.1.3"

• 设备：iPhone 12 Pro Max
• 操作系统：[例如iOS14.5.1]
• 浏览器镀铬

function PullRelease() {
  const [{ x }, api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ movement: [mx], down }) =>
    api.start({ x: down ? mx : 0 })
  );
  return (
    <animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
      Hello World
    </animated.div>
  );
}