Axie Starter

Create new adventure with Buba, Pomodoro, and Puffy using @react-three/fiber and threejs.

Installation

npm i @sms0nhaaa/r3f-axie-starter three-stdlib

yarn add @sms0nhaaa/r3f-axie-starter three-stdlib

bun add @sms0nhaaa/r3f-axie-starter three-stdlib

Please make sure that your development server is running on port 3000

For anyone using Vite, update your package.json

{
  "scripts": {
    "dev": "vite --port 3000",
    "build": "vite build",
    "preview": "vite preview"
  }
  // ...
}

Usage

export type OutlinesProps = {
  /** Outline color */
  color: string
  /** Outline opacity */
  opacity: number
  /** Outline thickness */
  thickness: number
}

type AxieStarterProps = JSX.IntrinsicElements['group'] & {
  /** Number of frames to render, Infinity */
  outline?: OutlinesProps
  /** Animation to play  */
  animation?:
    | 'idle'
    | 'idleattack'
    | 'idlecarryitem'
    | 'jump'
    | 'run'
    | 'runattack'
    | 'runcarryitem'
    | 'walk'
    | 'walkattack'
    | 'walkcarryitem'
  /** Scaling factor for the time. A value of 0 causes the animation
   * to pause. Negative values cause the animation to play backwards.
   * Default is 0.8   */
  timeScale?: number
}

import { Buba, Pomodoro, Puffy } from '@sms0nhaaa/r3f-axie-starter'

<Buba
  animation="idle"
  outline={{ color: 'black', opacity: 1, thickness: 0.03 }}
  position={[0, 0, 0]}
  timeScale={1}
/>
<Puffy
  animation="idle"
  outline={{ color: 'black', opacity: 1, thickness: 0.03 }}
  position={[2, 0, 0]}
  timeScale={1}
/>
<Pomodoro
  animation="idle"
  outline={{ color: 'black', opacity: 1, thickness: 0.03 }}
  position={[-2, 0, 0]}
  timeScale={1}
/>

Tutorials

1. Create Nextjs projects

npx create-next-app@latest

yarn create next-app

bunx create-next-app

The ideal NextJs project config

What is your project named?  axie-adventure
Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  Yes
Would you like to use `src/` directory?  No
Would you like to use App Router? (recommended)  Yes
Would you like to customize the default import alias?  Yes

2. Install the dependencies

npm i @sms0nhaaa/r3f-axie-starter three @react-three/fiber @react-three/drei three-stdlib

yarn add @sms0nhaaa/r3f-axie-starter three @react-three/fiber @react-three/drei three-stdlib

bun add @sms0nhaaa/r3f-axie-starter three @react-three/fiber @react-three/drei three-stdlib

3. Setup the scene

// app/page.tsx
'use client'

import { OrbitControls } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
import { Buba, Pomodoro, Puffy } from '@sms0nhaaa/r3f-axie-starter'

export default function Home() {
  return (
    <main className="flex w-screen h-screen">
      <Canvas>
        <ambientLight intensity={2} />
        <directionalLight intensity={1} position={[10, 10, 5]} />
        <directionalLight intensity={2} position={[-10, -10, -5]} />
        <OrbitControls
          enableDamping
          dampingFactor={0.05}
          enablePan={false}
          maxPolarAngle={Math.PI / 0.01}
          minPolarAngle={Math.PI / 10}
          rotateSpeed={1.1}
        />

        <Buba
          animation="idle"
          outline={{ color: 'black', opacity: 1, thickness: 0.03 }}
          position={[0, 0, 0]}
          timeScale={1}
        />
        <Puffy
          animation="idle"
          outline={{ color: 'black', opacity: 1, thickness: 0.03 }}
          position={[2, 0, 0]}
          timeScale={1}
        />
        <Pomodoro
          animation="idle"
          outline={{ color: 'black', opacity: 1, thickness: 0.03 }}
          position={[-2, 0, 0]}
          timeScale={1}
        />
      </Canvas>
    </main>
  )
}

4. Run the project

npm run dev

yarn dev

bun dev

Please make sure that your development server is running on port 3000