@react-three/viverse

Toolkit for building Three.js and React Three Fiber Apps for VIVERSE and beyond.

> Build character-based XR, Desktop, or Mobile web games, the easy way.

``bash
npm install three @react-three/fiber @react-three/viverse
`

$3

| 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(










,
)
``

How to get started

> 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

Not into react?

> No Problem

Check out how to build games using @pmndrs/viverse and only vanilla three.js.

Acknowledgments

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!

Sponsoring

The development of this library was sponsored by HTC Viverse.