gaesup-world 0.0.783 → 0.1.0

package/README.md

@@ -191,30 +191,32 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
 
 #### [gameboy](#gameboy)
 
-## 1) joyStick
+1. JoyStick
 
-### (1) Info
-
-- 가상 조이스틱 인터페이스를 제공하는 컴포넌트입니다. 모바일 환경에서 사용을 권장합니다
+- This component provides a virtual joystick interface. It is recommended for use in mobile environments.
 
-> 주의! 모바일에서 위치의 흔들림 때문에 `GaesupWorld` 의 옵션 `scrollBlock` 의 사용을 권장합니다.
+> Caution! Due to position fluctuation in mobile environments, it is recommended to use the scrollBlock option of GaesupWorld.
 
-### (2) 특징
+### (2) Features
 
-- **모바일 등에서 조이스틱 인터페이스 제공**: 모바일 등의 환경에서 조이스틱 인터페이스를 제공합니다
-- **커스텀 외관**: 조이스틱과 그 공의 스타일링을 위한 `joyStickBallStyle` 및 `joyStickStyle` 속성을 받습니다.
-- **반응형 및 상호작용**: 다양한 장치에 대응하기 위한 마우스, 모바일 터치 이벤트를 지원합니다.
+Joystick Interface for Mobile and Other Environments: Provides a joystick interface in environments like mobile.
+Custom Appearance: Receives joyStickBallStyle and joyStickStyle properties for styling the joystick and its ball.
+Responsive and Interactive: Supports mouse and mobile touch events to cater to various devices.
 
 ### (3) Props
 
-- `joyStickBallStyle`: 조이스틱 공의 스타일 (`React.CSSProperties` 객체).
-- `joyStickStyle`: 조이스틱 컨테이너의 스타일 (`React.CSSProperties` 객체).
+joyStickBallStyle: Style of the joystick ball (React.CSSProperties object).
+joyStickStyle: Style of the joystick container (React.CSSProperties object).
 
 ### (4) How To Use
 
-1. 컴포넌트 트리에 `JoyStick` 컴포넌트를 포함시킵니다.
-2. 컴포넌트는 마우스 및 터치 입력에 반응하여 이동을 제어합니다.
-3. (선택) `joyStickBallStyle` 및 `joyStickStyle`을 통해 필요한 스타일을 커스텀합니다
+- Include the JoyStick component in your `GaesupWorld` component tree.
+
+> It is imperative to use it inside the GaesupWorld component
+
+- The component responds to mouse and touch inputs to control movement.
+
+- (Optional) Customize the necessary style using joyStickBallStyle and joyStickStyle.
 
 ### (5) Example
 
@@ -304,7 +306,7 @@ const MyComponent = () => {
 - **커스텀 스타일링**: 미니맵 및 그 내부 요소들의 스타일을 사용자 정의할 수 있습니다.
 - **마우스 휠 지원**: 마우스 휠을 사용하여 미니맵의 스케일을 조절할 수 있습니다.
 
-## 사용 방법
+### (3) 사용 방법
 
 1. `MiniMap` 컴포넌트를 컴포넌트 트리에 포함시킵니다.
 2. 필요한 스타일을 `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, `plusMinusStyle` 속성을 통해 전달합니다.
@@ -408,7 +410,7 @@ const MyComponent = () => {
 
 ## 예제 코드
 
-```jsx
+```tsx
 import { GamePad } from "./GamePad";
 import { GaesupWorldContext } from "../../world/context";
 
@@ -451,15 +453,17 @@ const MyComponent = () => {
 
 ## 예제 코드
 
-```jsx
+```tsx
 import { ZoomButton } from "./ZoomButton";
 import * as THREE from "three";
 
 const App = () => {
   return (
-    <ZoomButton position={new THREE.Vector3(0, 0, 5)}>
-      Zoom to Position
-    </ZoomButton>
+    <GaesupWorld>
+      {/* ... */}
+      <ZoomButton position={new THREE.Vector3(0, 0, 5)}>{children}</ZoomButton>
+      {/* ... */}
+    </GaesupWorld>
   );
 };
 ```

package/dist/gaesup/animation/actions.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from "react";
 import { Object3D, Object3DEventMap } from "three";
-import { animationTagType, groundRayType } from "../controller/type";
+import { groundRayType } from "../controller/type";
 export type playActionsType = {
     groundRay: groundRayType;
 };
@@ -11,15 +11,18 @@ export type playResultType = {
     actions: actionsType;
     ref: Ref<Object3D<Object3DEventMap>>;
 };
-export declare function usePlayActions(): {
+export declare function readyAnimation(): {
     resultRef: {
         character: playResultType;
         vehicle: playResultType;
         airplane: playResultType;
     };
-    play: (tag: keyof animationTagType) => void;
-    setAnimationName: (actions: actionsType) => void;
 };
 export default function playCharacterActions({ groundRay }: playActionsType): {
     ref: Ref<Object3D<Object3DEventMap>>;
+    resultRef: {
+        character: playResultType;
+        vehicle: playResultType;
+        airplane: playResultType;
+    };
 };

package/dist/gaesup/animation/actions.js

@@ -12,26 +12,49 @@ var __assign = (this && this.__assign) || function () {
 import { useAnimations, useKeyboardControls } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
 import { useContext, useEffect } from "react";
+import { useGaesupAnimation } from "../hooks/useGaesupAnimation";
 import { GaesupWorldContext, GaesupWorldDispatchContext, } from "../world/context";
-export function usePlayActions() {
-    var _a = useContext(GaesupWorldContext), characterGltf = _a.characterGltf, vehicleGltf = _a.vehicleGltf, airplaneGltf = _a.airplaneGltf, animations = _a.animations;
+// 캐릭터 등록, 애니메이션 이름 설정, 애니메이션 실행
+export function readyAnimation() {
+    var _a = useContext(GaesupWorldContext), characterGltf = _a.characterGltf, vehicleGltf = _a.vehicleGltf, airplaneGltf = _a.airplaneGltf;
     var resultRef = {
         character: null,
         vehicle: null,
         airplane: null,
     };
-    if (characterGltf && characterGltf.animations) {
+    if (characterGltf && characterGltf.animations)
         resultRef.character = useAnimations(characterGltf.animations);
-    }
-    if (vehicleGltf && vehicleGltf.animations) {
+    if (vehicleGltf && vehicleGltf.animations)
         resultRef.vehicle = useAnimations(vehicleGltf.animations);
-    }
-    if (airplaneGltf && airplaneGltf.animations) {
+    if (airplaneGltf && airplaneGltf.animations)
         resultRef.airplane = useAnimations(airplaneGltf.animations);
-    }
+    return {
+        resultRef: resultRef,
+    };
+}
+export default function playCharacterActions(_a) {
+    var groundRay = _a.groundRay;
+    var _b = useContext(GaesupWorldContext), states = _b.states, activeState = _b.activeState, animations = _b.animations, mode = _b.mode, characterGltf = _b.characterGltf, vehicleGltf = _b.vehicleGltf, airplaneGltf = _b.airplaneGltf;
     var dispatch = useContext(GaesupWorldDispatchContext);
+    var control = useKeyboardControls()[1]();
+    var _c = useGaesupAnimation(), subscribeAll = _c.subscribeAll, notify = _c.notify, store = _c.store;
+    var resultRef = {
+        character: null,
+        vehicle: null,
+        airplane: null,
+    };
+    if (characterGltf && characterGltf.animations)
+        resultRef.character = useAnimations(characterGltf.animations);
+    if (vehicleGltf && vehicleGltf.animations)
+        resultRef.vehicle = useAnimations(vehicleGltf.animations);
+    if (airplaneGltf && airplaneGltf.animations)
+        resultRef.airplane = useAnimations(airplaneGltf.animations);
     var play = function (tag) {
         animations.current = tag;
+        var currentAnimation = store[tag];
+        if (currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.action) {
+            currentAnimation.action();
+        }
         dispatch({
             type: "update",
             payload: {
@@ -39,39 +62,46 @@ export function usePlayActions() {
             },
         });
     };
-    var setAnimationName = function (actions) {
-        animations.animationNames = Object.assign(animations.animationNames, Object.keys(actions).reduce(function (acc, cur) {
-            var _a;
-            return __assign(__assign({}, acc), (_a = {}, _a[cur] = cur, _a));
-        }, {}));
-        dispatch({
-            type: "update",
-            payload: {
-                animations: __assign({}, animations),
-            },
-        });
-    };
-    return { resultRef: resultRef, play: play, setAnimationName: setAnimationName };
-}
-export default function playCharacterActions(_a) {
-    var groundRay = _a.groundRay;
-    var _b = usePlayActions(), _c = _b.resultRef.character, actions = _c.actions, ref = _c.ref, play = _b.play, setAnimationName = _b.setAnimationName;
-    var _d = useContext(GaesupWorldContext), states = _d.states, activeState = _d.activeState, animations = _d.animations, mode = _d.mode;
-    var isNotMoving = states.isNotMoving, isMoving = states.isMoving, isJumping = states.isJumping, isRunning = states.isRunning, isAnimationOuter = states.isAnimationOuter, isOnTheGround = states.isOnTheGround;
-    var dispatch = useContext(GaesupWorldDispatchContext);
-    var control = useKeyboardControls()[1]();
-    var resetAni = function () { return play("idle"); };
-    var playIdle = function () { return play("idle"); };
-    var playWalk = function () { return play("walk"); };
-    var playRun = function () { return play("run"); };
-    var playJump = function () { return play("jump"); };
-    var playFall = function () { return play("fall"); };
-    var playRide = function () { return play("ride"); };
-    var playLanding = function () { return play("land"); };
+    var _d = resultRef.character, actions = _d.actions, ref = _d.ref;
+    // 초기 기본 애니메이션 등록
     useEffect(function () {
-        return function () {
-            resetAni();
-        };
+        subscribeAll([
+            {
+                tag: "walk",
+                condition: function () { return !states.isRunning && states.isMoving; },
+                action: function () { },
+                animationName: "walk",
+                key: "walk",
+            },
+            {
+                tag: "run",
+                condition: function () { return states.isRunning; },
+                action: function () { },
+                animationName: "run",
+                key: "run",
+            },
+            {
+                tag: "jump",
+                condition: function () { return states.isJumping; },
+                action: function () { },
+                animationName: "jump",
+                key: "jump",
+            },
+            {
+                tag: "fall",
+                condition: function () { return groundRay.hit === null && activeState.velocity.y < 0; },
+                action: function () { },
+                animationName: "fall",
+                key: "fall",
+            },
+            {
+                tag: "ride",
+                condition: function () { return states.isPush["keyR"]; },
+                action: function () { },
+                animationName: "ride",
+                key: "ride",
+            },
+        ]);
     }, []);
     useEffect(function () {
         animations.keyControl = control;
@@ -84,45 +114,17 @@ export default function playCharacterActions(_a) {
     }, [control]);
     useEffect(function () {
         var _a;
-        if (mode.type === "character") {
-            var action_1 = (_a = actions[animations.current]) === null || _a === void 0 ? void 0 : _a.reset().fadeIn(0.2).play();
-            setAnimationName(actions);
-            return function () {
-                action_1 === null || action_1 === void 0 ? void 0 : action_1.fadeOut(0.2);
-            };
-        }
+        var action = (_a = actions[animations.current]) === null || _a === void 0 ? void 0 : _a.reset().fadeIn(0.2).play();
+        return function () {
+            action === null || action === void 0 ? void 0 : action.fadeOut(0.2);
+        };
     }, [animations.current, mode.type]);
     useFrame(function () {
-        if (mode.type === "character") {
-            if (!isAnimationOuter) {
-                if (isJumping) {
-                    playJump();
-                }
-                else if (isNotMoving) {
-                    playIdle();
-                }
-                else if (isRunning) {
-                    playRun();
-                }
-                else if (isMoving) {
-                    playWalk();
-                }
-                // if (groundRay.hit) {
-                //   if (!isJumping && !isOnTheGround) {
-                //     if (groundRay.hit.toi < 5) {
-                //       playLanding();
-                //     } else {
-                //       playFall();
-                //     }
-                //   }
-                // }
-                // if (groundRay.hit === null && activeState.velocity.y < 0) {
-                //   playFall();
-                // }
-            }
-        }
+        var tag = notify();
+        play(tag);
     });
     return {
         ref: ref,
+        resultRef: resultRef,
     };
 }

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

@@ -6,6 +6,6 @@ export default function normal(prop) {
     var cameraPosition = activeState.position
         .clone()
         .add(V3(0, cameraOption.YDistance, cameraOption.XZDistance));
-    state.camera.position.lerp(cameraPosition, 0.9);
+    state.camera.position.lerp(cameraPosition, 1);
     state.camera.lookAt(activeState.position.clone());
 }

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

@@ -1,11 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { GaesupWorldContext } from "../../../world/context";
-import { InnerGroupRef } from "../common/InnerGroupRef";
 import { WrapperRef } from "../common/WrapperRef";
 import { AirplaneCollider } from "./collider";
 export function AirplaneRef(_a) {
     var props = _a.props, refs = _a.refs;
-    var _b = useContext(GaesupWorldContext), characterGltf = _b.characterGltf, airplaneGltf = _b.airplaneGltf;
-    return (_jsxs(WrapperRef, { props: props, refs: refs, gltf: airplaneGltf, children: [props.isRider && (_jsx(InnerGroupRef, { props: props, gltf: characterGltf, ref: refs.characterInnerRef })), _jsx(AirplaneCollider, { props: props })] }));
+    var airplaneGltf = useContext(GaesupWorldContext).airplaneGltf;
+    return (_jsx(WrapperRef, { props: props, refs: refs, gltf: airplaneGltf, children: _jsx(AirplaneCollider, { props: props }) }));
 }

package/dist/gaesup/component/active/common/InnerGroupRef.js

@@ -10,17 +10,20 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, forwardRef, useMemo } from "react";
+import { Suspense, forwardRef, useContext, useMemo } from "react";
 import { useGraph } from "@react-three/fiber";
 import * as THREE from "three";
 import { SkeletonUtils } from "three-stdlib";
+import { GaesupWorldContext } from "../../../world/context";
+import { RiderGroup } from "./RiderGroupRef";
 export var InnerGroupRef = forwardRef(function (_a, ref) {
     var props = _a.props, animationRef = _a.animationRef, gltf = _a.gltf;
+    var _b = useContext(GaesupWorldContext), mode = _b.mode, states = _b.states;
     var scene = gltf.scene;
     var clone = useMemo(function () { return SkeletonUtils.clone(scene); }, [scene]);
     var nodes = useGraph(clone).nodes;
     var objectNode = Object.values(nodes).find(function (node) { return node.type === "Object3D"; });
-    return (_jsx(Suspense, { children: _jsxs("group", __assign({ receiveShadow: true, castShadow: true }, props.groupProps, { ref: ref, children: [objectNode && animationRef && (_jsx("primitive", { object: objectNode, visible: false, receiveShadow: true, castShadow: true, ref: animationRef })), Object.keys(nodes).map(function (name, key) {
+    return (_jsx(Suspense, { fallback: null, children: _jsxs("group", __assign({ receiveShadow: true, castShadow: true }, props.groupProps, { ref: ref, children: [mode.type !== "character" && states.isRiderOn && (_jsx(RiderGroup, { props: props })), objectNode && animationRef && (_jsx("primitive", { object: objectNode, visible: false, receiveShadow: true, castShadow: true, ref: animationRef })), Object.keys(nodes).map(function (name, key) {
                     var node = nodes[name];
                     if (node instanceof THREE.SkinnedMesh) {
                         return (_jsx("skinnedMesh", { castShadow: true, receiveShadow: true, material: node.material, geometry: node.geometry, skeleton: node.skeleton }, key));

package/dist/gaesup/component/active/common/RiderGroupRef.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from "react";
+import { controllerInnerType } from "../../../controller/type";
+import * as THREE from "three";
+export type RiderGroupRefType = {
+    props: controllerInnerType;
+};
+export declare const RiderGroup: ({ props }: RiderGroupRefType, ref: Ref<THREE.Group>) => import("react/jsx-runtime").JSX.Element;

package/dist/gaesup/component/active/common/RiderGroupRef.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { useGraph } from "@react-three/fiber";
+import * as THREE from "three";
+import { SkeletonUtils } from "three-stdlib";
+import playPassiveActions from "../../../animation/passiveActions";
+import { GaesupWorldContext } from "../../../world/context";
+export var RiderGroup = function (_a, ref) {
+    var props = _a.props;
+    var _b = useContext(GaesupWorldContext), characterGltf = _b.characterGltf, states = _b.states, characterCollider = _b.characterCollider;
+    var characterAnimationRef = playPassiveActions({
+        current: "ride",
+        animations: characterGltf.animations,
+    }).animationRef;
+    var characterScene = characterGltf.scene;
+    var characterClone = useMemo(function () { return SkeletonUtils.clone(characterScene); }, [characterScene]);
+    var characterNodes = useGraph(characterClone).nodes;
+    var characterObjectNode = Object.values(characterNodes).find(function (node) { return node.type === "Object3D"; });
+    return (_jsx(_Fragment, { children: characterAnimationRef && (_jsxs("group", { position: [
+                (characterCollider === null || characterCollider === void 0 ? void 0 : characterCollider.riderOffsetX) || 0,
+                (characterCollider === null || characterCollider === void 0 ? void 0 : characterCollider.riderOffsetY) || 0,
+                (characterCollider === null || characterCollider === void 0 ? void 0 : characterCollider.riderOffsetZ) || 0,
+            ], children: [characterObjectNode && (_jsx("primitive", { object: characterObjectNode, visible: false, receiveShadow: true, castShadow: true, ref: characterAnimationRef })), Object.keys(characterNodes).map(function (name, key) {
+                    var characterNode = characterNodes[name];
+                    if (characterNode instanceof THREE.SkinnedMesh) {
+                        return (_jsx("skinnedMesh", { castShadow: true, receiveShadow: true, material: characterNode.material, geometry: characterNode.geometry, skeleton: characterNode.skeleton }, key));
+                    }
+                    else if (characterNode instanceof THREE.Mesh) {
+                        return (_jsx("mesh", { castShadow: true, receiveShadow: true, material: characterNode.material, geometry: characterNode.geometry }, key));
+                    }
+                })] })) }));
+};

package/dist/gaesup/component/active/vehicle/index.js

@@ -1,12 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext } from "react";
 import { GaesupWorldContext } from "../../../world/context";
-import { InnerGroupRef } from "../common/InnerGroupRef";
 import { WrapperRef } from "../common/WrapperRef";
 import { VehicleCollider } from "./collider";
 import { Wheels } from "./wheels";
 export function VehicleRef(_a) {
     var props = _a.props, refs = _a.refs;
-    var _b = useContext(GaesupWorldContext), url = _b.url, characterGltf = _b.characterGltf, vehicleGltf = _b.vehicleGltf;
-    return (_jsxs(WrapperRef, { props: props, refs: refs, gltf: vehicleGltf, outerChildren: url.wheelUrl ? _jsx(Wheels, { props: props }) : _jsx(_Fragment, {}), children: [props.isRider && (_jsx(InnerGroupRef, { props: props, gltf: characterGltf, ref: refs.characterInnerRef })), _jsx(VehicleCollider, {})] }));
+    var _b = useContext(GaesupWorldContext), url = _b.url, vehicleGltf = _b.vehicleGltf;
+    return (_jsx(WrapperRef, { props: props, refs: refs, gltf: vehicleGltf, outerChildren: url.wheelUrl ? _jsx(Wheels, { props: props }) : _jsx(_Fragment, {}), children: _jsx(VehicleCollider, {}) }));
 }

package/dist/gaesup/component/index.js

@@ -7,7 +7,7 @@ import { CharacterRef } from "./active/character";
 import { VehicleRef } from "./active/vehicle";
 export function GaesupComponent(_a) {
     var props = _a.props, refs = _a.refs;
-    var _b = useContext(GaesupWorldContext), mode = _b.mode, activeState = _b.activeState;
+    var mode = useContext(GaesupWorldContext).mode;
     calculation(props);
     return (_jsxs(_Fragment, { children: [mode.type === "character" && _jsx(CharacterRef, { props: props, refs: refs }), mode.type === "vehicle" && _jsx(VehicleRef, { props: props, refs: refs }), mode.type === "airplane" && _jsx(AirplaneRef, { props: props, refs: refs })] }));
 }

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFrame } from "@react-three/fiber";
-import { quat } from "@react-three/rapier";
+import { CuboidCollider, quat } from "@react-three/rapier";
 import { useMemo, useRef } from "react";
 import { InnerGroupRef } from "../common/InnerGroupRef";
 import { OuterGroupRef } from "../common/OuterGroupRef";
 import { RigidBodyRef } from "../common/RigidbodyRef";
-import { AirplaneCollider } from "./collider";
 export function PassiveAirplane(props) {
     var rigidBodyRef = useRef(null);
     var outerGroupRef = useRef(null);
@@ -23,8 +22,9 @@ export function PassiveAirplane(props) {
             euler: props.euler,
             currentAnimation: props.currentAnimation,
             airplaneUrl: props.airplaneUrl,
+            airplaneSize: props.airplaneSize,
         };
-    }, [props]), position = _a.position, euler = _a.euler, currentAnimation = _a.currentAnimation, airplaneUrl = _a.airplaneUrl;
+    }, [props]), position = _a.position, euler = _a.euler, currentAnimation = _a.currentAnimation, airplaneUrl = _a.airplaneUrl, airplaneSize = _a.airplaneSize;
     useFrame(function () {
         if (innerGroupRef && innerGroupRef.current) {
             var _euler = euler.clone();
@@ -33,9 +33,9 @@ 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.gravity, false);
+        // }
     });
-    return (_jsx(OuterGroupRef, { ref: refs.outerGroupRef, children: props.airplaneUrl && (_jsxs(RigidBodyRef, { ref: refs.rigidBodyRef, position: props.position, rotation: props.euler, children: [_jsx(InnerGroupRef, { currentAnimation: props.currentAnimation, ref: refs.innerGroupRef, url: props.airplaneUrl }), _jsx(AirplaneCollider, { airplaneSize: props.airplaneSize, ref: colliderRef })] })) }));
+    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/component/passive/airplane/type.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { CollisionEnterPayload } from "@react-three/rapier";
 export type passiveAirplanePropsType = {
     position: THREE.Vector3;
     euler: THREE.Euler;
@@ -7,4 +8,5 @@ export type passiveAirplanePropsType = {
     currentAnimation: string;
     children?: React.ReactNode;
     gravity?: number;
+    onCollisionEnter?: (e: CollisionEnterPayload) => Promise<void>;
 };

package/dist/gaesup/component/passive/common/RigidbodyRef.d.ts

@@ -1,7 +1,8 @@
-import { RapierRigidBody } from "@react-three/rapier";
+import { CollisionEnterPayload, RapierRigidBody } from "@react-three/rapier";
 import { ReactNode } from "react";
 export declare const RigidBodyRef: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
     position?: THREE.Vector3;
     rotation?: THREE.Euler;
+    onCollisionEnter?: (e: CollisionEnterPayload) => Promise<void>;
 } & import("react").RefAttributes<RapierRigidBody>>;

package/dist/gaesup/component/passive/common/RigidbodyRef.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RigidBody } from "@react-three/rapier";
+import { RigidBody, } from "@react-three/rapier";
 import { forwardRef } from "react";
 export var RigidBodyRef = forwardRef(function (_a, ref) {
-    var children = _a.children, position = _a.position, rotation = _a.rotation;
+    var children = _a.children, position = _a.position, rotation = _a.rotation, onCollisionEnter = _a.onCollisionEnter;
     var _euler = rotation.clone();
     _euler.x = 0;
     _euler.z = 0;
-    return (_jsx(RigidBody, { colliders: false, ref: ref, position: position, rotation: _euler, userData: { intangible: true }, children: children }));
+    return (_jsx(RigidBody, { colliders: false, ref: ref, position: position, rotation: _euler, userData: { intangible: true }, onCollisionEnter: onCollisionEnter, children: children }));
 });

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CuboidCollider } from "@react-three/rapier";
-import { useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { InnerGroupRef } from "../common/InnerGroupRef";
 import { OuterGroupRef } from "../common/OuterGroupRef";
 import { RigidBodyRef } from "../common/RigidbodyRef";
@@ -27,5 +27,10 @@ export function PassiveVehicle(props) {
             vehicleUrl: props.url.vehicleUrl,
         };
     }, [props]), position = _a.position, euler = _a.euler, vehicleSize = _a.vehicleSize, wheelSize = _a.wheelSize, currentAnimation = _a.currentAnimation, wheelUrl = _a.wheelUrl, vehicleUrl = _a.vehicleUrl;
-    return (_jsxs(OuterGroupRef, { ref: refs.outerGroupRef, children: [props.children, vehicleUrl && (_jsxs(RigidBodyRef, { ref: refs.rigidBodyRef, position: position, rotation: euler, children: [_jsx(InnerGroupRef, { currentAnimation: currentAnimation, ref: refs.innerGroupRef, url: vehicleUrl }), _jsx(CuboidCollider, { ref: colliderRef, args: [vehicleSize.x / 2, vehicleSize.y / 2, vehicleSize.z / 2], position: [0, vehicleSize.y + wheelSize.y || 0, 0] })] })), wheelUrl && (_jsx(Wheels, { vehicleSize: vehicleSize, wheelSize: wheelSize, rigidBodyRef: rigidBodyRef, url: wheelUrl }))] }));
+    useEffect(function () {
+        if (rigidBodyRef.current) {
+            rigidBodyRef.current.lockRotations(true, true);
+        }
+    }, []);
+    return (_jsxs(OuterGroupRef, { ref: refs.outerGroupRef, children: [props.children, vehicleUrl && (_jsxs(RigidBodyRef, { ref: refs.rigidBodyRef, position: position, rotation: euler, onCollisionEnter: props.onCollisionEnter, children: [_jsx(InnerGroupRef, { currentAnimation: currentAnimation, ref: refs.innerGroupRef, url: vehicleUrl }), wheelUrl ? (_jsx(CuboidCollider, { ref: colliderRef, args: [vehicleSize.x / 2, vehicleSize.y / 2, vehicleSize.z / 2], position: [0, vehicleSize.y + wheelSize.y / 2, 0] })) : (_jsx(CuboidCollider, { ref: colliderRef, args: [vehicleSize.x / 2, vehicleSize.y / 2, vehicleSize.z / 2], position: [0, vehicleSize.y, 0] }))] })), wheelUrl && (_jsx(Wheels, { vehicleSize: vehicleSize, wheelSize: wheelSize, rigidBodyRef: rigidBodyRef, url: wheelUrl }))] }));
 }

package/dist/gaesup/component/passive/vehicle/type.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { CollisionEnterPayload } from "@react-three/rapier";
 import { activeStateType, characterColliderType, modeType, urlType } from "../../../world/context/type";
 export type gaesupPassiveCharacterPropsType = {
     state: activeStateType;
@@ -16,4 +17,5 @@ export type passiveVehiclePropsType = {
     url: urlType;
     currentAnimation: string;
     children?: React.ReactNode;
+    onCollisionEnter?: (e: CollisionEnterPayload) => Promise<void>;
 };

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

@@ -1,2 +1,3 @@
 import { controllerType } from "./type";
 export declare function GaesupController(props: controllerType): import("react/jsx-runtime").JSX.Element;
+export declare function GaesupControllerInner(props: controllerType): import("react/jsx-runtime").JSX.Element;

package/dist/gaesup/controller/index.js

@@ -10,14 +10,20 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useReducer, useRef } from "react";
+import { useContext, useMemo, useReducer, useRef } from "react";
 import Camera from "../camera";
+import { KeyboardControls } from "@react-three/drei";
 import { GaesupComponent } from "../component";
+import { GaesupWorldContext } from "../world/context";
 import { GaesupControllerContext, GaesupControllerDispatchContext, gaesupControllerDefault, } from "./context";
 import { gaesupControllerReducer } from "./context/reducer";
 import initDebug from "./debug";
 import initControllerProps from "./initialize";
 export function GaesupController(props) {
+    var keyBoardMap = useContext(GaesupWorldContext).keyBoardMap;
+    return (_jsx(KeyboardControls, { map: keyBoardMap, children: _jsx(GaesupControllerInner, __assign({}, props, { children: props.children })) }));
+}
+export function GaesupControllerInner(props) {
     var capsuleColliderRef = useRef(null);
     var rigidBodyRef = useRef(null);
     var outerGroupRef = useRef(null);

package/dist/gaesup/controller/initialize/callback/index.js

@@ -12,18 +12,19 @@ var __assign = (this && this.__assign) || function () {
 import { useAnimations } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
 import { useContext, useEffect } from "react";
+import { useGaesupAnimation } from "../../../hooks/useGaesupAnimation";
 import { GaesupWorldContext, GaesupWorldDispatchContext, } from "../../../world/context";
 export default function initCallback(props) {
     var _a = useContext(GaesupWorldContext), characterGltf = _a.characterGltf, characterAnimations = _a.animations, activeState = _a.activeState, states = _a.states, control = _a.control;
     var dispatch = useContext(GaesupWorldDispatchContext);
     var animations = characterGltf.animations;
     var actions = useAnimations(animations, props.outerGroupRef).actions;
+    var subscribe = useGaesupAnimation().subscribe;
     var playAnimation = function (tag, key) {
         if (!(key in control))
             return;
         if (control[key]) {
             characterAnimations.current = tag;
-            states.isAnimationOuter = true;
             dispatch({
                 type: "update",
                 payload: {
@@ -31,11 +32,8 @@ export default function initCallback(props) {
                 },
             });
         }
-        else {
-            states.isAnimationOuter = false;
-        }
     };
-    var controllerProp = __assign(__assign({}, props), { activeState: activeState, control: control, states: states });
+    var controllerProp = __assign(__assign({}, props), { activeState: activeState, control: control, states: states, subscribe: subscribe });
     useEffect(function () {
         if (props.onReady) {
             props.onReady(controllerProp);

package/dist/gaesup/controller/initialize/callback/type.d.ts

@@ -1,6 +1,6 @@
 import { RootState } from "@react-three/fiber";
 import { cameraRayType } from "../../../camera/type";
-import { activeStateType, animationPropType, keyControlType, statesType } from "../../../world/context/type";
+import { activeStateType, animationAtomType, animationPropType, keyControlType, statesType } from "../../../world/context/type";
 import { actionsType, groundRayType, slopeRayType } from "../../type";
 export type callbackPropType = {
     activeState: activeStateType;
@@ -9,6 +9,7 @@ export type callbackPropType = {
     groundRay: groundRayType;
     cameraRay: cameraRayType;
     control: keyControlType;
+    subscribe: (props: animationAtomType) => void;
 };
 export type onFramePropType = callbackPropType & RootState;
 export type onAnimatePropType = onFramePropType & {

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare function GaeSupProps({ text, position, children, }: {
+export declare function GaeSupProps({ type, text, position, children, }: {
+    type?: "normal" | "ground";
     text?: string;
     position?: [number, number, number];
     children: React.ReactNode;