@react-three/viverse

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

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

What does it look like?

A prototype map with the <SimpleCharacter/> component and its default model.

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(
  <Canvas shadows>
    <Viverse>
      <Sky />
      <directionalLight intensity={1.2} position={[5, 10, 10]} castShadow />
      <ambientLight intensity={1} />
      <SimpleCharacter />
      <BvhPhysicsBody>
        <PrototypeBox scale={[10, 1, 15]} position={[0, -0.5, 0]} />
      </BvhPhysicsBody>
    </Viverse>
  </Canvas>,
)

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
• How to remove the viverse integrations
• Publish to VIVERSE
• Building your own character controller - Coming Soon

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.