three.js GLTFLoader未在React中显示模型，并在控制台中提供了无穷大的加载百分比

three.js是一个轻量级的JavaScript库，用于在Web浏览器中创建和显示3D图形。GLTFLoader是three.js中的一个插件，用于加载和显示使用GLTF格式表示的3D模型。

在React中显示three.js模型时，需要将three.js的初始化和渲染逻辑集成到React组件中。以下是一般的实现方式：

首先，确保你已经正确引入了three.js和GLTFLoader的库文件。
在React组件中，创建一个ref引用来保存three.js的渲染容器。例如：

import React, { useRef, useEffect } from 'react';

function MyModelViewer() {
  const containerRef = useRef(null);

  useEffect(() => {
    // 在组件挂载时初始化three.js场景
    const container = containerRef.current;
    // 创建场景、相机等three.js对象，并设置渲染器

    // 使用GLTFLoader加载模型文件，并将其添加到场景中

    // 渲染场景

    return () => {
      // 在组件卸载时清理three.js资源
      // 例如，移除事件监听器、释放内存
    };
  }, []);

  return <div ref={containerRef} />;
}

export default MyModelViewer;

在组件的useEffect函数中，进行three.js的初始化、加载模型和渲染操作。具体操作步骤如下：
- 创建场景、相机和渲染器，并设置其相关属性，例如背景色、渲染尺寸等。
- 使用GLTFLoader加载模型文件。可以使用GLTFLoader的load方法，传入模型文件的URL，并在加载完成后将模型添加到场景中。例如：
- 使用GLTFLoader加载模型文件。可以使用GLTFLoader的load方法，传入模型文件的URL，并在加载完成后将模型添加到场景中。例如：
- 渲染场景。使用渲染器的render方法，在每一帧中更新场景的状态并进行渲染。