gaesup-world 0.1.3 → 0.1.4
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 +220 -228
- package/dist/gaesup/camera/index.js +0 -1
- package/dist/gaesup/component/active/vehicle/wheels.js +4 -2
- package/dist/gaesup/physics/index.js +1 -1
- package/dist/gaesup/physics/vehicle/impulse.d.ts +15 -1
- package/dist/gaesup/physics/vehicle/impulse.js +35 -12
- package/dist/gaesup/tools/joyStick/index.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,63 +5,39 @@
|
|
|
5
5
|
|
|
6
6
|
### Web 3D Character Controller and World Platform Library
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### 
|
|
9
9
|
|
|
10
10
|
## introduction
|
|
11
11
|
|
|
12
|
-
Gaesup World is a library that uses
|
|
12
|
+
- Gaesup World is a library that uses `@react/three-fiber`,` @react/three-drei`, and `react-three-rapier` to provide control tools for characters, airplanes, cars, and more in a web 3D environment.
|
|
13
|
+
|
|
14
|
+
- 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.
|
|
13
15
|
|
|
14
16
|
## How to start
|
|
15
17
|
|
|
16
18
|
```tsx
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
import { Environment, KeyboardControls } from "@react-three/drei";
|
|
20
|
-
import { Canvas } from "@react-three/fiber";
|
|
21
|
-
import { Physics, RigidBody } from "@react-three/rapier";
|
|
22
|
-
|
|
23
|
-
import { GaesupController, GaesupWorld } from "gaesup-world";
|
|
24
|
-
|
|
25
|
-
export const keyboardMap = [
|
|
26
|
-
{ name: "forward", keys: ["ArrowUp", "KeyW"] },
|
|
27
|
-
{ name: "backward", keys: ["ArrowDown", "KeyS"] },
|
|
28
|
-
{ name: "leftward", keys: ["ArrowLeft", "KeyA"] },
|
|
29
|
-
{ name: "rightward", keys: ["ArrowRight", "KeyD"] },
|
|
30
|
-
{ name: "space", keys: ["Space"] },
|
|
31
|
-
{ name: "shift", keys: ["Shift"] },
|
|
32
|
-
{ name: "keyZ", keys: ["KeyZ"] },
|
|
33
|
-
];
|
|
19
|
+
import ...
|
|
34
20
|
|
|
35
21
|
export default function App() {
|
|
36
|
-
const CHARACTER_URL = "
|
|
37
|
-
|
|
22
|
+
const CHARACTER_URL = S3 + "/gaesupyee.glb";
|
|
38
23
|
return (
|
|
39
24
|
<GaesupWorld
|
|
40
25
|
url={{
|
|
41
26
|
characterUrl: CHARACTER_URL,
|
|
42
27
|
}}
|
|
28
|
+
mode={{
|
|
29
|
+
...
|
|
30
|
+
}}
|
|
43
31
|
>
|
|
44
|
-
<Canvas
|
|
45
|
-
<Environment background preset="sunset" blur={0.8} />
|
|
32
|
+
<Canvas>
|
|
46
33
|
<Physics>
|
|
47
|
-
<
|
|
48
|
-
<GaesupController
|
|
49
|
-
groupProps={{
|
|
50
|
-
rotation: [0, Math.PI, 0],
|
|
51
|
-
}}
|
|
52
|
-
/>
|
|
53
|
-
</KeyboardControls>
|
|
54
|
-
<RigidBody type="fixed">
|
|
55
|
-
<mesh receiveShadow position={[0, 0, 0]}>
|
|
56
|
-
<boxGeometry args={[300, 5, 300]} />
|
|
57
|
-
<meshStandardMaterial />
|
|
58
|
-
</mesh>
|
|
59
|
-
</RigidBody>
|
|
34
|
+
<GaesupController />
|
|
60
35
|
</Physics>
|
|
61
36
|
</Canvas>
|
|
62
37
|
</GaesupWorld>
|
|
63
38
|
);
|
|
64
39
|
}
|
|
40
|
+
|
|
65
41
|
```
|
|
66
42
|
|
|
67
43
|
### Features
|
|
@@ -71,7 +47,7 @@ export default function App() {
|
|
|
71
47
|
- Extensible structure for various customizations.
|
|
72
48
|
- Lightweight library for fast loading and performance optimization.
|
|
73
49
|
|
|
74
|
-
|
|
50
|
+
## Installation
|
|
75
51
|
|
|
76
52
|
```bash
|
|
77
53
|
npm install @react-three/fiber @react-three/drei three @types/three @react-three/rapier gaesup-world
|
|
@@ -83,47 +59,43 @@ Or
|
|
|
83
59
|
yarn add @react-three/fiber @react-three/drei three @types/three @react-three/rapier gaesup-world
|
|
84
60
|
```
|
|
85
61
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
it is detailed usage methods and API documentation
|
|
89
|
-
|
|
90
|
-
- [how to contribute](#how-to-contribute)
|
|
91
|
-
|
|
92
|
-
### How to Contribute
|
|
62
|
+
## 4) How to Contribute
|
|
93
63
|
|
|
94
64
|
If you would like to contribute to this project, please follow these steps:
|
|
95
65
|
|
|
96
66
|
1. Fork the project.
|
|
97
|
-
2.
|
|
67
|
+
2. go to dev branch ( git checkout dev ).
|
|
98
68
|
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
|
|
99
|
-
4. Push to the branch (
|
|
69
|
+
4. Push to the branch (git push origin dev).
|
|
100
70
|
5. Create a Pull Request.
|
|
101
71
|
|
|
102
|
-
|
|
72
|
+
## 5) License
|
|
103
73
|
|
|
104
74
|
This project is distributed under the MIT License.
|
|
105
75
|
|
|
106
|
-
|
|
76
|
+
- ## 1. [PlayerType](##PlayerType)
|
|
77
|
+
|
|
78
|
+
- [Character](#Character)
|
|
107
79
|
|
|
108
|
-
|
|
80
|
+
- [Vehicle](#Vehicle)
|
|
109
81
|
|
|
110
|
-
-
|
|
82
|
+
- [Airplane](#Airplane)
|
|
111
83
|
|
|
112
|
-
|
|
113
|
-
- Vehicle
|
|
114
|
-
- Airplane
|
|
84
|
+
* ## 2. [Animation](Animation)
|
|
115
85
|
|
|
116
|
-
|
|
86
|
+
* ## 3. [Rideable](Rideable)
|
|
117
87
|
|
|
118
|
-
|
|
88
|
+
* ## 4. [Passive](Passive)
|
|
119
89
|
|
|
120
|
-
|
|
90
|
+
* ## 5. [Tools](#Tools)
|
|
91
|
+
|
|
92
|
+
- [JoyStick](#1JoyStick)
|
|
121
93
|
|
|
122
94
|
* [keyBoardTooltip](#keyBoardTooltip)
|
|
123
95
|
|
|
124
96
|
* [minimap](#MiniMap)
|
|
125
97
|
|
|
126
|
-
* [gameboy](
|
|
98
|
+
* [gameboy](##GameBoy)
|
|
127
99
|
|
|
128
100
|
- [GamePad](#GamePad)
|
|
129
101
|
|
|
@@ -141,18 +113,18 @@ This is the character control in Gaesup World.
|
|
|
141
113
|
|
|
142
114
|
- Possible Camera Types
|
|
143
115
|
|
|
144
|
-
| Name |
|
|
145
|
-
| ------ |
|
|
146
|
-
| Normal |
|
|
147
|
-
| Orbit |
|
|
116
|
+
| Name | Info |
|
|
117
|
+
| ------ | --------------------------------------------------------------------------------------------- |
|
|
118
|
+
| Normal | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
|
|
119
|
+
| Orbit | Moves with the character and rotates according to the character's direction. |
|
|
148
120
|
|
|
149
121
|
- Controller Tools
|
|
150
122
|
|
|
151
|
-
| Name | Info |
|
|
152
|
-
| -------- | ----------------------------------------------------------------------- |
|
|
153
|
-
| Keyboard | A standard keyboard tool. You can see where on the keyboard is clicked. |
|
|
154
|
-
| Joystick | A joystick implementation tool. It works on mobile devices. |
|
|
155
|
-
| Gameboy | A Gameboy implementation tool. It works on mobile devices. |
|
|
123
|
+
| Name | Condition | Info |
|
|
124
|
+
| -------- | --------------------------- | ----------------------------------------------------------------------- |
|
|
125
|
+
| Keyboard | desktop | A standard keyboard tool. You can see where on the keyboard is clicked. |
|
|
126
|
+
| Joystick | mobile (not normal control) | A joystick implementation tool. It works on mobile devices. |
|
|
127
|
+
| Gameboy | mobile | A Gameboy implementation tool. It works on mobile devices. |
|
|
156
128
|
|
|
157
129
|
## Vehicle
|
|
158
130
|
|
|
@@ -166,15 +138,15 @@ This is the character control in Gaesup World.
|
|
|
166
138
|
|
|
167
139
|
- Controller Tools
|
|
168
140
|
|
|
169
|
-
| Name | Info |
|
|
170
|
-
| -------- | ----------------------------------------------------------------------- |
|
|
171
|
-
| Keyboard | A standard keyboard tool. You can see where on the keyboard is clicked. |
|
|
172
|
-
| Joystick | A joystick implementation tool. It works on mobile devices. |
|
|
173
|
-
| Gameboy | A Gameboy implementation tool. It works on mobile devices. |
|
|
141
|
+
| Name | Condition | Info |
|
|
142
|
+
| -------- | --------- | ----------------------------------------------------------------------- |
|
|
143
|
+
| Keyboard | desktop | A standard keyboard tool. You can see where on the keyboard is clicked. |
|
|
144
|
+
| Joystick | mobile | A joystick implementation tool. It works on mobile devices. |
|
|
145
|
+
| Gameboy | mobile | A Gameboy implementation tool. It works on mobile devices. |
|
|
174
146
|
|
|
175
147
|
## Airplane
|
|
176
148
|
|
|
177
|
-
|
|
149
|
+
the airplane control in Gaesup World. Characters can board the airplane.
|
|
178
150
|
|
|
179
151
|
- Possible Camera Types (only orbit type available)
|
|
180
152
|
|
|
@@ -184,13 +156,11 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
|
|
|
184
156
|
|
|
185
157
|
- Controller Tools
|
|
186
158
|
|
|
187
|
-
| Name | Info |
|
|
188
|
-
| -------- | ----------------------------------------------------------------------- |
|
|
189
|
-
| Keyboard | A standard keyboard tool. You can see where on the keyboard is clicked. |
|
|
190
|
-
| Joystick | A joystick implementation tool. It works on mobile devices. |
|
|
191
|
-
| Gameboy | A Gameboy implementation tool. It works on mobile devices. |
|
|
192
|
-
|
|
193
|
-
---
|
|
159
|
+
| Name | Condition | Info |
|
|
160
|
+
| -------- | --------- | ----------------------------------------------------------------------- |
|
|
161
|
+
| Keyboard | desktop | A standard keyboard tool. You can see where on the keyboard is clicked. |
|
|
162
|
+
| Joystick | mobile | A joystick implementation tool. It works on mobile devices. |
|
|
163
|
+
| Gameboy | mobile | A Gameboy implementation tool. It works on mobile devices. |
|
|
194
164
|
|
|
195
165
|
# Animation
|
|
196
166
|
|
|
@@ -198,7 +168,11 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
|
|
|
198
168
|
|
|
199
169
|
# Rideable
|
|
200
170
|
|
|
201
|
-
- Rideable objects are objects that can be ridden. They detect collisions and allow the character to board when contact is made. Currently, two types of objects, 'vehicle' and 'airplane', can be ridden
|
|
171
|
+
- Rideable objects are objects that can be ridden. They detect collisions and allow the character to board when contact is made. Currently, two types of objects, 'vehicle' and 'airplane', can be ridden.
|
|
172
|
+
|
|
173
|
+
example)
|
|
174
|
+
|
|
175
|
+
<img src="https://jiggloghttps.s3.ap-northeast-2.amazonaws.com/images/rideable.gif" alt="Rideable" style="zoom:150%;" />
|
|
202
176
|
|
|
203
177
|
### (1) Example
|
|
204
178
|
|
|
@@ -287,18 +261,29 @@ export default function App() {
|
|
|
287
261
|
2. **Customizable Properties:** You can easily configure the initial state, size, model URLs, visibility, and more of rideable objects using component properties.
|
|
288
262
|
3. **Interaction with Riders:** The Rideable component supports interactions required for a rider to board and move with rideable objects.
|
|
289
263
|
|
|
290
|
-
### Advantages
|
|
264
|
+
### 5) Advantages
|
|
265
|
+
|
|
266
|
+
- **Modularity and Reusability:** The Rideable component is modular and can be easily integrated with other components, increasing code reusability and facilitating maintenance.
|
|
291
267
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
268
|
+
- **Rapid Development:** By using the `useRideable` hook, which manages the physics engine and rideable object management, developers can quickly implement and render rideable objects, reducing development time.
|
|
269
|
+
|
|
270
|
+
- **Real-time Interaction:** Leveraging the Rapier physics engine allows for real-time handling of rideable object movements and collision checks, providing a high level of interaction in games or simulations.
|
|
271
|
+
|
|
272
|
+
- **Flexible Customization:** You can customize the appearance and behavior of each rideable object using properties, making it suitable for various game or simulation environments.
|
|
273
|
+
|
|
274
|
+
# Passive
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
under construct
|
|
296
279
|
|
|
297
280
|
# GaeSupProps
|
|
298
281
|
|
|
282
|
+
---
|
|
283
|
+
|
|
299
284
|
The `GaeSupProps` component is a React component used in a 3D environment. It is designed to represent various types of props or objects within the scene. This component can be used to create props with different types, text labels, and positions for visualization in a 3D space.
|
|
300
285
|
|
|
301
|
-
|
|
286
|
+
### (1) props
|
|
302
287
|
|
|
303
288
|
The `GaeSupProps` component accepts the following props:
|
|
304
289
|
|
|
@@ -335,25 +320,110 @@ function MyScene() {
|
|
|
335
320
|
|
|
336
321
|
- Various tools that assist with character control in GaesupWorld
|
|
337
322
|
|
|
338
|
-
##
|
|
323
|
+
## GameBoy
|
|
339
324
|
|
|
340
|
-
The
|
|
325
|
+
- The GameBoy component is a controller interface that emulates GameBoy-like directional buttons. It is primarily intended for mobile usage.
|
|
341
326
|
|
|
342
|
-
|
|
343
|
-
| ------------------- | --------------- | -------- | --------------------------- | ------------- |
|
|
344
|
-
| `joyStickBallStyle` | object (styles) | Optional | Style for the joystick ball | `undefined` |
|
|
327
|
+
### (1) props
|
|
345
328
|
|
|
346
|
-
|
|
329
|
+
| Prop Name | Type | Required | Description | Default Value |
|
|
330
|
+
| -------------------- | --------------- | -------- | ------------------------------------ | ------------- |
|
|
331
|
+
| `gamePadStyle` | object (styles) | Optional | Style for the GamePad container | `undefined` |
|
|
332
|
+
| `gamePadButtonStyle` | object (styles) | Optional | Style for individual GamePad buttons | `undefined` |
|
|
333
|
+
| `label` | string | Optional | Custom label for the buttons | `undefined` |
|
|
347
334
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
335
|
+
### (2) example
|
|
336
|
+
|
|
337
|
+
```tsx
|
|
338
|
+
import { GameBoy } from "./GameBoy";
|
|
339
|
+
import { GaesupWorldContext } from "../../world/context";
|
|
340
|
+
|
|
341
|
+
const App = () => {
|
|
342
|
+
return (
|
|
343
|
+
<GaesupWorld>
|
|
344
|
+
{/* ... */}
|
|
345
|
+
<GameBoy
|
|
346
|
+
gameboyStyle={gameboyStyle}
|
|
347
|
+
gameboyButtonStyle={gameboyButtonStyle}
|
|
348
|
+
/>
|
|
349
|
+
{/* ... */}
|
|
350
|
+
</GaesupWorld>
|
|
351
|
+
);
|
|
352
|
+
};
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
### (3) Key Features:
|
|
356
|
+
|
|
357
|
+
- **Direction Buttons:** Implements buttons for directional input (forward, backward, left, right) based on the `GameBoyDirections` array.
|
|
358
|
+
- **Context-aware Rendering:** Renders the component based on the `mode.controller` value from the `GaesupWorldContext`.
|
|
359
|
+
- **Custom Styling:** Provides `gameboyStyle` and `gameboyButtonStyle` properties for styling customization.
|
|
360
|
+
|
|
361
|
+
### (4) How to Use
|
|
362
|
+
|
|
363
|
+
To use the `GameBoy` component:
|
|
364
|
+
|
|
365
|
+
1. Place the `GameBoy` component within your component tree.
|
|
366
|
+
2. Customize the appearance by defining styles in the `gameboyStyle` and `gameboyButtonStyle` properties.
|
|
367
|
+
3. The component renders buttons based on the `GameBoyDirections` array.
|
|
351
368
|
|
|
352
|
-
|
|
369
|
+
## GamePad
|
|
353
370
|
|
|
354
|
-
-
|
|
371
|
+
- The GamePad component provides a customizable controller interface that supports various controller modes, such as joysticks and GameBoys, making it versatile for different input scenarios.
|
|
372
|
+
|
|
373
|
+
### (1) props
|
|
355
374
|
|
|
356
|
-
|
|
375
|
+
| Prop Name | Type | Required | Description | Default Value |
|
|
376
|
+
| -------------------- | --------------- | -------- | ------------------------------------ | ------------- |
|
|
377
|
+
| `gamePadStyle` | object (styles) | Optional | Style for the GamePad container | `undefined` |
|
|
378
|
+
| `gamePadButtonStyle` | object (styles) | Optional | Style for individual GamePad buttons | `undefined` |
|
|
379
|
+
| `label` | string | Optional | Custom label for the buttons | `undefined` |
|
|
380
|
+
|
|
381
|
+
### (2) example
|
|
382
|
+
|
|
383
|
+
```tsx
|
|
384
|
+
import { GamePad } from "./GamePad";
|
|
385
|
+
import { GaesupWorldContext } from "../../world/context";
|
|
386
|
+
|
|
387
|
+
const App = () => {
|
|
388
|
+
return (
|
|
389
|
+
<GaesupWorld>
|
|
390
|
+
{/* ... */}
|
|
391
|
+
<GamePad
|
|
392
|
+
gamePadStyle={gamePadStyle}
|
|
393
|
+
gamePadButtonStyle={gamePadButtonStyle}
|
|
394
|
+
/>
|
|
395
|
+
{/* ... */}
|
|
396
|
+
</GaesupWorld>
|
|
397
|
+
);
|
|
398
|
+
};
|
|
399
|
+
```
|
|
400
|
+
|
|
401
|
+
### (3) Key Features
|
|
402
|
+
|
|
403
|
+
- **Dynamic Button Rendering:** Dynamically generates buttons based on the `control` object in the `GaesupWorldContext`.
|
|
404
|
+
- **Universal Usage:** Compatible with various controller modes like joysticks and GameBoys.
|
|
405
|
+
- **Custom Styling:** Allows customization of the GamePad's appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
|
|
406
|
+
|
|
407
|
+
### (4) How to Use
|
|
408
|
+
|
|
409
|
+
1. Include the `GamePad` component within your component tree.
|
|
410
|
+
2. Customize the appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
|
|
411
|
+
3. The component dynamically renders buttons based on the `control` mode.
|
|
412
|
+
|
|
413
|
+
## JoyStick
|
|
414
|
+
|
|
415
|
+
---
|
|
416
|
+
|
|
417
|
+
- The JoyStick component provides a virtual joystick interface, primarily intended for mobile environments. This component allows you to simulate joystick-like input on mobile devices. Additionally, you can prevent position jitter, which can occur on mobile devices, by using the `scrollBlock` option in the `GaesupWorld` component.
|
|
418
|
+
|
|
419
|
+
### (1) props
|
|
420
|
+
|
|
421
|
+
| Prop Name | Type | Required | Description | Default Value |
|
|
422
|
+
| ------------------- | --------------- | -------- | --------------------------- | ------------- |
|
|
423
|
+
| `joyStickStyle` | object (styles) | Optional | Style for the joystick | `undefined` |
|
|
424
|
+
| `joyStickBallStyle` | object (styles) | Optional | Style for the joystick ball | `undefined` |
|
|
425
|
+
|
|
426
|
+
### (2) example
|
|
357
427
|
|
|
358
428
|
```jsx
|
|
359
429
|
const MyComponent = () => {
|
|
@@ -377,17 +447,60 @@ const MyComponent = () => {
|
|
|
377
447
|
};
|
|
378
448
|
```
|
|
379
449
|
|
|
450
|
+
### (3) Key Features:
|
|
451
|
+
|
|
452
|
+
- **Joystick Interface:** Provides a joystick-like user input interface, suitable for mobile devices.
|
|
453
|
+
- **Customization:** You can customize the style of the JoyStick component by adjusting the styles of the joystick and the joystick ball using the `joyStickBallStyle` and `joyStickStyle` properties.
|
|
454
|
+
- **Responsive and Interactive:** It supports various input devices and responds to both mouse and mobile touch events for controlling movement.
|
|
455
|
+
|
|
456
|
+
## 4) JumpPortal
|
|
457
|
+
|
|
458
|
+
- The `JumpPortal` component represents a clickable portal that allows users to teleport to a specified location within a 3D world. This component can be used to create interactive teleportation points in your application.
|
|
459
|
+
|
|
460
|
+
### (1) props
|
|
461
|
+
|
|
462
|
+
| Prop Name | Type | Required | Description | Default Value |
|
|
463
|
+
| ----------------- | ------------- | -------- | ----------------------------------------------------------- | ------------- |
|
|
464
|
+
| `text` | string | Optional | The text to display on the portal. | `undefined` |
|
|
465
|
+
| `position` | THREE.Vector3 | Required | The target position to teleport to using a `THREE.Vector3`. | None |
|
|
466
|
+
| `jumpPortalStyle` | CSSProperties | Optional | CSS styles for customizing the appearance of the portal. | `undefined` |
|
|
467
|
+
|
|
468
|
+
### (2) example
|
|
469
|
+
|
|
470
|
+
- To use the `JumpPortal` component, you can import it and include it in your React application as follows:
|
|
471
|
+
|
|
472
|
+
```tsx
|
|
473
|
+
import { JumpPortal } from "./JumpPortal";
|
|
474
|
+
import * as THREE from "three";
|
|
475
|
+
|
|
476
|
+
const App = () => {
|
|
477
|
+
return (
|
|
478
|
+
<GaesupWorld>
|
|
479
|
+
{/* ... */}
|
|
480
|
+
<JumpPortal
|
|
481
|
+
text="Teleport"
|
|
482
|
+
position={new THREE.Vector3(10, 0, 5)}
|
|
483
|
+
jumpPortalStyle={{ backgroundColor: "blue", color: "white" }}
|
|
484
|
+
/>
|
|
485
|
+
{/* ... */}
|
|
486
|
+
</GaesupWorld>
|
|
487
|
+
);
|
|
488
|
+
};
|
|
489
|
+
```
|
|
490
|
+
|
|
380
491
|
## KeyBoardToolTip
|
|
381
492
|
|
|
382
|
-
|
|
493
|
+
---
|
|
494
|
+
|
|
495
|
+
- The KeyBoardToolTip component is designed to visually represent a keyboard controller interface, providing a visual representation of each key and its associated action.
|
|
383
496
|
|
|
384
|
-
### Key Features
|
|
497
|
+
### Key Features
|
|
385
498
|
|
|
386
499
|
- **Visualizing Keyboard Keys:** Visualizes all keyboard keys in an array format.
|
|
387
500
|
- **State Animation:** Reflects the currently active keys and their associated actions by displaying them differently to provide user feedback.
|
|
388
501
|
- **Custom Styling:** Provides various styling properties for customizing key caps' appearance.
|
|
389
502
|
|
|
390
|
-
### How to Use
|
|
503
|
+
### How to Use
|
|
391
504
|
|
|
392
505
|
1. Include the `KeyBoardToolTip` component within the `GaesupWorld` component.
|
|
393
506
|
2. Define the `control` mode as "keyboard" in the `mode` property.
|
|
@@ -418,6 +531,8 @@ const App = () => {
|
|
|
418
531
|
|
|
419
532
|
## MiniMap
|
|
420
533
|
|
|
534
|
+
---
|
|
535
|
+
|
|
421
536
|
- The MiniMap component is used to display a small map of the user's location and the surrounding environment within a 3D world.
|
|
422
537
|
|
|
423
538
|
### (1) props
|
|
@@ -452,111 +567,23 @@ const App = () => {
|
|
|
452
567
|
};
|
|
453
568
|
```
|
|
454
569
|
|
|
455
|
-
### Key Features
|
|
570
|
+
### 3) Key Features
|
|
456
571
|
|
|
457
572
|
- **Dynamic Scaling:** Allows users to dynamically adjust the size of the map.
|
|
458
573
|
- **Direction Indicators:** Visualizes directions such as East, West, South, and North.
|
|
459
574
|
- **Custom Styling:** Allows customization of the MiniMap and its internal elements.
|
|
460
575
|
- **Mouse Wheel Support:** Supports adjusting the map's scale using the mouse wheel.
|
|
461
576
|
|
|
462
|
-
### How to Use
|
|
577
|
+
### 4) How to Use
|
|
463
578
|
|
|
464
579
|
1. Include the `MiniMap` component within your component tree.
|
|
465
580
|
2. Customize the appearance using the `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, and `plusMinusStyle` properties as needed.
|
|
466
581
|
3. The component updates the MiniMap based on the user's current position and direction.
|
|
467
582
|
|
|
468
|
-
## GameBoy
|
|
469
|
-
|
|
470
|
-
- The GameBoy component is a controller interface that emulates GameBoy-like directional buttons. It is primarily intended for mobile usage.
|
|
471
|
-
|
|
472
|
-
### (1) props
|
|
473
|
-
|
|
474
|
-
| Prop Name | Type | Required | Description | Default Value |
|
|
475
|
-
| -------------------- | --------------- | -------- | ------------------------------------ | ------------- |
|
|
476
|
-
| `gamePadStyle` | object (styles) | Optional | Style for the GamePad container | `undefined` |
|
|
477
|
-
| `gamePadButtonStyle` | object (styles) | Optional | Style for individual GamePad buttons | `undefined` |
|
|
478
|
-
| `label` | string | Optional | Custom label for the buttons | `undefined` |
|
|
479
|
-
|
|
480
|
-
### (2) example
|
|
481
|
-
|
|
482
|
-
```tsx
|
|
483
|
-
import { GameBoy } from "./GameBoy";
|
|
484
|
-
import { GaesupWorldContext } from "../../world/context";
|
|
485
|
-
|
|
486
|
-
const App = () => {
|
|
487
|
-
return (
|
|
488
|
-
<GaesupWorld>
|
|
489
|
-
{/* ... */}
|
|
490
|
-
<GameBoy
|
|
491
|
-
gameboyStyle={gameboyStyle}
|
|
492
|
-
gameboyButtonStyle={gameboyButtonStyle}
|
|
493
|
-
/>
|
|
494
|
-
{/* ... */}
|
|
495
|
-
</GaesupWorld>
|
|
496
|
-
);
|
|
497
|
-
};
|
|
498
|
-
```
|
|
499
|
-
|
|
500
|
-
### Key Features:
|
|
501
|
-
|
|
502
|
-
- **Direction Buttons:** Implements buttons for directional input (forward, backward, left, right) based on the `GameBoyDirections` array.
|
|
503
|
-
- **Context-aware Rendering:** Renders the component based on the `mode.controller` value from the `GaesupWorldContext`.
|
|
504
|
-
- **Custom Styling:** Provides `gameboyStyle` and `gameboyButtonStyle` properties for styling customization.
|
|
505
|
-
|
|
506
|
-
### How to Use:
|
|
507
|
-
|
|
508
|
-
To use the `GameBoy` component:
|
|
509
|
-
|
|
510
|
-
1. Place the `GameBoy` component within your component tree.
|
|
511
|
-
2. Customize the appearance by defining styles in the `gameboyStyle` and `gameboyButtonStyle` properties.
|
|
512
|
-
3. The component renders buttons based on the `GameBoyDirections` array.
|
|
513
|
-
|
|
514
|
-
## GamePad
|
|
515
|
-
|
|
516
|
-
- The GamePad component provides a customizable controller interface that supports various controller modes, such as joysticks and GameBoys, making it versatile for different input scenarios.
|
|
517
|
-
|
|
518
|
-
### (1) props
|
|
519
|
-
|
|
520
|
-
| Prop Name | Type | Required | Description | Default Value |
|
|
521
|
-
| -------------------- | --------------- | -------- | ------------------------------------ | ------------- |
|
|
522
|
-
| `gamePadStyle` | object (styles) | Optional | Style for the GamePad container | `undefined` |
|
|
523
|
-
| `gamePadButtonStyle` | object (styles) | Optional | Style for individual GamePad buttons | `undefined` |
|
|
524
|
-
| `label` | string | Optional | Custom label for the buttons | `undefined` |
|
|
525
|
-
|
|
526
|
-
### (2) example
|
|
527
|
-
|
|
528
|
-
```tsx
|
|
529
|
-
import { GamePad } from "./GamePad";
|
|
530
|
-
import { GaesupWorldContext } from "../../world/context";
|
|
531
|
-
|
|
532
|
-
const App = () => {
|
|
533
|
-
return (
|
|
534
|
-
<GaesupWorld>
|
|
535
|
-
{/* ... */}
|
|
536
|
-
<GamePad
|
|
537
|
-
gamePadStyle={gamePadStyle}
|
|
538
|
-
gamePadButtonStyle={gamePadButtonStyle}
|
|
539
|
-
/>
|
|
540
|
-
{/* ... */}
|
|
541
|
-
</GaesupWorld>
|
|
542
|
-
);
|
|
543
|
-
};
|
|
544
|
-
```
|
|
545
|
-
|
|
546
|
-
### Key Features:
|
|
547
|
-
|
|
548
|
-
- **Dynamic Button Rendering:** Dynamically generates buttons based on the `control` object in the `GaesupWorldContext`.
|
|
549
|
-
- **Universal Usage:** Compatible with various controller modes like joysticks and GameBoys.
|
|
550
|
-
- **Custom Styling:** Allows customization of the GamePad's appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
|
|
551
|
-
|
|
552
|
-
### How to Use:
|
|
553
|
-
|
|
554
|
-
1. Include the `GamePad` component within your component tree.
|
|
555
|
-
2. Customize the appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
|
|
556
|
-
3. The component dynamically renders buttons based on the `control` mode.
|
|
557
|
-
|
|
558
583
|
## ZoomButton
|
|
559
584
|
|
|
585
|
+
---
|
|
586
|
+
|
|
560
587
|
- The ZoomButton component is used to move the camera to a specific location and control the camera's zoom, primarily used for zooming to a target.
|
|
561
588
|
|
|
562
589
|
### (1) props
|
|
@@ -591,38 +618,3 @@ const App = () => {
|
|
|
591
618
|
1. Place the `ZoomButton` component in your component tree at the desired location.
|
|
592
619
|
2. Define the `position` prop to specify the location the camera should move to.
|
|
593
620
|
3. When the button is clicked, the camera will move to the specified position.
|
|
594
|
-
|
|
595
|
-
## JumpPortal
|
|
596
|
-
|
|
597
|
-
- The `JumpPortal` component represents a clickable portal that allows users to teleport to a specified location within a 3D world. This component can be used to create interactive teleportation points in your application.
|
|
598
|
-
|
|
599
|
-
### (1) props
|
|
600
|
-
|
|
601
|
-
| Prop Name | Type | Required | Description | Default Value |
|
|
602
|
-
| ----------------- | ------------- | -------- | ----------------------------------------------------------- | ------------- |
|
|
603
|
-
| `text` | string | Optional | The text to display on the portal. | `undefined` |
|
|
604
|
-
| `position` | THREE.Vector3 | Required | The target position to teleport to using a `THREE.Vector3`. | None |
|
|
605
|
-
| `jumpPortalStyle` | CSSProperties | Optional | CSS styles for customizing the appearance of the portal. | `undefined` |
|
|
606
|
-
|
|
607
|
-
### (2) example
|
|
608
|
-
|
|
609
|
-
- To use the `JumpPortal` component, you can import it and include it in your React application as follows:
|
|
610
|
-
|
|
611
|
-
```tsx
|
|
612
|
-
import { JumpPortal } from "./JumpPortal";
|
|
613
|
-
import * as THREE from "three";
|
|
614
|
-
|
|
615
|
-
const App = () => {
|
|
616
|
-
return (
|
|
617
|
-
<GaesupWorld>
|
|
618
|
-
{/* ... */}
|
|
619
|
-
<JumpPortal
|
|
620
|
-
text="Teleport"
|
|
621
|
-
position={new THREE.Vector3(10, 0, 5)}
|
|
622
|
-
jumpPortalStyle={{ backgroundColor: "blue", color: "white" }}
|
|
623
|
-
/>
|
|
624
|
-
{/* ... */}
|
|
625
|
-
</GaesupWorld>
|
|
626
|
-
);
|
|
627
|
-
};
|
|
628
|
-
```
|
|
@@ -105,7 +105,6 @@ export default function Camera(_a) {
|
|
|
105
105
|
}
|
|
106
106
|
detector(cameraProp);
|
|
107
107
|
}
|
|
108
|
-
console.log(cameraProp.worldContext.cameraOption.XDistance, cameraProp.worldContext.cameraOption.YDistance, cameraProp.worldContext.cameraOption.ZDistance);
|
|
109
108
|
});
|
|
110
109
|
// moveTo 함수 정의
|
|
111
110
|
worldContext.moveTo = function (position, target) { return __awaiter(_this, void 0, void 0, function () {
|
|
@@ -5,7 +5,7 @@ import { WheelRegidBodyRef } from "./wheel";
|
|
|
5
5
|
export function Wheels(_a) {
|
|
6
6
|
var props = _a.props;
|
|
7
7
|
var rigidBodyRef = props.rigidBodyRef;
|
|
8
|
-
var
|
|
8
|
+
var _b = useContext(GaesupWorldContext), collider = _b.vehicleCollider, activeState = _b.activeState;
|
|
9
9
|
var vehicleSizeX = collider.vehicleSizeX, vehicleSizeZ = collider.vehicleSizeZ, wheelSizeX = collider.wheelSizeX, wheelSizeZ = collider.wheelSizeZ;
|
|
10
10
|
var X = (vehicleSizeX - wheelSizeX) / 2 + 0.5;
|
|
11
11
|
var Z = (vehicleSizeZ - 2 * wheelSizeZ) / 2 + 0.5;
|
|
@@ -16,5 +16,7 @@ export function Wheels(_a) {
|
|
|
16
16
|
[X, 0, -Z],
|
|
17
17
|
];
|
|
18
18
|
var wheelRefs = useRef(wheelPositions.map(function () { return createRef(); }));
|
|
19
|
-
return (_jsx(_Fragment, { children: wheelPositions.map(function (wheelPosition, index) {
|
|
19
|
+
return (_jsx(_Fragment, { children: wheelPositions.map(function (wheelPosition, index) {
|
|
20
|
+
return (_jsx(WheelRegidBodyRef, { index: index, ref: wheelRefs.current[index], wheelPosition: wheelPosition, bodyRef: rigidBodyRef, wheel: wheelRefs.current[index], bodyAnchor: wheelPosition, wheelAnchor: [0, 0, 0], rotationAxis: [1, 0, 0] }, index));
|
|
21
|
+
}) }));
|
|
20
22
|
}
|
|
@@ -28,7 +28,7 @@ export default function calculation(prop) {
|
|
|
28
28
|
useEffect(function () {
|
|
29
29
|
var rigidBodyRef = prop.rigidBodyRef, innerGroupRef = prop.innerGroupRef;
|
|
30
30
|
if (rigidBodyRef.current && innerGroupRef.current) {
|
|
31
|
-
|
|
31
|
+
rigidBodyRef.current.lockRotations(true, true);
|
|
32
32
|
activeState.euler.set(0, 0, 0);
|
|
33
33
|
rigidBodyRef.current.setTranslation(activeState.position.clone().add(V3(0, 2, 0)), true);
|
|
34
34
|
}
|
|
@@ -1,2 +1,16 @@
|
|
|
1
1
|
import { calcPropType } from "../type";
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* This function applies an impulse to a rigid body in the game world.
|
|
4
|
+
*
|
|
5
|
+
* @param {calcPropType} prop - An object containing properties necessary for applying the impulse.
|
|
6
|
+
* @param {object} prop.rigidBodyRef - A reference to the rigid body to which the impulse is applied.
|
|
7
|
+
* @param {object} prop.worldContext - An object representing the current state of the game world.
|
|
8
|
+
* @param {object} prop.controllerContext - An object containing controller-specific context data.
|
|
9
|
+
* @param {object} prop.controllerContext.vehicle - An object representing the vehicle controller context.
|
|
10
|
+
* @param {number} prop.controllerContext.vehicle.maxSpeed - The maximum speed of the vehicle.
|
|
11
|
+
*
|
|
12
|
+
* This function calculates the current speed of the rigid body and compares it to the maximum speed.
|
|
13
|
+
* If the current speed is greater than the maximum speed, no impulse is applied.
|
|
14
|
+
* Otherwise, an impulse is applied to the rigid body in the direction specified by `activeState.dir.
|
|
15
|
+
*/
|
|
16
|
+
export default function impulse(prop: calcPropType): void;
|
|
@@ -1,20 +1,43 @@
|
|
|
1
1
|
import { vec3 } from "@react-three/rapier";
|
|
2
|
+
/**
|
|
3
|
+
* This function applies an impulse to a rigid body in the game world.
|
|
4
|
+
*
|
|
5
|
+
* @param {calcPropType} prop - An object containing properties necessary for applying the impulse.
|
|
6
|
+
* @param {object} prop.rigidBodyRef - A reference to the rigid body to which the impulse is applied.
|
|
7
|
+
* @param {object} prop.worldContext - An object representing the current state of the game world.
|
|
8
|
+
* @param {object} prop.controllerContext - An object containing controller-specific context data.
|
|
9
|
+
* @param {object} prop.controllerContext.vehicle - An object representing the vehicle controller context.
|
|
10
|
+
* @param {number} prop.controllerContext.vehicle.maxSpeed - The maximum speed of the vehicle.
|
|
11
|
+
*
|
|
12
|
+
* This function calculates the current speed of the rigid body and compares it to the maximum speed.
|
|
13
|
+
* If the current speed is greater than the maximum speed, no impulse is applied.
|
|
14
|
+
* Otherwise, an impulse is applied to the rigid body in the direction specified by `activeState.dir.
|
|
15
|
+
*/
|
|
2
16
|
export default function impulse(prop) {
|
|
3
17
|
var rigidBodyRef = prop.rigidBodyRef, _a = prop.worldContext, activeState = _a.activeState, control = _a.control, mode = _a.mode, joystick = _a.joystick, vehicle = prop.controllerContext.vehicle;
|
|
4
18
|
var shift = control.shift;
|
|
5
19
|
var maxSpeed = vehicle.maxSpeed, accelRatio = vehicle.accelRatio;
|
|
6
20
|
var velocity = rigidBodyRef.current.linvel();
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
21
|
+
// const V = vec3(velocity).length();
|
|
22
|
+
// const currentSpeed = Math.sqrt(
|
|
23
|
+
// velocity.x ** 2 + velocity.y ** 2 + velocity.z ** 2
|
|
24
|
+
// );
|
|
25
|
+
// a = v / t (t = 1) (approximate calculation)
|
|
26
|
+
var V = vec3(velocity).length();
|
|
27
|
+
if (V < maxSpeed) {
|
|
28
|
+
var M = rigidBodyRef.current.mass();
|
|
29
|
+
var speed = 1;
|
|
30
|
+
if (mode.controller === "joystick") {
|
|
31
|
+
if (!joystick.joyStickOrigin.isCenter)
|
|
32
|
+
speed = joystick.joyStickOrigin.isIn ? accelRatio : 1;
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
speed = shift ? accelRatio : 1;
|
|
36
|
+
}
|
|
37
|
+
// impulse = mass * velocity
|
|
38
|
+
rigidBodyRef.current.applyImpulse(vec3()
|
|
39
|
+
.addScalar(speed)
|
|
40
|
+
.multiply(activeState.dir.clone().normalize())
|
|
41
|
+
.multiplyScalar(M), false);
|
|
10
42
|
}
|
|
11
|
-
var speed = 1;
|
|
12
|
-
if (mode.controller === "joystick") {
|
|
13
|
-
if (!joystick.joyStickOrigin.isCenter)
|
|
14
|
-
speed = joystick.joyStickOrigin.isIn ? accelRatio : 1;
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
speed = shift ? accelRatio : 1;
|
|
18
|
-
}
|
|
19
|
-
rigidBodyRef.current.applyImpulse(vec3().addScalar(speed).multiply(activeState.dir.clone().normalize()), false);
|
|
20
43
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSProperties } from "react";
|
|
2
2
|
import "./style.css";
|
|
3
3
|
export type joyStickType = {
|
|
4
|
-
[key in "joyStickBallStyle" | "joyStickStyle"
|
|
4
|
+
[key in "joyStickBallStyle" | "joyStickStyle"]?: CSSProperties;
|
|
5
5
|
};
|
|
6
6
|
export declare function JoyStick(props: joyStickType): import("react/jsx-runtime").JSX.Element;
|