React v16环境下使用ThreeJS渲染3D文件的解决方案求助

一、用兼容React 16的@react-three/fiber旧版本 #

• 选对版本：@react-three/fiber的v7.x系列完全兼容React 16，对应的@react-three/drei也要搭配v7版本，避免版本不匹配
• 安装命令：

  npm install @react-three/fiber@^7.0.0 @react-three/drei@^7.0.0
  

• 注意：安装后检查依赖树，要是有其他包强制要求React 17+，可能需要调整这些依赖的版本，避免冲突

二、直接用原生ThreeJS集成 #

不用依赖React封装库，自己在组件里手动实现ThreeJS逻辑，步骤如下：

1. 安装原生ThreeJS：

   npm install three@^0.132.0
   

   这个版本和React 16生态兼容性较好，稳定无冲突
2. 组件示例（函数组件）：

   import React, { useEffect, useRef } from 'react';
   import * as THREE from 'three';
   import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
   
   const ThreeModelViewer = () => {
     const containerRef = useRef(null);
   
     useEffect(() => {
       if (!containerRef.current) return;
   
       // 初始化核心对象
       const scene = new THREE.Scene();
       const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
       const renderer = new THREE.WebGLRenderer({ antialias: true });
       renderer.setSize(window.innerWidth, window.innerHeight);
       containerRef.current.appendChild(renderer.domElement);
   
       // 添加光源（模型显示需要）
       const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
       scene.add(ambientLight);
       const spotLight = new THREE.SpotLight(0xffffff, 0.8);
       spotLight.position.set(10, 10, 10);
       scene.add(spotLight);
   
       // 加载.glb/.gltf模型
       const loader = new GLTFLoader();
       loader.load(
         '/your-model-path.glb',
         (gltf) => {
           scene.add(gltf.scene);
           // 可按需调整模型位置、缩放
           gltf.scene.scale.set(0.5, 0.5, 0.5);
         },
         (xhr) => console.log(`加载进度：${(xhr.loaded / xhr.total) * 100}%`),
         (error) => console.error('模型加载失败：', error)
       );
   
       camera.position.z = 6;
   
       // 动画循环
       const animate = () => {
         requestAnimationFrame(animate);
         renderer.render(scene, camera);
       };
       animate();
   
       // 组件卸载时清理资源，防止内存泄漏
       return () => {
         containerRef.current?.removeChild(renderer.domElement);
         renderer.dispose();
       };
     }, []);
   
     return <div ref={containerRef} style={{ width: '100%', height: '80vh' }} />;
   };
   
   export default ThreeModelViewer;
   

三、其他替代工具包 #

• react-three-renderer：早期的React封装ThreeJS的库，支持React 16，能加载.glb/.gltf模型，虽然维护频率不如fiber，但基础渲染需求完全能满足
• A-Frame + react-aframe：A-Frame是WebXR框架，用HTML标签式语法写3D场景，通过react-aframe可轻松集成到React项目中，加载.gltf模型方便，学习成本低

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