R3F出了一个好用的工具包：几行代码就可生成在虚拟世界漫游的场景

❝

介绍一款好用的R3F工具包，只需几行代码即可构建出一个元宇宙雏形来。

代码地址

https://github.com/pmndrs/viverse

这个库的目标，就是把构建复杂 3D 交互场景中那些最繁琐、最通用的部分封装成简单易用的 React 组件。让你无需从零开始“造轮子”，专注于创造你的核心体验。

介绍

import{ createRoot }from'react-dom/client'import{Canvas}from'@react-three/fiber'import{Sky}from'@react-three/drei'import{Viverse,SimpleCharacter,FixedBvhPhysicsBody,PrototypeBox}from'@react-three/viverse'createRoot(document.getElementById('root')!).render( {/* 1. 用 Viverse 组件包裹你的场景 */} {/* Drei 的天空、灯光等，完美兼容 */} {/* 2. 只需一行，添加一个可交互的角色！ */} {/* 3. 添加一个带物理碰撞的地面 */} ,)

仅仅十几行代码，你就得到了一个包含以下功能的 3D 场景：

一个功能完备的第一/第三人称角色控制器 ()，支持行走、奔跑、跳跃。
一个基于 BVH 优化的物理世界，角色可以与环境进行真实的碰撞交互。
一个集成了 VIVERSE 平台能力的上下文环境 ()。

核心组件

@react-three/viverse 提供了大量开箱即用的“神兵利器”：

: 场景的根组件和上下文提供者，为所有子组件注入核心功能，如物理世界、VR/AR 支持等。
: 一个“极简但强大”的角色控制器。无需任何配置，就能在场景中拥有一个可操作的玩家角色。
物理系统组件: 如和，极大地简化了 Rapier 物理引擎的集成，让添加碰撞体变得像写 HTML 标签一样简单。
VR/AR 支持: 无缝集成 WebXR，可以轻松地将你的应用扩展到沉浸式设备。
VIVERSE 平台集成: 可以方便地接入 VIVERSE 的用户系统，获取头像 (Avatar)、个人资料，甚至装备物品。
高度可定制: 不喜欢默认的角色模型？想用自己的动画？没问题！官方文档提供了详细的教程，教你如何替换模型、添加自定义动画，甚至构建自己的角色控制器。
可“脱钩”设计: 最棒的一点是，虽然它与 VIVERSE 平台有很好的集成，但文档也明确指出，如果你不需要这些集成，可以轻松地移除它们！这让该库成为了一个通用的 R3F 游戏/交互开发工具包。

为什么要关注

极速原型开发：想验证一个 3D 交互玩法？用这个库，你可以在几分钟内搭建出一个可交互的原型，而不用花几天时间去配置控制器和物理引擎。
pmndrs 的品质保证：出自 React Three Fiber、Drei、Zustand 的同一个团队，它的代码质量、性能优化和 API 设计都遵循了社区的最高标准。
绝佳的学习资源：通过学习这个库的源码和用法，你可以深入理解 R3F 中处理物理、控制、VR 等复杂问题的最佳实践。
模块化与通用性：它不是一个大而全的框架，而是一个个解耦的工具。你可以只用它的角色控制器，或者只用它的物理组件，与你现有的 R3F 项目无缝集成。

总结

@react-three/viverse，是一个为所有 R3F 开发者准备的强大武器库。它将复杂的 3D 交互开发流程大大简化，让我们能站在巨人的肩膀上，更快、更好地创造属于自己的 Web 3D 世界。

无论你是想构建一个简单的在线小游戏、一个产品展示厅，还是一个宏大的虚拟世界，@react-three/viverse 都值得你立刻 npm install。

关于作者

做一只爬的最久的乌龟，保持学习保持好奇，即使慢一点，遇到一点困难，只要最后能到达终点，又有什么关系呢。

毕竟人生没有白走的路，每一步都算数。