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

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

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

1. 首先，确保你已经正确引入了three.js和GLTFLoader的库文件。
2. 在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;

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

• 在组件的return语句中，将容器ref作为属性传递给最外层的div元素。这样，React会将该div元素与容器ref关联起来。

关于GLTFLoader未在React中显示模型，但在控制台中提供无穷大的加载百分比的问题，这可能是因为加载过程出现了错误。可以在GLTFLoader的加载完成回调函数中添加错误处理逻辑，以查看详细的错误信息，并进行相应的处理。

需要注意的是，上述代码只是一个简单的示例，具体的实现还需要根据你的项目结构和需求进行适当调整。此外，为了更好地与React进行集成，可能需要了解如何处理three.js中的事件、动画等特性与React组件的交互。

推荐腾讯云相关产品：云开发（CloudBase），云服务器（CVM），对象存储（COS），内容分发网络（CDN）。你可以通过腾讯云官网查找详细的产品介绍和文档。