跳到主要内容

快速开始

介绍​

本项目利用 React 和 Three.js 创建了一个强大的工具包，用于构建交互式的 3D 应用程序。它提供了初始化和管理 3D 场景的组件和工具，支持带有缓存功能的模型加载、添加交互式弹出窗口以及使用天空盒设置逼真的背景。通过全局注册组件和导出实用类，确保了在应用程序的不同部分中无缝集成和易于使用。

安装 Three.js​

pnpm i three

快速开始​

  • 使用 pnpm 或 yarn 或 npm 安装 react-three-lite
pnpm i react-three-lite
  • 在你的 React 应用中从 react-three-lite 导入所需的组件。
import { Scene, GLTFLoader } from 'react-three-lite'

function App() {
  return (
    <Scene>
      <GLTFLoader modelUrl="/models/model.glb" />
    </Scene>
  )
}
  • 深入阅读我们的详细文档和实际示例，以充分发挥 react-three-lite 在您的 React 项目中的潜力。

特性​

场景管理​

  • 自动初始化：组件挂载时自动初始化 3D 场景，设置渲染器、相机，光源、辅助坐标轴和控制器。
  • 事件回调：提供 onCreated 回调，当场景初始化时触发，允许父组件与场景进行交互。
  • 可选属性：支持对渲染器、相机，光源、辅助坐标轴和控制器进行自定义配置，满足不同应用需求。
  • 子组件支持：允许通过 children 插入其他内容，增强灵活性。

天空盒​

  • 背景设置：使用六张图片（右、左、上、下、前、后）作为 3D 场景的背景，设置天空盒。
  • 纹理加载：使用 Three.js 的 CubeTextureLoader 加载立方体纹理。
  • 无缝集成：轻松集成到场景中，提供逼真的背景效果。

模型加载器​

  • 模型加载：将 3D 模型加载到指定的场景中。
  • 缓存机制：使用 IndexedDB 缓存模型，减少后续请求的加载时间。
  • 异步加载：通过 fetch API 异步加载模型，并将其解析为 Three.js 对象。
  • 回调函数：提供 onLoaded 回调，在模型成功加载并添加到场景时通知。

弹出窗口​

  • 自定义弹窗：创建包含自定义 React 组件的弹出窗口。
  • 定位和移动：允许弹出窗口在 3D 空间中定位，并在指定时间内平滑移动。
  • CSS2D 集成：使用 Three.js 的 CSS2DRenderer 在 3D 场景中渲染 HTML 元素。
  • 生命周期管理：通过 create、moveTo 和 update 方法管理弹出窗口的生命周期。