React 使用 three.js 加载 gltf 3D模型,如何支持放大缩小拖动

在React应用中结合three.js加载GLTF(JavaScript虚拟纹理格式)的3D模型并实现缩放、平移和旋转交互，你需要做以下几个步骤：

1. 安装依赖：
首先确保已安装`@loaders.gl/gltf`和`react-three-fiber`库，可以使用npm或yarn添加它们：

npm install @loaders.gl/gltf react-three-fiber
# 或者
yarn add @loaders.gl/gltf react-three-fiber

2. 导入并加载模型：
创建一个组件，例如`GltfModel.js`，导入`useLoader`函数，它从`@loaders.gl/gltf`提供对gltf的支持：

import { useLoader } from 'react-three-fiber';
import { GLTFLoader } from '@loaders.gl/gltf';

function GltfModel({ url }) {
  const gltf = useLoader(GLTFLoader, url);
  
  // 将加载的模型渲染到场景中
  return <primitive object={gltf.scene} />;
}

3. 添加交互功能：
使用`react-spring`库（或其他动画库）来处理缩放和平移。给模型添加事件监听器，并创建关键帧动画来响应用户的输入：

import { useSpring } from 'react-spring';

// ...

function GltfInteractiveModel({ url }) {
  const scaleRef = useRef(new THREE.Vector3(1, 1, 1));
  const positionRef = useRef(new THREE.Vector3());

  const [{ scale, position }, set] = useSpring({
    scale: scaleRef.current,
    position: positionRef.current,
    config: {/* your animation configuration */}
  });

  // 监听用户输入
  function onScaleChange(scaleValue) {
    scaleRef.current.set(scaleValue);
    set();
  }

  function onPositionChange(positionValue) {
    positionRef.current.copy(positionValue);
    set();
  }

  return (
    <>
      <GltfModel url={url} scale={scale} position={position} />
      {/* 添加鼠标或触摸事件处理器 */}
      <input type="range" min="0.5" max="2" value={scale.x} onChange={onScaleChange} />
      <input type="range" min="-10" max="10" value={position.x} onChange={onPositionChange} />
    </>
  );
}

export default GltfInteractiveModel;

现在，你已经有了一个可缩放、可移动的3D模型。