在react项目中使用three.js 加载3D模型 并且支持旋转

在React项目中结合Three.js加载3D模型并支持旋转，首先需要安装Three.js库。你可以通过npm或yarn命令行工具安装：

npm install three @types/three
# 或者
yarn add three @types/three

接下来，在组件中引入并创建Three.js的基础结构：

import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';

function ThreeModel() {
  const containerRef = useRef(null);
  const modelLoader = new THREE.GLTFLoader();

  useEffect(() => {
    // 加载3D模型
    modelLoader.load('/path/to/model.glb', (gltf) => {
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

      // 将模型添加到场景中
      gltf.scene.position.set(0, 0, -5); // 设置模型初始位置
      scene.add(gltf.scene);

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      containerRef.current.appendChild(renderer.domElement);

      // 渲染函数
      function animate() {
        requestAnimationFrame(animate);
        camera.rotation.y += 0.01; // 实现相机自旋
        renderer.render(scene, camera);
      }
      
      animate(); // 开始动画
    }, undefined, /*onProgress*/ null, /*onError*/ () => console.error('Model loading error'));
  }, []);

  return (
    <div ref={containerRef}>
      {/* 渲染区域 */}
    </div>
  );
}

export default ThreeModel;

在这个例子中，我们创建了一个React组件，使用`useRef`获取DOM容器，然后使用`GLTFLoader`加载3D模型。加载完成后，我们设置了相机、场景，并创建了渲染器。`animate`函数负责每一帧更新摄像机的位置和旋转，从而实现模型的旋转。