gaesup-world 0.0.67 → 0.0.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
# Gaesup World
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/gaesup-world)
|
|
4
|
+
[](https://www.npmjs.com/package/gaesup-world)
|
|
5
|
+
|
|
3
6
|
Web 3D Character Controller and World Platform Library
|
|
4
7
|
|
|
5
|
-
[![]](https://codesandbox.io/p/github/jigglypop/gaesup-world-examples/master?workspaceId=e8ae627a-af61-415e-aa21-1fe5af422c86)
|
|
8
|
+
[](https://codesandbox.io/p/github/jigglypop/gaesup-world-examples/master?workspaceId=e8ae627a-af61-415e-aa21-1fe5af422c86)
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
[](https://www.npmjs.com/package/gaesup-world)
|
|
10
|
+
> click and watch code sandbox example!
|
|
9
11
|
|
|
10
12
|
---
|
|
11
13
|
|
|
@@ -13,6 +15,59 @@ Web 3D Character Controller and World Platform Library
|
|
|
13
15
|
|
|
14
16
|
Gaesup World is a library that uses @react/three-fiber, @react/three-drei, and rapier to provide control tools for characters, airplanes, cars, and more in a web 3D environment. This controller is designed to easily manage character movement, animation, and interaction. It allows for easy manipulation of characters or vehicles in a virtual world, and is also equipped with utilities like minimaps and joysticks.
|
|
15
17
|
|
|
18
|
+
## How to start
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
"use client";
|
|
22
|
+
|
|
23
|
+
import { Environment, KeyboardControls } from "@react-three/drei";
|
|
24
|
+
import { Canvas } from "@react-three/fiber";
|
|
25
|
+
import { Physics, RigidBody } from "@react-three/rapier";
|
|
26
|
+
|
|
27
|
+
import { GaesupController, GaesupWorld } from "gaesup-world";
|
|
28
|
+
|
|
29
|
+
export const keyboardMap = [
|
|
30
|
+
{ name: "forward", keys: ["ArrowUp", "KeyW"] },
|
|
31
|
+
{ name: "backward", keys: ["ArrowDown", "KeyS"] },
|
|
32
|
+
{ name: "leftward", keys: ["ArrowLeft", "KeyA"] },
|
|
33
|
+
{ name: "rightward", keys: ["ArrowRight", "KeyD"] },
|
|
34
|
+
{ name: "space", keys: ["Space"] },
|
|
35
|
+
{ name: "shift", keys: ["Shift"] },
|
|
36
|
+
{ name: "keyZ", keys: ["KeyZ"] },
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
export default function App() {
|
|
40
|
+
const CHARACTER_URL = "./gaesupyee.glb";
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<GaesupWorld
|
|
44
|
+
url={{
|
|
45
|
+
characterUrl: CHARACTER_URL,
|
|
46
|
+
}}
|
|
47
|
+
>
|
|
48
|
+
<Canvas shadows style={{ width: "100dvw", height: "100dvh" }}>
|
|
49
|
+
<Environment background preset="sunset" blur={0.8} />
|
|
50
|
+
<Physics>
|
|
51
|
+
<KeyboardControls map={keyboardMap}>
|
|
52
|
+
<GaesupController
|
|
53
|
+
groupProps={{
|
|
54
|
+
rotation: [0, Math.PI, 0],
|
|
55
|
+
}}
|
|
56
|
+
/>
|
|
57
|
+
</KeyboardControls>
|
|
58
|
+
<RigidBody type="fixed">
|
|
59
|
+
<mesh receiveShadow position={[0, 0, 0]}>
|
|
60
|
+
<boxGeometry args={[300, 5, 300]} />
|
|
61
|
+
<meshStandardMaterial />
|
|
62
|
+
</mesh>
|
|
63
|
+
</RigidBody>
|
|
64
|
+
</Physics>
|
|
65
|
+
</Canvas>
|
|
66
|
+
</GaesupWorld>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
16
71
|
### Features
|
|
17
72
|
|
|
18
73
|
- 3D character control based on React Three Fiber.
|