@sms0nhaaa/r3f-axie-starter
v0.0.5
Published
Axie Starter: Buba, Pomodoro, and Puffy
Downloads
6
Maintainers
Readme
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