gaesup-world 0.0.783 → 0.1.1

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.
Files changed (60) hide show
  1. package/README.md +226 -132
  2. package/dist/gaesup/animation/actions.d.ts +7 -4
  3. package/dist/gaesup/animation/actions.js +77 -75
  4. package/dist/gaesup/camera/control/normal.js +1 -1
  5. package/dist/gaesup/component/active/airplane/index.js +3 -4
  6. package/dist/gaesup/component/active/common/InnerGroupRef.js +5 -2
  7. package/dist/gaesup/component/active/common/RiderGroupRef.d.ts +7 -0
  8. package/dist/gaesup/component/active/common/RiderGroupRef.js +32 -0
  9. package/dist/gaesup/component/active/vehicle/index.js +3 -4
  10. package/dist/gaesup/component/index.js +1 -1
  11. package/dist/gaesup/component/passive/airplane/index.js +7 -7
  12. package/dist/gaesup/component/passive/airplane/type.d.ts +2 -0
  13. package/dist/gaesup/component/passive/common/RigidbodyRef.d.ts +2 -1
  14. package/dist/gaesup/component/passive/common/RigidbodyRef.js +3 -3
  15. package/dist/gaesup/component/passive/vehicle/index.js +7 -2
  16. package/dist/gaesup/component/passive/vehicle/type.d.ts +2 -0
  17. package/dist/gaesup/controller/index.d.ts +1 -0
  18. package/dist/gaesup/controller/index.js +7 -1
  19. package/dist/gaesup/controller/initialize/callback/index.js +3 -5
  20. package/dist/gaesup/controller/initialize/callback/type.d.ts +2 -1
  21. package/dist/gaesup/gaesupProps/index.d.ts +2 -1
  22. package/dist/gaesup/gaesupProps/index.js +7 -3
  23. package/dist/gaesup/hooks/useGaesupAnimation/index.d.ts +8 -0
  24. package/dist/gaesup/hooks/useGaesupAnimation/index.js +94 -0
  25. package/dist/gaesup/hooks/useRideable/index.d.ts +28 -0
  26. package/dist/gaesup/hooks/useRideable/index.js +198 -0
  27. package/dist/gaesup/hooks/useTeleport/index.d.ts +3 -0
  28. package/dist/gaesup/hooks/useTeleport/index.js +12 -0
  29. package/dist/gaesup/physics/airplane/direction.js +0 -1
  30. package/dist/gaesup/physics/airplane/index.js +2 -0
  31. package/dist/gaesup/physics/airplane/landing.d.ts +2 -0
  32. package/dist/gaesup/physics/airplane/landing.js +29 -0
  33. package/dist/gaesup/physics/check/index.js +4 -0
  34. package/dist/gaesup/physics/check/push.d.ts +2 -0
  35. package/dist/gaesup/physics/check/push.js +6 -0
  36. package/dist/gaesup/physics/check/riding.d.ts +2 -0
  37. package/dist/gaesup/physics/check/riding.js +7 -0
  38. package/dist/gaesup/physics/index.js +1 -1
  39. package/dist/gaesup/physics/vehicle/direction.js +0 -6
  40. package/dist/gaesup/physics/vehicle/index.js +2 -0
  41. package/dist/gaesup/physics/vehicle/landing.d.ts +2 -0
  42. package/dist/gaesup/physics/vehicle/landing.js +29 -0
  43. package/dist/gaesup/tools/jumpPortal/index.d.ts +1 -1
  44. package/dist/gaesup/tools/jumpPortal/index.js +6 -7
  45. package/dist/gaesup/tools/keyBoardToolTip/type.d.ts +2 -0
  46. package/dist/gaesup/tools/miniMap/index.js +22 -8
  47. package/dist/gaesup/tools/miniMap/type.d.ts +4 -1
  48. package/dist/gaesup/tools/rideable/index.d.ts +2 -8
  49. package/dist/gaesup/tools/rideable/index.js +37 -72
  50. package/dist/gaesup/tools/zoomButton/index.d.ts +7 -0
  51. package/dist/gaesup/tools/zoomButton/index.js +37 -13
  52. package/dist/gaesup/world/context/index.js +16 -12
  53. package/dist/gaesup/world/context/reducer.d.ts +3 -1
  54. package/dist/gaesup/world/context/type.d.ts +30 -5
  55. package/dist/gaesup/world/debug/index.js +1 -23
  56. package/dist/gaesup/world/initalize/index.d.ts +3 -1
  57. package/dist/gaesup/world/initalize/index.js +1 -1
  58. package/package.json +6 -5
  59. package/dist/gaesup/component/passive/vehicle/collider.d.ts +0 -6
  60. package/dist/gaesup/component/passive/vehicle/collider.js +0 -7
package/README.md CHANGED
@@ -109,13 +109,19 @@ This project is distributed under the MIT License.
109
109
 
110
110
  ---
111
111
 
112
- ## Controller
112
+ ### Index
113
113
 
114
- #### [Controller](#controller)
114
+ - Player Type
115
115
 
116
- - [Character](#character)
117
- - [Vehicle](#vehicle)
118
- - [Airplane](#airplane)
116
+ - Character
117
+ - Vehicle
118
+ - Airplane
119
+
120
+ - Animation
121
+
122
+ ## Player Type
123
+
124
+ ---
119
125
 
120
126
  ## Character
121
127
 
@@ -123,11 +129,10 @@ This is the character control in Gaesup World.
123
129
 
124
130
  - Possible Camera Types
125
131
 
126
- | Name | Camera | Control | Info |
127
- | ------ | ------------------- | ------------- | --------------------------------------------------------------------------------------------- |
128
- | Normal | Perspective Camera | Orbit Control | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
129
- | Orbit | Perspective Camera | Orbit Control | Moves with the character and rotates according to the character's direction. |
130
- | Map | Orthographic Camera | Map Control | A top-down control view. |
132
+ | Name | Control | Info |
133
+ | ------ | ------------- | --------------------------------------------------------------------------------------------- |
134
+ | Normal | Orbit Control | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
135
+ | Orbit | Orbit Control | Moves with the character and rotates according to the character's direction. |
131
136
 
132
137
  - Controller Tools
133
138
 
@@ -141,13 +146,11 @@ This is the character control in Gaesup World.
141
146
 
142
147
  This is the vehicle control in Gaesup World. Characters can board the vehicle.
143
148
 
144
- - Possible Camera Types
149
+ - Possible Camera Types (only orbit type available)
145
150
 
146
- | Name | Camera | Control | Info |
147
- | ------ | ------------------- | ------------- | --------------------------------------------------------------------------------------------- |
148
- | Normal | Perspective Camera | Orbit Control | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
149
- | Orbit | Perspective Camera | Orbit Control | Moves with the character and rotates according to the character's direction. |
150
- | Map | Orthographic Camera | Map Control | A top-down control view. |
151
+ | Name | Control | Info |
152
+ | ----- | ------------- | ---------------------------------------------------------------------------- |
153
+ | Orbit | Orbit Control | Moves with the character and rotates according to the character's direction. |
151
154
 
152
155
  - Controller Tools
153
156
 
@@ -161,13 +164,11 @@ This is the vehicle control in Gaesup World. Characters can board the vehicle.
161
164
 
162
165
  This is the airplane control in Gaesup World. Characters can board the airplane.
163
166
 
164
- - Possible Camera Types
167
+ - Possible Camera Types (only orbit type available)
165
168
 
166
- | Name | Camera | Control | Info |
167
- | ------ | ------------------- | ------------- | --------------------------------------------------------------------------------------------- |
168
- | Normal | Perspective Camera | Orbit Control | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
169
- | Orbit | Perspective Camera | Orbit Control | Moves with the character and rotates according to the character's direction. |
170
- | Map | Orthographic Camera | Map Control | A top-down control view. |
169
+ | Name | Control | Info |
170
+ | ----- | ------------- | ---------------------------------------------------------------------------- |
171
+ | Orbit | Orbit Control | Moves with the character and rotates according to the character's direction. |
171
172
 
172
173
  - Controller Tools
173
174
 
@@ -179,11 +180,115 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
179
180
 
180
181
  ---
181
182
 
183
+ # Animation
184
+
185
+ - Animation refers to the method of controlling animations for characters and other elements in the Gaesup World.
186
+
187
+ # Rideable
188
+
189
+ - 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.
190
+
191
+ ![Rideable](https://jiggloghttps.s3.ap-northeast-2.amazonaws.com/images/rideable.gif)
192
+
193
+ ### (1) Example
194
+
195
+ ```tsx
196
+ export default function App() {
197
+ // Define URLs
198
+ const CHARACTER_URL = S3 + "/gaesup.glb";
199
+ const AIRPLANE_URL = S3 + "/air.glb";
200
+ const VEHICLE_URL = S3 + "/kart.glb";
201
+ const WHEEL_URL = S3 + "/wheel.glb";
202
+
203
+ return (
204
+ <GaesupWorld
205
+ // ...props defined here
206
+ >
207
+ <Canvas
208
+ // ...props defined here
209
+ >
210
+ <Physics>
211
+ <GaesupController />
212
+
213
+ {/* Import Rideable component inside and pass the arguments as shown below */}
214
+ <Rideable
215
+ objectkey="1"
216
+ objectType="vehicle"
217
+ isRiderOn={true}
218
+ url={VEHICLE_URL}
219
+ wheelUrl={WHEEL_URL}
220
+ offset={V3(0, 0.5, 0)}
221
+ position={V3(-10, 5, 10)}
222
+ />
223
+ <Rideable
224
+ objectkey="2"
225
+ objectType="vehicle"
226
+ isRiderOn={false}
227
+ url={VEHICLE_URL}
228
+ wheelUrl={WHEEL_URL}
229
+ position={V3(-20, 5, 10)}
230
+ />
231
+ <Rideable
232
+ objectkey="3"
233
+ objectType="airplane"
234
+ isRiderOn={true}
235
+ url={AIRPLANE_URL}
236
+ offset={V3(0, 0.5, 0)}
237
+ position={V3(10, 5, 10)}
238
+ />
239
+ <Rideable
240
+ objectkey="4"
241
+ objectType="airplane"
242
+ isRiderOn={false}
243
+ url={AIRPLANE_URL}
244
+ position={V3(20, 5, 10)}
245
+ />
246
+ </Physics>
247
+ </Canvas>
248
+ </GaesupWorld>
249
+ );
250
+ }
251
+ ```
252
+
253
+ ### 2) Precautions
254
+
255
+ - The `objectkey` must be unique.
256
+
257
+ ### 3) Props
258
+
259
+ | Prop Name | Type | Required | Description | Default Value |
260
+ | -------------- | ----------------------- | -------- | ----------------------------------------------- | -------------- |
261
+ | `objectkey` | string | Required | Unique identifier for the rideable object | None |
262
+ | `objectType` | "vehicle" or "airplane" | Optional | Type of the rideable object | `undefined` |
263
+ | `isRiderOn` | boolean | Optional | Whether a rider is on the rideable object | `false` |
264
+ | `url` | string | Optional | 3D model URL for the rideable object | `null` |
265
+ | `wheelUrl` | string | Optional | Wheel model URL for "vehicle" type rideables | `null` |
266
+ | `position` | THREE.Vector3 | Optional | Initial position of the rideable object | `(0, 0, 0)` |
267
+ | `rotation` | THREE.Euler | Optional | Initial rotation angle of the rideable object | `(0, 0, 0)` |
268
+ | `offset` | THREE.Vector3 | Optional | Initial position offset for the rideable object | `(0, 0, 0)` |
269
+ | `visible` | boolean | Optional | Visibility of the rideable object | `true` |
270
+ | `vehicleSize` | THREE.Vector3 | Optional | Size of the "vehicle" type rideable object | Rapier default |
271
+ | `wheelSize` | THREE.Vector3 | Optional | Size of the wheel for "vehicle" type rideables | Rapier default |
272
+ | `airplaneSize` | THREE.Vector3 | Optional | Size of the "airplane" type rideable object | Rapier default |
273
+
274
+ ### 4) Features
275
+
276
+ 1. **Support for Various Rideable Objects:** The Rideable component can render a variety of rideable objects, including "vehicle" and "airplane" types. It can render the 3D models of each object and allow interactions with them.
277
+ 2. **Customizable Properties:** You can easily configure the initial state, size, model URLs, visibility, and more of rideable objects using component properties.
278
+ 3. **Interaction with Riders:** The Rideable component supports interactions required for a rider to board and move with rideable objects.
279
+
280
+ ### Advantages:
281
+
282
+ 1. **Modularity and Reusability:** The Rideable component is modular and can be easily integrated with other components, increasing code reusability and facilitating maintenance.
283
+ 2. **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.
284
+ 3. **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.
285
+ 4. **Flexible Customization:** You can customize the appearance and behavior of each rideable object using properties, making it suitable for various game or simulation environments.
286
+
182
287
  # Tools
183
288
 
184
289
  - 개숲월드에서 캐릭터 컨트롤을 도와주는 다양한 도구들입니다.
185
290
 
186
- #### 1) [joystick](#joystick)
291
+ #### 1) [joystick](#1. joyStick)
187
292
 
188
293
  #### 2) [keyboardtooltip](#keyBoardTooltip)
189
294
 
@@ -191,74 +296,67 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
191
296
 
192
297
  #### [gameboy](#gameboy)
193
298
 
194
- ## 1) joyStick
195
-
196
- ### (1) Info
197
-
198
- - 가상 조이스틱 인터페이스를 제공하는 컴포넌트입니다. 모바일 환경에서 사용을 권장합니다
199
-
200
- > 주의! 모바일에서 위치의 흔들림 때문에 `GaesupWorld` 의 옵션 `scrollBlock` 의 사용을 권장합니다.
201
-
202
- ### (2) 특징
299
+ ## 1. JoyStick
203
300
 
204
- - **모바일 등에서 조이스틱 인터페이스 제공**: 모바일 등의 환경에서 조이스틱 인터페이스를 제공합니다
205
- - **커스텀 외관**: 조이스틱과 그 공의 스타일링을 위한 `joyStickBallStyle` 및 `joyStickStyle` 속성을 받습니다.
206
- - **반응형 및 상호작용**: 다양한 장치에 대응하기 위한 마우스, 모바일 터치 이벤트를 지원합니다.
301
+ 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.
207
302
 
208
- ### (3) Props
303
+ ### Key Features:
209
304
 
210
- - `joyStickBallStyle`: 조이스틱 공의 스타일 (`React.CSSProperties` 객체).
211
- - `joyStickStyle`: 조이스틱 컨테이너의 스타일 (`React.CSSProperties` 객체).
305
+ - **Joystick Interface:** Provides a joystick-like user input interface, suitable for mobile devices.
306
+ - **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.
307
+ - **Responsive and Interactive:** It supports various input devices and responds to both mouse and mobile touch events for controlling movement.
212
308
 
213
- ### (4) How To Use
309
+ ### Props:
214
310
 
215
- 1. 컴포넌트 트리에 `JoyStick` 컴포넌트를 포함시킵니다.
216
- 2. 컴포넌트는 마우스 및 터치 입력에 반응하여 이동을 제어합니다.
217
- 3. (선택) `joyStickBallStyle` 및 `joyStickStyle`을 통해 필요한 스타일을 커스텀합니다
311
+ - `joyStickBallStyle`: Style of the joystick ball.
218
312
 
219
313
  ### (5) Example
220
314
 
221
315
  ```jsx
222
316
  const MyComponent = () => {
223
- // 커스텀 스타일 정의
224
317
  const joyStickStyle = {
225
- /* 여기에 조이스틱 컨테이너 스타일을 정의하세요 */
318
+ /* joyStickStyle */
226
319
  };
227
320
  const joyStickBallStyle = {
228
- /* 여기에 조이스틱 공의 스타일을 정의하세요 */
321
+ /* joyStickBallStyle */
229
322
  };
230
323
 
231
324
  return (
232
- <JoyStick
233
- joyStickStyle={joyStickStyle}
234
- joyStickBallStyle={joyStickBallStyle}
235
- />
325
+ <GaesupWorld>
326
+ {/* ... */}
327
+ <JoyStick
328
+ joyStickStyle={joyStickStyle}
329
+ joyStickBallStyle={joyStickBallStyle}
330
+ />
331
+ {/* ... */}
332
+ </GaesupWorld>
236
333
  );
237
334
  };
238
335
  ```
239
336
 
240
- ## 2) keyBoardTooltip
337
+ ##
241
338
 
242
- ### (1) 개요
339
+ ## 2. KeyBoardToolTip (키보드 툴팁)
243
340
 
244
- - 키보드 컨트롤러 인터페이스를 시각적으로 표시하기 위해 만든 컴포넌트입니다. 키보드의 각 키와 연결된 액션을 시각적으로 나타냅니다.
341
+ The KeyBoardToolTip component is designed to visually represent a keyboard controller interface, providing a visual representation of each key and its associated action.
245
342
 
246
- ### (2) 특징
343
+ ### Key Features:
247
344
 
248
- - **키 배열 시각화** : 키보드의 모든 키를 배열 형태로 시각화합니다.
249
- - **애니메이션 상태 반영** : 현재 활성화된 키와 연관된 액션을 다른 스타일로 표시하여 사용자에게 피드백을 제공합니다.
250
- - **커스텀 스타일링** : 키 캡의 스타일을 사용자 정의할 수 있도록 다양한 스타일링 속성을 제공합니다.
345
+ - **Visualizing Keyboard Keys:** Visualizes all keyboard keys in an array format.
346
+ - **State Animation:** Reflects the currently active keys and their associated actions by displaying them differently to provide user feedback.
347
+ - **Custom Styling:** Provides various styling properties for customizing key caps' appearance.
251
348
 
252
- ### (3) How To Use
349
+ ### How to Use:
253
350
 
254
- 1. `KeyBoardToolTip` 컴포넌트를 `GaesupWorld` 컴포넌트에 포함시킵니다.
255
- 2. mode의 `control`는 `keyboard` 로 정의합니다.
256
- 3. 컴포넌트는 `KeyBoardAll` 상수에 따라 키보드의 각 키를 시각화하고, 현재 활성화된 키에 대해 다른 스타일을 적용합니다.
257
- 4. (선택) 필요한 스타일을 `keyBoardToolTipInnerStyle`, `selectedKeyCapStyle`, `notSelectedkeyCapStyle`, `keyCapStyle` 속성을 통해 전달합니다.
351
+ 1. Include the `KeyBoardToolTip` component within the `GaesupWorld` component.
352
+ 2. Define the `control` mode as "keyboard" in the `mode` property.
353
+ 3. The component visualizes each keyboard key based on the `KeyBoardAll` constant and applies different styles for currently active keys.
354
+ 4. (Optional) Customize the styles using the `keyBoardToolTipInnerStyle`, `selectedKeyCapStyle`, `notSelectedkeyCapStyle`, and `keyCapStyle` properties.
258
355
 
259
- ### (5) Example
356
+ ### Example:
260
357
 
261
- ```jsx
358
+ ```
359
+ jsxCopy code
262
360
  import { KeyBoardToolTip } from "./KeyBoardToolTip";
263
361
  import { GaesupWorldContext } from "../../world/context";
264
362
 
@@ -291,28 +389,26 @@ const MyComponent = () => {
291
389
  };
292
390
  ```
293
391
 
294
- ## 3) minimap
392
+ ## 3. MiniMap
295
393
 
296
- ### (1) Info
394
+ The MiniMap component is used to display a small map of the user's location and the surrounding environment within a 3D world.
297
395
 
298
- - 3D 월드 내에서 사용자의 위치와 주변 환경을 작은 지도 형태로 보여주는 리액트 컴포넌트입니다. 이 컴포넌트는 `GaesupWorldContext`를 활용하여 사용자의 현재 상태와 모드에 따라 다르게 렌더링됩니다.
396
+ ### Key Features:
299
397
 
300
- ### (2) 특징
398
+ - **Dynamic Scaling:** Allows users to dynamically adjust the size of the map.
399
+ - **Direction Indicators:** Visualizes directions such as East, West, South, and North.
400
+ - **Custom Styling:** Allows customization of the MiniMap and its internal elements.
401
+ - **Mouse Wheel Support:** Supports adjusting the map's scale using the mouse wheel.
301
402
 
302
- - **동적 스케일 조절**: 사용자가 지도의 크기를 동적으로 조절할 수 있습니다.
303
- - **방향 표시**: 동(East), 서(West), 남(South), 북(North) 방향을 시각적으로 표시합니다.
304
- - **커스텀 스타일링**: 미니맵 및 그 내부 요소들의 스타일을 사용자 정의할 수 있습니다.
305
- - **마우스 휠 지원**: 마우스 휠을 사용하여 미니맵의 스케일을 조절할 수 있습니다.
403
+ ### How to Use:
306
404
 
307
- ## 사용 방법
405
+ 1. Include the `MiniMap` component within your component tree.
406
+ 2. Customize the appearance using the `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, and `plusMinusStyle` properties as needed.
407
+ 3. The component updates the MiniMap based on the user's current position and direction.
308
408
 
309
- 1. `MiniMap` 컴포넌트를 컴포넌트 트리에 포함시킵니다.
310
- 2. 필요한 스타일을 `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, `plusMinusStyle` 속성을 통해 전달합니다.
311
- 3. 컴포넌트는 현재 사용자의 위치와 방향에 따라 미니맵을 업데이트합니다.
409
+ ### Example:
312
410
 
313
- ### (4) Example
314
-
315
- ```jsx
411
+ ```tsx
316
412
  import { MiniMap } from "./MiniMap";
317
413
 
318
414
  const MyComponent = () => {
@@ -322,7 +418,7 @@ const MyComponent = () => {
322
418
  const innerStyle = {
323
419
  /* ... */
324
420
  };
325
- // 다른 스타일 속성들도 정의
421
+ // Define other style properties as needed
326
422
 
327
423
  return (
328
424
  <GaesupWorld>
@@ -330,7 +426,7 @@ const MyComponent = () => {
330
426
  <MiniMap
331
427
  minimapStyle={minimapStyle}
332
428
  innerStyle={innerStyle}
333
- // 다른 스타일 속성들 전달
429
+ // Pass other style properties as needed
334
430
  />
335
431
  {/* ... */}
336
432
  </GaesupWorld>
@@ -338,34 +434,32 @@ const MyComponent = () => {
338
434
  };
339
435
  ```
340
436
 
341
- ## GameBoy
342
-
343
- ## 개요
437
+ ## 4. GameBoy
344
438
 
345
- - GameBoy 컨트롤러 인터페이스입니다. 게임 4방향 키처럼 사용할 수 있으며, 모바일에서 사용을 권장합니다.
439
+ - The GameBoy component is a controller interface that emulates GameBoy-like directional buttons. It is primarily intended for mobile usage.
346
440
 
347
- ## 특징
441
+ ### Key Features:
348
442
 
349
- - **방향 버튼**: `GameBoyDirections` 배열을 사용하여 방향 입력 (앞으로, 뒤로, 왼쪽으로, 오른쪽으로)을 위한 버튼을 구현합니다.
350
- - **컨텍스트 인식 렌더링**: `GaesupWorldContext`에서 `mode.controller` 값에 따라 컴포넌트를 렌더링합니다.
351
- - **커스텀 스타일링**: 스타일링을 위한 `gameboyStyle` 및 `gameboyButtonStyle` 속성을 받습니다.
443
+ - **Direction Buttons:** Implements buttons for directional input (forward, backward, left, right) based on the `GameBoyDirections` array.
444
+ - **Context-aware Rendering:** Renders the component based on the `mode.controller` value from the `GaesupWorldContext`.
445
+ - **Custom Styling:** Provides `gameboyStyle` and `gameboyButtonStyle` properties for styling customization.
352
446
 
353
- ## 사용 방법
447
+ ### How to Use:
354
448
 
355
- `GameBoy` 컴포넌트를 사용하기 위해:
449
+ To use the `GameBoy` component:
356
450
 
357
- 1. 컴포넌트 트리에 배치합니다.
358
- 2. 필요한 스타일을 `gameboyStyle` 및 `gameboyButtonStyle` 속성을 통해 전달합니다.
359
- 3. 컴포넌트는 `GameBoyDirections` 배열에 기반하여 버튼을 렌더링합니다.
451
+ 1. Place the `GameBoy` component within your component tree.
452
+ 2. Customize the appearance by defining styles in the `gameboyStyle` and `gameboyButtonStyle` properties.
453
+ 3. The component renders buttons based on the `GameBoyDirections` array.
360
454
 
361
- ## 예제 코드
455
+ ### Example:
362
456
 
363
- ```jsx
457
+ ```tsx
364
458
  import { GameBoy } from "./GameBoy";
365
459
  import { GaesupWorldContext } from "../../world/context";
366
460
 
367
461
  const MyComponent = () => {
368
- // 커스텀 스타일 정의
462
+ // Define custom styles
369
463
  const gameboyStyle = {
370
464
  /* ... */
371
465
  };
@@ -382,42 +476,41 @@ const MyComponent = () => {
382
476
  };
383
477
  ```
384
478
 
385
- ## GamePad
479
+ ## 5. GamePad
386
480
 
387
- ## 개요
481
+ - 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.
388
482
 
389
- - 게임패드 컨트롤 인터페이스를 제공하는 커스터마이징 가능한 인터페이스입니다. 조이스틱과 GameBoy와 같은 다양한 컨트롤러 모드에 대응할 수 있는 범용성을 가지고 있습니다.
483
+ ### Key Features:
390
484
 
391
- ## 특징
485
+ - **Dynamic Button Rendering:** Dynamically generates buttons based on the `control` object in the `GaesupWorldContext`.
486
+ - **Universal Usage:** Compatible with various controller modes like joysticks and GameBoys.
487
+ - **Custom Styling:** Allows customization of the GamePad's appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
392
488
 
393
- - **동적 버튼 렌더링**: `GaesupWorldContext`의 `control` 객체에 기반하여 버튼을 생성합니다.
394
- - **범용적 사용**: 조이스틱 및 GameBoy와 같은 다양한 컨트롤러 모드와 호환됩니다.
395
- - **커스텀 스타일링**: `gamePadStyle` 및 `gamePadButtonStyle` 속성을 통해 커스텀 스타일링 가능.
489
+ ### Props:
396
490
 
397
- ## 속성 (Props)
491
+ - `gamePadStyle`: Style of the GamePad container (`React.CSSProperties` object).
492
+ - `gamePadButtonStyle`: Style of individual buttons (`React.CSSProperties` object).
493
+ - `label`: Custom label for the buttons.
398
494
 
399
- - `gamePadStyle`: 게임패드 컨테이너의 스타일 (`React.CSSProperties` 객체).
400
- - `gamePadButtonStyle`: 개별 버튼의 스타일 (`React.CSSProperties` 객체).
401
- - `label`: 버튼에 대한 커스텀 라벨.
495
+ ### How to Use:
402
496
 
403
- ## 사용 방법
497
+ 1. Include the `GamePad` component within your component tree.
498
+ 2. Customize the appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
499
+ 3. The component dynamically renders buttons based on the `control` mode.
404
500
 
405
- 1. `GamePad` 컴포넌트를 컴포넌트 트리에 배치합니다.
406
- 2. `gamePadStyle` 및 `gamePadButtonStyle`을 사용하여 외관을 커스터마이즈합니다.
407
- 3. 컴포넌트는 컨트롤러 모드에 맞춰 적절한 버튼을 렌더링합니다.
501
+ ### Example:
408
502
 
409
- ## 예제 코드
410
-
411
- ```jsx
503
+ ```tsx
504
+ jsxCopy code
412
505
  import { GamePad } from "./GamePad";
413
506
  import { GaesupWorldContext } from "../../world/context";
414
507
 
415
508
  const MyComponent = () => {
416
509
  const gamePadStyle = {
417
- /* 여기에 커스텀 스타일을 정의하세요 */
510
+ /* Define custom styles here */
418
511
  };
419
512
  const gamePadButtonStyle = {
420
- /* 여기에 버튼의 커스텀 스타일을 정의하세요 */
513
+ /* Define button styles here */
421
514
  };
422
515
 
423
516
  return (
@@ -429,29 +522,28 @@ const MyComponent = () => {
429
522
  };
430
523
  ```
431
524
 
432
- ## ZoomButton
433
-
434
- ## 개요
525
+ ## 6. ZoomButton
435
526
 
436
- - 특정 위치로 카메라를 이동시키기 위한 버튼이고 카메라의 zoom 컨트롤을 주로 수행합니다. target에 특정 물체를 넣을 수도 있습니다.
527
+ 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.
437
528
 
438
- ## 속성 (Props)
529
+ ### Key Features:
439
530
 
440
- - `position`: 카메라가 이동할 대상 위치 (`THREE.Vector3` 객체).
441
- - `children`: (선택사항) 버튼 내에 렌더링될 React 노드.
442
- - `target`: (선택사항) 카메라가 바라볼 대상 위치 (`THREE.Vector3` 객체).
443
- - `keepBlocking`: (선택사항) 카메라 이동 중 블로킹 상태를 유지할지 여부.
444
- - `zoomButtonStyle`: (선택사항) 버튼의 스타일 (`React.CSSProperties` 객체).
531
+ - `position`: The target position where the camera will move to (`THREE.Vector3` object).
532
+ - `children`: (Optional) React nodes to render within the button.
533
+ - `target`: (Optional) The target position the camera will look at (`THREE.Vector3` object).
534
+ - `keepBlocking`: (Optional) Determines whether to keep the blocking state while the camera is moving.
535
+ - `zoomButtonStyle`: (Optional) Style for the button (`React.CSSProperties` object).
445
536
 
446
- ## 사용 방법
537
+ ### How to Use:
447
538
 
448
- 1. `ZoomButton` 컴포넌트를 원하는 위치에 배치합니다.
449
- 2. `position` prop을 통해 카메라가 이동할 위치를 지정합니다.
450
- 3. 버튼을 클릭하면 지정된 위치로 카메라가 이동합니다.
539
+ 1. Place the `ZoomButton` component in your component tree at the desired location.
540
+ 2. Define the `position` prop to specify the location the camera should move to.
541
+ 3. When the button is clicked, the camera will move to the specified position.
451
542
 
452
- ## 예제 코드
543
+ ### Example:
453
544
 
454
- ```jsx
545
+ ```tsx
546
+ jsxCopy code
455
547
  import { ZoomButton } from "./ZoomButton";
456
548
  import * as THREE from "three";
457
549
 
@@ -463,3 +555,5 @@ const App = () => {
463
555
  );
464
556
  };
465
557
  ```
558
+
559
+ ##
@@ -1,6 +1,6 @@
1
1
  import { Ref } from "react";
2
2
  import { Object3D, Object3DEventMap } from "three";
3
- import { animationTagType, groundRayType } from "../controller/type";
3
+ import { groundRayType } from "../controller/type";
4
4
  export type playActionsType = {
5
5
  groundRay: groundRayType;
6
6
  };
@@ -11,15 +11,18 @@ export type playResultType = {
11
11
  actions: actionsType;
12
12
  ref: Ref<Object3D<Object3DEventMap>>;
13
13
  };
14
- export declare function usePlayActions(): {
14
+ export declare function readyAnimation(): {
15
15
  resultRef: {
16
16
  character: playResultType;
17
17
  vehicle: playResultType;
18
18
  airplane: playResultType;
19
19
  };
20
- play: (tag: keyof animationTagType) => void;
21
- setAnimationName: (actions: actionsType) => void;
22
20
  };
23
21
  export default function playCharacterActions({ groundRay }: playActionsType): {
24
22
  ref: Ref<Object3D<Object3DEventMap>>;
23
+ resultRef: {
24
+ character: playResultType;
25
+ vehicle: playResultType;
26
+ airplane: playResultType;
27
+ };
25
28
  };