Toolkit for building React Three Fiber Apps for Viverse and beyond.
npm install @react-three/viverse> Build character-based XR, Desktop, or Mobile web games, the easy way.
``bash`
npm install three @react-three/fiber @react-three/viverse
| A prototype map with the component and its default model. | !render of the code below |
| --------------------------------------------------------------------------- | --------------------------------------------------------------------- |
`tsx
import { createRoot } from 'react-dom/client'
import { Sky } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
import { Viverse, SimpleCharacter, BvhPhysicsBody, PrototypeBox } from '@react-three/viverse'
createRoot(document.getElementById('root')!).render(
,
)
``
> Some familiarity with
> react, threejs, and @react-three/fiber, is recommended.
Get started with building a simple game, take a look at our examples, or follow one of our tutorials:
- First person controls
- Augmented and virtual reality
- Accessing avatar and profile
- Equipping the character with items
- Using custom animations and models
- Actions
- Custom Character Controller
- How to remove the viverse integrations
- Publish to VIVERSE
> No Problem
Check out how to build games using @pmndrs/viverse and only vanilla three.js.
This project would not be possible without the default model and default animations made by Quaternius, the prototype texture from kenney.nl, the three-vrm project from the pixiv team, three-mesh-bvh from Garrett Johnson and is based on prior work from Felix Zhang and Erdong Chen!
The development of this library was sponsored by HTC Viverse.