gaesup-world 0.1.2 → 0.1.3

package/README.md

@@ -3,13 +3,9 @@
 [![Version](https://img.shields.io/npm/v/gaesup-world?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gaesup-world)
 [![Downloads](https://img.shields.io/npm/dt/gaesup-world.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gaesup-world)
 
-Web 3D Character Controller and World Platform Library
+### Web 3D Character Controller and World Platform Library
 
-[![main](https://github.com/jigglypop/gaesup-world/blob/master/image/main_image.png)](https://codesandbox.io/p/github/jigglypop/gaesup-world-examples/master?workspaceId=e8ae627a-af61-415e-aa21-1fe5af422c86)
-
-> click and watch code sandbox example!
-
----
+![ezgif-7-177168be04](https://github.com/jigglypop/gaesup-world/assets/52653682/3ac16291-c851-4b0c-9c19-7026a18a00bb)
 
 ## introduction
 
@@ -109,9 +105,9 @@ This project is distributed under the MIT License.
 
 ---
 
-### Index
+###
 
-- Player Type
+- ## [PlayerType](##PlayerType)
 
   - Character
   - Vehicle
@@ -119,7 +115,23 @@ This project is distributed under the MIT License.
 
 - Animation
 
-## Player Type
+- ### [Tools](#Tools)
+
+  - [JoyStick](#JoyStick)
+
+  * [keyBoardTooltip](#keyBoardTooltip)
+
+  * [minimap](#MiniMap)
+
+  * [gameboy](#GameBoy)
+
+  - [GamePad](#GamePad)
+
+  - [ZoomButton](#ZoomButton)
+
+  - [JumpPortal](#JumpPortal)
+
+# PlayerType
 
 ---
 
@@ -144,9 +156,9 @@ This is the character control in Gaesup World.
 
 ## Vehicle
 
-This is the vehicle control in Gaesup World. Characters can board the vehicle.
+- This is the vehicle control in Gaesup World. Characters can board the vehicle.
 
-- Possible Camera Types (only orbit type available)
+* Possible Camera Types (only orbit type available)
 
 | Name  | Control       | Info                                                                         |
 | ----- | ------------- | ---------------------------------------------------------------------------- |
@@ -186,9 +198,7 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
 
 # Rideable
 
-- 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.
-
-![Rideable](https://jiggloghttps.s3.ap-northeast-2.amazonaws.com/images/rideable.gif)
+- 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.![Rideable](https://jiggloghttps.s3.ap-northeast-2.amazonaws.com/images/rideable.gif)
 
 ### (1) Example
 
@@ -284,22 +294,55 @@ export default function App() {
 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.
 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.
 
-# Tools
+# GaeSupProps
+
+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.
+
+## Props
+
+The `GaeSupProps` component accepts the following props:
+
+- `type` (optional): A string specifying the type of the prop. It can be either `"normal"` or `"ground"`. Defaults to `"normal"` if not provided.
+- `text` (optional): A string representing the text label associated with the prop. This label can provide additional information about the prop. If not provided, no label will be displayed.
+- `position` (optional): An array of three numbers `[x, y, z]` specifying the initial position of the prop in the 3D space. If not provided, the prop will be positioned at the origin `[0, 0, 0]`.
+- `children` (required): This prop should contain the 3D content that makes up the visual representation of the prop. It can include any 3D objects or components you want to render within the prop.
 
-- 개숲월드에서 캐릭터 컨트롤을 도와주는 다양한 도구들입니다.
+### (2) example
 
-#### 1) [joystick](#1. joyStick)
+- To use the `GaeSupProps` component, you need to import it and include it in your React component tree. Here's an example of how to use it:
 
-#### 2) [keyboardtooltip](#keyBoardTooltip)
+```tsx
+import { GaeSupProps } from "./GaeSupProps";
+
+function MyScene() {
+  return (
+    <GaeSupProps type="normal" text="My Prop" position={[3, 1, -2]}>
+      {/* 3D content goes here */}
+    </GaeSupProps>
+  );
+}
+```
+
+- In this example, we've created a `GaeSupProps` component with a `"normal"` type, a text label of `"My Prop"`, and a specific position in 3D space.
+
+### (3) Behavior
+
+- The `GaeSupProps` component also calculates the size and center of the 3D content it contains. It then updates a `minimap` object with this information, which can be useful for tracking the props within the scene.
 
-#### [minimap](#minimap)
+- Additionally, the component uses the `useEffect` hook to dispatch updates to the context, ensuring that changes to the `minimap` object are reflected in the sce
 
-#### [gameboy](#gameboy)
+# Tools
+
+- Various tools that assist with character control in GaesupWorld
 
-## 1. JoyStick
+## JoyStick
 
 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.
 
+| Prop Name           | Type            | Required | Description                 | Default Value |
+| ------------------- | --------------- | -------- | --------------------------- | ------------- |
+| `joyStickBallStyle` | object (styles) | Optional | Style for the joystick ball | `undefined`   |
+
 ### Key Features:
 
 - **Joystick Interface:** Provides a joystick-like user input interface, suitable for mobile devices.
@@ -334,9 +377,7 @@ const MyComponent = () => {
 };
 ```
 
-##
-
-## 2. KeyBoardToolTip (키보드 툴팁)
+## KeyBoardToolTip
 
 The KeyBoardToolTip component is designed to visually represent a keyboard controller interface, providing a visual representation of each key and its associated action.
 
@@ -355,25 +396,11 @@ The KeyBoardToolTip component is designed to visually represent a keyboard contr
 
 ### Example:
 
-```
-jsxCopy code
+```tsx
 import { KeyBoardToolTip } from "./KeyBoardToolTip";
 import { GaesupWorldContext } from "../../world/context";
 
-const MyComponent = () => {
-  const keyBoardToolTipInnerStyle = {
-    /* ... */
-  };
-  const selectedKeyCapStyle = {
-    /* ... */
-  };
-  const notSelectedkeyCapStyle = {
-    /* ... */
-  };
-  const keyCapStyle = {
-    /* ... */
-  };
-
+const App = () => {
   return (
     <GaesupWorld>
       {/* ... */}
@@ -389,9 +416,41 @@ const MyComponent = () => {
 };
 ```
 
-## 3. MiniMap
+## MiniMap
+
+- The MiniMap component is used to display a small map of the user's location and the surrounding environment within a 3D world.
 
-The MiniMap component is used to display a small map of the user's location and the surrounding environment within a 3D world.
+### (1) props
+
+| Prop Name        | Type            | Required | Description                                   | Default Value |
+| ---------------- | --------------- | -------- | --------------------------------------------- | ------------- |
+| `innerStyle`     | object (styles) | Optional | Style for the inner MiniMap container         | `undefined`   |
+| `textStyle`      | object (styles) | Optional | Style for text within the MiniMap             | `undefined`   |
+| `objectStyle`    | object (styles) | Optional | Style for objects within the MiniMap          | `undefined`   |
+| `avatarStyle`    | object (styles) | Optional | Style for avatars within the MiniMap          | `undefined`   |
+| `scaleStyle`     | object (styles) | Optional | Style for the scale control of the MiniMap    | `undefined`   |
+| `directionStyle` | object (styles) | Optional | Style for direction indicators in the MiniMap | `undefined`   |
+| `plusMinusStyle` | object (styles) | Optional | Style for plus/minus controls in the MiniMap  | `undefined`   |
+
+### 2) example
+
+```tsx
+import { MiniMap } from "./MiniMap";
+
+const App = () => {
+  return (
+    <GaesupWorld>
+      {/* ... */}
+      <MiniMap
+        minimapStyle={minimapStyle}
+        innerStyle={innerStyle}
+        // Pass other style properties as needed
+      />
+      {/* ... */}
+    </GaesupWorld>
+  );
+};
+```
 
 ### Key Features:
 
@@ -406,27 +465,31 @@ The MiniMap component is used to display a small map of the user's location and
 2. Customize the appearance using the `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, and `plusMinusStyle` properties as needed.
 3. The component updates the MiniMap based on the user's current position and direction.
 
-### Example:
+## GameBoy
 
-```tsx
-import { MiniMap } from "./MiniMap";
+- The GameBoy component is a controller interface that emulates GameBoy-like directional buttons. It is primarily intended for mobile usage.
 
-const MyComponent = () => {
-  const minimapStyle = {
-    /* ... */
-  };
-  const innerStyle = {
-    /* ... */
-  };
-  // Define other style properties as needed
+### (1) props
+
+| Prop Name            | Type            | Required | Description                          | Default Value |
+| -------------------- | --------------- | -------- | ------------------------------------ | ------------- |
+| `gamePadStyle`       | object (styles) | Optional | Style for the GamePad container      | `undefined`   |
+| `gamePadButtonStyle` | object (styles) | Optional | Style for individual GamePad buttons | `undefined`   |
+| `label`              | string          | Optional | Custom label for the buttons         | `undefined`   |
 
+### (2) example
+
+```tsx
+import { GameBoy } from "./GameBoy";
+import { GaesupWorldContext } from "../../world/context";
+
+const App = () => {
   return (
     <GaesupWorld>
       {/* ... */}
-      <MiniMap
-        minimapStyle={minimapStyle}
-        innerStyle={innerStyle}
-        // Pass other style properties as needed
+      <GameBoy
+        gameboyStyle={gameboyStyle}
+        gameboyButtonStyle={gameboyButtonStyle}
       />
       {/* ... */}
     </GaesupWorld>
@@ -434,10 +497,6 @@ const MyComponent = () => {
 };
 ```
 
-## 4. GameBoy
-
-- The GameBoy component is a controller interface that emulates GameBoy-like directional buttons. It is primarily intended for mobile usage.
-
 ### Key Features:
 
 - **Direction Buttons:** Implements buttons for directional input (forward, backward, left, right) based on the `GameBoyDirections` array.
@@ -452,108 +511,118 @@ To use the `GameBoy` component:
 2. Customize the appearance by defining styles in the `gameboyStyle` and `gameboyButtonStyle` properties.
 3. The component renders buttons based on the `GameBoyDirections` array.
 
-### Example:
+## GamePad
+
+- 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.
+
+### (1) props
+
+| Prop Name            | Type            | Required | Description                          | Default Value |
+| -------------------- | --------------- | -------- | ------------------------------------ | ------------- |
+| `gamePadStyle`       | object (styles) | Optional | Style for the GamePad container      | `undefined`   |
+| `gamePadButtonStyle` | object (styles) | Optional | Style for individual GamePad buttons | `undefined`   |
+| `label`              | string          | Optional | Custom label for the buttons         | `undefined`   |
+
+### (2) example
 
 ```tsx
-import { GameBoy } from "./GameBoy";
+import { GamePad } from "./GamePad";
 import { GaesupWorldContext } from "../../world/context";
 
-const MyComponent = () => {
-  // Define custom styles
-  const gameboyStyle = {
-    /* ... */
-  };
-  const gameboyButtonStyle = {
-    /* ... */
-  };
-
+const App = () => {
   return (
-    <GameBoy
-      gameboyStyle={gameboyStyle}
-      gameboyButtonStyle={gameboyButtonStyle}
-    />
+    <GaesupWorld>
+      {/* ... */}
+      <GamePad
+        gamePadStyle={gamePadStyle}
+        gamePadButtonStyle={gamePadButtonStyle}
+      />
+      {/* ... */}
+    </GaesupWorld>
   );
 };
 ```
 
-## 5. GamePad
-
-- 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.
-
 ### Key Features:
 
 - **Dynamic Button Rendering:** Dynamically generates buttons based on the `control` object in the `GaesupWorldContext`.
 - **Universal Usage:** Compatible with various controller modes like joysticks and GameBoys.
 - **Custom Styling:** Allows customization of the GamePad's appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
 
-### Props:
-
-- `gamePadStyle`: Style of the GamePad container (`React.CSSProperties` object).
-- `gamePadButtonStyle`: Style of individual buttons (`React.CSSProperties` object).
-- `label`: Custom label for the buttons.
-
 ### How to Use:
 
 1. Include the `GamePad` component within your component tree.
 2. Customize the appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
 3. The component dynamically renders buttons based on the `control` mode.
 
-### Example:
+## ZoomButton
 
-```tsx
-jsxCopy code
-import { GamePad } from "./GamePad";
-import { GaesupWorldContext } from "../../world/context";
+- 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.
 
-const MyComponent = () => {
-  const gamePadStyle = {
-    /* Define custom styles here */
-  };
-  const gamePadButtonStyle = {
-    /* Define button styles here */
-  };
+### (1) props
+
+| Prop Name         | Type            | Required | Description                                                | Default Value |
+| ----------------- | --------------- | -------- | ---------------------------------------------------------- | ------------- |
+| `position`        | THREE.Vector3   | Required | Target position for the camera to move to                  | None          |
+| `children`        | React.ReactNode | Optional | React nodes to render within the button                    | `undefined`   |
+| `target`          | THREE.Vector3   | Optional | Target position for the camera to look at                  | `undefined`   |
+| `keepBlocking`    | boolean         | Optional | Determines whether to keep blocking while camera is moving | `undefined`   |
+| `zoomButtonStyle` | object (styles) | Optional | Style for the ZoomButton component                         | `undefined`   |
+
+### (2) example
 
+```tsx
+import { ZoomButton } from "./ZoomButton";
+import * as THREE from "three";
+
+const App = () => {
   return (
-    <GamePad
-      gamePadStyle={gamePadStyle}
-      gamePadButtonStyle={gamePadButtonStyle}
-    />
+    <GaesupWorld>
+      {/* ... */}
+      <ZoomButton position={new THREE.Vector3(0, 0, 5)}>{childern}</ZoomButton>
+      {/* ... */}
+    </GaesupWorld>
   );
 };
 ```
 
-## 6. ZoomButton
+### (3) How to Use
 
-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.
+1. Place the `ZoomButton` component in your component tree at the desired location.
+2. Define the `position` prop to specify the location the camera should move to.
+3. When the button is clicked, the camera will move to the specified position.
 
-### Key Features:
+## JumpPortal
 
-- `position`: The target position where the camera will move to (`THREE.Vector3` object).
-- `children`: (Optional) React nodes to render within the button.
-- `target`: (Optional) The target position the camera will look at (`THREE.Vector3` object).
-- `keepBlocking`: (Optional) Determines whether to keep the blocking state while the camera is moving.
-- `zoomButtonStyle`: (Optional) Style for the button (`React.CSSProperties` object).
+- 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.
 
-### How to Use:
+### (1) props
 
-1. Place the `ZoomButton` component in your component tree at the desired location.
-2. Define the `position` prop to specify the location the camera should move to.
-3. When the button is clicked, the camera will move to the specified position.
+| Prop Name         | Type          | Required | Description                                                 | Default Value |
+| ----------------- | ------------- | -------- | ----------------------------------------------------------- | ------------- |
+| `text`            | string        | Optional | The text to display on the portal.                          | `undefined`   |
+| `position`        | THREE.Vector3 | Required | The target position to teleport to using a `THREE.Vector3`. | None          |
+| `jumpPortalStyle` | CSSProperties | Optional | CSS styles for customizing the appearance of the portal.    | `undefined`   |
 
-### Example:
+### (2) example
+
+- To use the `JumpPortal` component, you can import it and include it in your React application as follows:
 
 ```tsx
-jsxCopy code
-import { ZoomButton } from "./ZoomButton";
+import { JumpPortal } from "./JumpPortal";
 import * as THREE from "three";
 
 const App = () => {
   return (
-    <ZoomButton position={new THREE.Vector3(0, 0, 5)}>
-      Zoom to Position
-    </ZoomButton>
+    <GaesupWorld>
+      {/* ... */}
+      <JumpPortal
+        text="Teleport"
+        position={new THREE.Vector3(10, 0, 5)}
+        jumpPortalStyle={{ backgroundColor: "blue", color: "white" }}
+      />
+      {/* ... */}
+    </GaesupWorld>
   );
 };
 ```
-
-##

package/dist/gaesup/camera/control/normal.d.ts

@@ -1,2 +1,4 @@
 import { cameraPropType } from "../../physics/type";
+import { activeStateType, cameraOptionType } from "../../world/context/type";
+export declare const makeNormalCameraPosition: (activeState: activeStateType, cameraOption: cameraOptionType) => import("three").Vector3;
 export default function normal(prop: cameraPropType): void;

package/dist/gaesup/camera/control/normal.js

@@ -1,11 +1,18 @@
 import { V3 } from "../../utils/vector";
+export var makeNormalCameraPosition = function (activeState, cameraOption) {
+    var YDistance = cameraOption.YDistance, ZDistance = cameraOption.ZDistance;
+    var cameraPosition = activeState.position
+        .clone()
+        .add(V3(0, YDistance, ZDistance));
+    return cameraPosition;
+};
 export default function normal(prop) {
     var state = prop.state, _a = prop.worldContext, activeState = _a.activeState, cameraOption = _a.cameraOption;
     if (!state || !state.camera)
         return;
     var cameraPosition = activeState.position
         .clone()
-        .add(V3(0, cameraOption.YDistance, cameraOption.XZDistance));
+        .add(V3(0, cameraOption.YDistance, cameraOption.ZDistance));
     state.camera.position.lerp(cameraPosition, 1);
     state.camera.lookAt(activeState.position.clone());
 }

package/dist/gaesup/camera/control/orbit.d.ts

@@ -1,4 +1,4 @@
 import { cameraPropType } from "../../physics/type";
 import { activeStateType, cameraOptionType } from "../../world/context/type";
-export declare const makeCameraPosition: (activeState: activeStateType, cameraOption: cameraOptionType) => import("three").Vector3;
+export declare const makeOrbitCameraPosition: (activeState: activeStateType, cameraOption: cameraOptionType) => import("three").Vector3;
 export default function orbit(prop: cameraPropType): void;

package/dist/gaesup/camera/control/orbit.js

@@ -1,6 +1,6 @@
 import { quat } from "@react-three/rapier";
 import { V3 } from "../../utils/vector";
-export var makeCameraPosition = function (activeState, cameraOption) {
+export var makeOrbitCameraPosition = function (activeState, cameraOption) {
     var XDistance = cameraOption.XDistance, YDistance = cameraOption.YDistance, ZDistance = cameraOption.ZDistance;
     var cameraPosition = activeState.position.clone().add(V3(Math.sin(activeState.euler.y), 1, Math.cos(activeState.euler.y))
         .normalize()
@@ -12,10 +12,11 @@ export default function orbit(prop) {
     var state = prop.state, _a = prop.worldContext, activeState = _a.activeState, cameraOption = _a.cameraOption;
     if (!state || !state.camera)
         return;
-    var cameraPosition = makeCameraPosition(activeState, cameraOption);
+    var cameraPosition = makeOrbitCameraPosition(activeState, cameraOption);
     state.camera.position.lerp(cameraPosition, 1);
     state.camera.quaternion.copy(activeState.quat
         .clone()
         .multiply(quat().setFromAxisAngle(V3(0, 1, 0), Math.PI)));
+    state.camera.rotation.copy(activeState.euler);
     state.camera.lookAt(activeState.position.clone());
 }

package/dist/gaesup/camera/index.js

@@ -105,6 +105,7 @@ export default function Camera(_a) {
             }
             detector(cameraProp);
         }
+        console.log(cameraProp.worldContext.cameraOption.XDistance, cameraProp.worldContext.cameraOption.YDistance, cameraProp.worldContext.cameraOption.ZDistance);
     });
     // moveTo 함수 정의
     worldContext.moveTo = function (position, target) { return __awaiter(_this, void 0, void 0, function () {
@@ -112,13 +113,26 @@ export default function Camera(_a) {
             switch (_a.label) {
                 case 0:
                     camera.position.copy(position);
+                    if (!(mode.control === "orbit")) return [3 /*break*/, 2];
                     return [4 /*yield*/, Promise.all([
                             cameraRef.current.setPosition(position.x, position.y, position.z, true),
+                            camera.rotation.copy(worldContext.activeState.euler),
                             cameraRef.current.setLookAt(position.x, position.y, position.z, target.x, target.y, target.z, true),
                         ])];
                 case 1:
                     _a.sent();
-                    return [2 /*return*/];
+                    return [3 /*break*/, 4];
+                case 2:
+                    if (!(mode.control === "normal")) return [3 /*break*/, 4];
+                    return [4 /*yield*/, Promise.all([
+                            cameraRef.current.setPosition(0, position.y, position.z, true),
+                            camera.rotation.copy(worldContext.activeState.euler),
+                            cameraRef.current.setLookAt(0, position.y, position.z, target.x, target.y, target.z, true),
+                        ])];
+                case 3:
+                    _a.sent();
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
             }
         });
     }); };

package/dist/gaesup/component/passive/airplane/index.js

@@ -33,9 +33,11 @@ export function PassiveAirplane(props) {
                 .setFromEuler(innerGroupRef.current.rotation.clone())
                 .slerp(quat().setFromEuler(_euler), 0.2));
         }
-        // if (rigidBodyRef && rigidBodyRef.current) {
-        //   rigidBodyRef.current.setGravityScale(props.gravity, false);
-        // }
+        if (rigidBodyRef && rigidBodyRef.current) {
+            rigidBodyRef.current.setGravityScale(props.position.y < 10
+                ? ((1 - 0.1) / (0 - 10)) * props.position.y + 1
+                : 0.1, false);
+        }
     });
     return (_jsxs(OuterGroupRef, { ref: refs.outerGroupRef, children: [props.children, airplaneUrl && (_jsxs(RigidBodyRef, { ref: refs.rigidBodyRef, position: position, rotation: euler, onCollisionEnter: props.onCollisionEnter, children: [_jsx(InnerGroupRef, { currentAnimation: currentAnimation, ref: refs.innerGroupRef, url: airplaneUrl }), _jsx(CuboidCollider, { ref: colliderRef, args: [airplaneSize.x / 2, airplaneSize.y / 2, airplaneSize.z / 2], position: [0, airplaneSize.y / 2, 0] })] }))] }));
 }

package/dist/gaesup/physics/airplane/direction.js

@@ -1,7 +1,7 @@
 import { quat } from "@react-three/rapier";
 import { V3 } from "../../utils/vector";
 export default function direction(prop) {
-    var state = prop.state, innerGroupRef = prop.innerGroupRef, _a = prop.worldContext, joystick = _a.joystick, activeState = _a.activeState, control = _a.control, mode = _a.mode, airplane = prop.controllerContext.airplane, delta = prop.delta;
+    var innerGroupRef = prop.innerGroupRef, _a = prop.worldContext, joystick = _a.joystick, activeState = _a.activeState, control = _a.control, mode = _a.mode, airplane = prop.controllerContext.airplane;
     var forward = control.forward, backward = control.backward, leftward = control.leftward, rightward = control.rightward, shift = control.shift, space = control.space;
     var angleDelta = airplane.angleDelta, maxAngle = airplane.maxAngle, accelRatio = airplane.accelRatio;
     var boost = 0;

package/dist/gaesup/physics/airplane/gravity.d.ts

@@ -1,2 +1,14 @@
 import { calcPropType } from "../type";
+/**
+ * This function calculates and sets gravity.
+ *
+ * @param {calcPropType} prop - An object containing properties necessary for gravity calculation.
+ * @param {object} prop.rigidBodyRef - A reference to the physical object where gravity is being set.
+ * @param {object} prop.worldContext - An object representing the current state of the game world.
+ * @param {number} prop.worldContext.activeState.position.y - The current Y-coordinate position.
+ *
+ * Gravity is calculated based on altitude and buoyancy. When altitude is less than 10, gravity is calculated as follows:
+ * Gravity = ((1 - buoyancy) / (0 - 10)) * current Y-coordinate + buoyancy
+ * Otherwise, gravity is set to 0.1.
+ */
 export default function gravity(prop: calcPropType): void;

package/dist/gaesup/physics/airplane/gravity.js

@@ -1,12 +1,18 @@
+/**
+ * This function calculates and sets gravity.
+ *
+ * @param {calcPropType} prop - An object containing properties necessary for gravity calculation.
+ * @param {object} prop.rigidBodyRef - A reference to the physical object where gravity is being set.
+ * @param {object} prop.worldContext - An object representing the current state of the game world.
+ * @param {number} prop.worldContext.activeState.position.y - The current Y-coordinate position.
+ *
+ * Gravity is calculated based on altitude and buoyancy. When altitude is less than 10, gravity is calculated as follows:
+ * Gravity = ((1 - buoyancy) / (0 - 10)) * current Y-coordinate + buoyancy
+ * Otherwise, gravity is set to 0.1.
+ */
 export default function gravity(prop) {
-    var rigidBodyRef = prop.rigidBodyRef, groundRay = prop.groundRay, buoyancy = prop.controllerContext.airplane.buoyancy, airplaneCollider = prop.worldContext.airplaneCollider;
-    if (groundRay.hit) {
-        airplaneCollider.gravity =
-            (1 - buoyancy) / (groundRay.length - groundRay.hit.toi);
-        rigidBodyRef.current.setGravityScale(airplaneCollider.gravity, false);
-    }
-    else {
-        airplaneCollider.gravity = buoyancy;
-        rigidBodyRef.current.setGravityScale(airplaneCollider.gravity, false);
-    }
+    var rigidBodyRef = prop.rigidBodyRef, activeState = prop.worldContext.activeState;
+    rigidBodyRef.current.setGravityScale(activeState.position.y < 10
+        ? ((1 - 0.1) / (0 - 10)) * activeState.position.y + 1
+        : 0.1, false);
 }

package/dist/gaesup/physics/airplane/impulse.d.ts

@@ -1,2 +1,16 @@
 import { calcPropType } from "../type";
-export default function impulse(prop: calcPropType): any;
+/**
+ * This function applies an impulse to a rigid body in the game world.
+ *
+ * @param {calcPropType} prop - An object containing properties necessary for applying the impulse.
+ * @param {object} prop.rigidBodyRef - A reference to the rigid body to which the impulse is applied.
+ * @param {object} prop.worldContext - An object representing the current state of the game world.
+ * @param {object} prop.controllerContext - An object containing controller-specific context data.
+ * @param {object} prop.controllerContext.airplane - An object representing the airplane controller context.
+ * @param {number} prop.controllerContext.airplane.maxSpeed - The maximum speed of the airplane.
+ *
+ * This function calculates the current speed of the rigid body and compares it to the maximum speed.
+ * If the current speed is greater than the maximum speed, no impulse is applied.
+ * Otherwise, an impulse is applied to the rigid body in the direction specified by `activeState.direction`.
+ */
+export default function impulse(prop: calcPropType): void;

package/dist/gaesup/physics/airplane/impulse.js

@@ -1,15 +1,31 @@
 import { vec3 } from "@react-three/rapier";
+/**
+ * This function applies an impulse to a rigid body in the game world.
+ *
+ * @param {calcPropType} prop - An object containing properties necessary for applying the impulse.
+ * @param {object} prop.rigidBodyRef - A reference to the rigid body to which the impulse is applied.
+ * @param {object} prop.worldContext - An object representing the current state of the game world.
+ * @param {object} prop.controllerContext - An object containing controller-specific context data.
+ * @param {object} prop.controllerContext.airplane - An object representing the airplane controller context.
+ * @param {number} prop.controllerContext.airplane.maxSpeed - The maximum speed of the airplane.
+ *
+ * This function calculates the current speed of the rigid body and compares it to the maximum speed.
+ * If the current speed is greater than the maximum speed, no impulse is applied.
+ * Otherwise, an impulse is applied to the rigid body in the direction specified by `activeState.direction`.
+ */
 export default function impulse(prop) {
     var rigidBodyRef = prop.rigidBodyRef, activeState = prop.worldContext.activeState, airplane = prop.controllerContext.airplane;
     var maxSpeed = airplane.maxSpeed;
     var velocity = rigidBodyRef.current.linvel();
-    var currentSpeed = Math.sqrt(Math.pow(velocity.x, 2) + Math.pow(velocity.y, 2) + Math.pow(velocity.z, 2));
-    if (currentSpeed > maxSpeed) {
-        return null;
+    // a = v / t (t = 1) (approximate calculation)
+    var V = vec3(velocity).length();
+    if (V < maxSpeed) {
+        var M = rigidBodyRef.current.mass();
+        // impulse = mass * velocity
+        rigidBodyRef.current.applyImpulse(vec3({
+            x: activeState.direction.x,
+            y: activeState.direction.y,
+            z: activeState.direction.z,
+        }).multiplyScalar(M), false);
     }
-    rigidBodyRef.current.applyImpulse(vec3({
-        x: activeState.direction.x,
-        y: activeState.direction.y,
-        z: activeState.direction.z,
-    }), false);
 }

package/dist/gaesup/physics/index.js

@@ -26,9 +26,10 @@ export default function calculation(prop) {
     var dispatch = useContext(GaesupWorldDispatchContext);
     var mode = worldContext.mode, activeState = worldContext.activeState, controlBlock = worldContext.controlBlock;
     useEffect(function () {
-        var rigidBodyRef = prop.rigidBodyRef;
-        if (rigidBodyRef.current) {
-            rigidBodyRef.current.lockRotations(true, true);
+        var rigidBodyRef = prop.rigidBodyRef, innerGroupRef = prop.innerGroupRef;
+        if (rigidBodyRef.current && innerGroupRef.current) {
+            // rigidBodyRef.current.lockRotations(true, true);
+            activeState.euler.set(0, 0, 0);
             rigidBodyRef.current.setTranslation(activeState.position.clone().add(V3(0, 2, 0)), true);
         }
     }, [mode.type]);

package/dist/gaesup/tools/gamePad/GamePadButton.d.ts

@@ -1,7 +1,8 @@
 import { CSSProperties } from "react";
 import "./style.css";
-export default function GamePadButton({ value, name, gamePadButtonStyle, }: {
+export type gamePadButtonType = {
     value: string;
     name: string;
     gamePadButtonStyle: CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export default function GamePadButton({ value, name, gamePadButtonStyle, }: gamePadButtonType): import("react/jsx-runtime").JSX.Element;

package/dist/gaesup/tools/joyStick/index.d.ts

@@ -1,3 +1,6 @@
+import { CSSProperties } from "react";
 import "./style.css";
-import { joyStickType } from "./type";
+export type joyStickType = {
+    [key in "joyStickBallStyle" | "joyStickStyle" | "joyBallStyle"]?: CSSProperties;
+};
 export declare function JoyStick(props: joyStickType): import("react/jsx-runtime").JSX.Element;

package/dist/gaesup/tools/joyStick/type.d.ts

@@ -1,4 +1,3 @@
-import { CSSProperties } from "react";
 export type joyStickBallType = {
     left: string;
     top: string;
@@ -18,6 +17,3 @@ export type joyStickInnerType = {
     joyStickBall?: joyStickBallType;
     joyStickOrigin?: joyStickOriginType;
 };
-export type joyStickType = {
-    [key in "joyStickBallStyle" | "joyStickStyle" | "joyBallStyle"]?: CSSProperties;
-};

package/dist/gaesup/tools/jumpPortal/index.d.ts

@@ -1,3 +1,16 @@
-import { portalType } from "../../world/context/type";
+import { CSSProperties } from "react";
 import "./style.css";
-export declare function JumpPortal({ text, position, jumpPortalStlye }: portalType): import("react/jsx-runtime").JSX.Element;
+export type JumpPortalType = {
+    text?: string;
+    position: THREE.Vector3;
+    jumpPortalStyle?: CSSProperties;
+};
+/**
+ * JumpPortal component represents a clickable portal that teleports the user to a specified location.
+ *
+ * @param {JumpPortalType} props - The props for the JumpPortal component.
+ * @param {string} props.text - (Optional) The text to display on the portal.
+ * @param {THREE.Vector3} props.position - The target position to teleport to.
+ * @param {CSSProperties} props.jumpPortalStyle - (Optional) CSS styles for the JumpPortal component.
+ */
+export declare function JumpPortal({ text, position, jumpPortalStyle, }: JumpPortalType): import("react/jsx-runtime").JSX.Element;

package/dist/gaesup/tools/jumpPortal/index.js

@@ -1,10 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTeleport } from "../../hooks/useTeleport";
 import "./style.css";
+/**
+ * JumpPortal component represents a clickable portal that teleports the user to a specified location.
+ *
+ * @param {JumpPortalType} props - The props for the JumpPortal component.
+ * @param {string} props.text - (Optional) The text to display on the portal.
+ * @param {THREE.Vector3} props.position - The target position to teleport to.
+ * @param {CSSProperties} props.jumpPortalStyle - (Optional) CSS styles for the JumpPortal component.
+ */
 export function JumpPortal(_a) {
-    var text = _a.text, position = _a.position, jumpPortalStlye = _a.jumpPortalStlye;
+    var text = _a.text, position = _a.position, jumpPortalStyle = _a.jumpPortalStyle;
     var Teleport = useTeleport().Teleport;
     return (_jsx("div", { className: "jumpPortal", onClick: function () {
             Teleport(position);
-        }, style: jumpPortalStlye, children: text }));
+        }, style: jumpPortalStyle, children: text }));
 }

package/dist/gaesup/tools/miniMap/index.js

@@ -19,7 +19,7 @@ import "./style.css";
 export function MiniMap(props) {
     var _a = useContext(GaesupWorldContext), minimap = _a.minimap, activeState = _a.activeState, mode = _a.mode;
     var _b = useState(props.scale || minimapDefault.scale), scale = _b[0], setscale = _b[1];
-    var minimapStyle = props.minimapStyle, innerStyle = props.innerStyle, textStyle = props.textStyle, objectStyle = props.objectStyle, avatarStyle = props.avatarStyle, scaleStyle = props.scaleStyle, directionStyle = props.directionStyle, plusMinusStyle = props.plusMinusStyle;
+    var innerStyle = props.innerStyle, textStyle = props.textStyle, objectStyle = props.objectStyle, avatarStyle = props.avatarStyle, scaleStyle = props.scaleStyle, directionStyle = props.directionStyle, plusMinusStyle = props.plusMinusStyle;
     var upscale = useCallback(function () {
         var max = props.maxScale || minimapDefault.maxScale;
         setscale(function (scale) { return Math.min(max, scale + 0.1); });

package/dist/gaesup/tools/zoomButton/index.d.ts

@@ -13,5 +13,6 @@ export declare function useZoom(): {
     closeCamera: (position: THREE.Vector3) => Promise<void>;
     isZoom: boolean;
     setIsZoom: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    moveToCamera: () => Promise<void>;
 };
 export declare function ZoomButton(props: zoomButtonPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/gaesup/tools/zoomButton/index.js

@@ -47,12 +47,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useState } from "react";
-import { makeCameraPosition } from "../../camera/control/orbit.js";
-import { GaesupWorldContext, GaesupWorldDispatchContext, } from "../../world/context/index.js";
+import { makeNormalCameraPosition } from "../../camera/control/normal";
+import { makeOrbitCameraPosition } from "../../camera/control/orbit";
+import { GaesupWorldContext, GaesupWorldDispatchContext, } from "../../world/context/index";
 import "./style.css";
 export function useZoom() {
     var _this = this;
-    var _a = useContext(GaesupWorldContext), moveTo = _a.moveTo, activeState = _a.activeState, cameraOption = _a.cameraOption;
+    var _a = useContext(GaesupWorldContext), moveTo = _a.moveTo, activeState = _a.activeState, cameraOption = _a.cameraOption, mode = _a.mode;
     var dispatch = useContext(GaesupWorldDispatchContext);
     var _b = useState(true), isZoom = _b[0], setIsZoom = _b[1];
     var closeCamera = function (position) { return __awaiter(_this, void 0, void 0, function () {
@@ -81,6 +82,25 @@ export function useZoom() {
             return [2 /*return*/];
         });
     }); };
+    var moveToCamera = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(mode.control === "orbit" && moveTo)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, moveTo(makeOrbitCameraPosition(activeState, cameraOption), activeState.position)];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 2:
+                    if (!(mode.control === "normal" && moveTo)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, moveTo(makeNormalCameraPosition(activeState, cameraOption), activeState.position)];
+                case 3:
+                    _a.sent();
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
     var setZoom = function (position, isZoom) { return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -89,7 +109,7 @@ export function useZoom() {
                     return [4 /*yield*/, closeCamera(position)];
                 case 1:
                     _a.sent();
-                    return [4 /*yield*/, moveTo(makeCameraPosition(activeState, cameraOption), activeState.position)];
+                    return [4 /*yield*/, moveToCamera()];
                 case 2:
                     _a.sent();
                     return [4 /*yield*/, openCamera()];
@@ -105,6 +125,7 @@ export function useZoom() {
         closeCamera: closeCamera,
         isZoom: isZoom,
         setIsZoom: setIsZoom,
+        moveToCamera: moveToCamera,
     };
 }
 export function ZoomButton(props) {

package/dist/index.d.ts

@@ -6,7 +6,6 @@ export { PassiveCharacter } from "./gaesup/component/passive/character";
 export { PassiveVehicle } from "./gaesup/component/passive/vehicle";
 export { GaesupController } from "./gaesup/controller";
 export { GaeSupProps } from "./gaesup/gaesupProps";
-export { useGaesupController } from "./gaesup/hooks";
 export { GameBoy } from "./gaesup/tools/gameBoy";
 export { GamePad } from "./gaesup/tools/gamePad";
 export { JoyStick } from "./gaesup/tools/joyStick";
@@ -17,3 +16,9 @@ export { Rideable } from "./gaesup/tools/rideable";
 export { ZoomButton } from "./gaesup/tools/zoomButton";
 export { Elr, Qt, V3, V30, V31 } from "./gaesup/utils/vector";
 export { GaesupWorld } from "./gaesup/world";
+export { useGaesupAnimation } from "./gaesup/hooks/useGaesupAnimation";
+export { useGaesupController } from "./gaesup/hooks/useGaesupController";
+export * as useJoyStick from "./gaesup/hooks/useJoyStick";
+export { usePushKey } from "./gaesup/hooks/usePushKey";
+export { useRideable } from "./gaesup/hooks/useRideable";
+export { useTeleport } from "./gaesup/hooks/useTeleport";

package/dist/index.js

@@ -6,7 +6,6 @@ export { PassiveCharacter } from "./gaesup/component/passive/character";
 export { PassiveVehicle } from "./gaesup/component/passive/vehicle";
 export { GaesupController } from "./gaesup/controller";
 export { GaeSupProps } from "./gaesup/gaesupProps";
-export { useGaesupController } from "./gaesup/hooks";
 export { GameBoy } from "./gaesup/tools/gameBoy";
 export { GamePad } from "./gaesup/tools/gamePad";
 export { JoyStick } from "./gaesup/tools/joyStick";
@@ -17,3 +16,9 @@ export { Rideable } from "./gaesup/tools/rideable";
 export { ZoomButton } from "./gaesup/tools/zoomButton";
 export { Elr, Qt, V3, V30, V31 } from "./gaesup/utils/vector";
 export { GaesupWorld } from "./gaesup/world";
+export { useGaesupAnimation } from "./gaesup/hooks/useGaesupAnimation";
+export { useGaesupController } from "./gaesup/hooks/useGaesupController";
+export * as useJoyStick from "./gaesup/hooks/useJoyStick";
+export { usePushKey } from "./gaesup/hooks/usePushKey";
+export { useRideable } from "./gaesup/hooks/useRideable";
+export { useTeleport } from "./gaesup/hooks/useTeleport";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gaesup-world",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/gaesup/hooks/index.d.ts

@@ -1 +0,0 @@
-export { useGaesupController } from "./useGaesupController";

package/dist/gaesup/hooks/index.js

@@ -1 +0,0 @@
-export { useGaesupController } from "./useGaesupController";