Character XYZ's Three JS SDK
npm install @characterxyz/three-characterEasily integrate characters from character.xyz into your react-three/fiber scene.
_Click on the image above to watch the promo video._
Add the character library to your project using npm or yarn:
npm:
``bash`
npm install @characterxyz/three-character
yarn:
`bash`
yarn add @characterxyz/three-character
Firstly, you'll need to import the Character from the library:
`typescript`
import { Character } from '@characterxyz/three-character';
Set up your character in a React component:
`typescript`
scene: scene as any,
slug: 'Tamashi-TiAJWr3sWxh79UKd1UDU',
groundLayer: GROUND_LAYER,
}}
/>
Note:
i) When you leave the slug empty, we load the default Tamashi Character. You can also pass the slug with the actual character slug from character.xyz Eg: Tamashi's Slug - "Tamashi-TiAJWr3sWxh79UKd1UDU"
ii) Ground layer is needed for the character to determine where to land when the character jumps r falls off from a cliff. we recommend setting a layer value that is different from the default layer to avoid testing with every visible object.
Place your character into the canvas or game scene:
`typescript`
Here's a full example of setting up a playground with a character:
`typescript
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { Character } from '@characterxyz/three-character';
function PlayerCharacter() {
const { scene } = useThree();
return
}
export default function Playground() {
return (
width: '100vw',
height: '100vh',
position: 'fixed',
top: 0,
left: 0,
zIndex: 0,
}}
>
To try more of our starter projects, please visit our github page - https://github.com/characterxyz/threejs-starter
To explore the full catalogue of characters and load them using their slug, please visit character.xyz