gaesup-world 0.0.781 → 0.0.783

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 jigglypop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -179,22 +179,287 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
 
 ---
 
-## Tools
+# Tools
 
-#### [Tools](#tools)
+- 개숲월드에서 캐릭터 컨트롤을 도와주는 다양한 도구들입니다.
 
-#### [joystick](#joystick)
+#### 1) [joystick](#joystick)
 
-#### [keyboardtooltip](#keyboard tooltip)
+#### 2) [keyboardtooltip](#keyBoardTooltip)
 
 #### [minimap](#minimap)
 
 #### [gameboy](#gameboy)
 
-## joystick
+## 1) joyStick
 
-## keyboard tooltip
+### (1) Info
 
-## minimap
+- 가상 조이스틱 인터페이스를 제공하는 컴포넌트입니다. 모바일 환경에서 사용을 권장합니다
 
-## gameboy
+> 주의! 모바일에서 위치의 흔들림 때문에 `GaesupWorld` 의 옵션 `scrollBlock` 의 사용을 권장합니다.
+
+### (2) 특징
+
+- **모바일 등에서 조이스틱 인터페이스 제공**: 모바일 등의 환경에서 조이스틱 인터페이스를 제공합니다
+- **커스텀 외관**: 조이스틱과 그 공의 스타일링을 위한 `joyStickBallStyle` 및 `joyStickStyle` 속성을 받습니다.
+- **반응형 및 상호작용**: 다양한 장치에 대응하기 위한 마우스, 모바일 터치 이벤트를 지원합니다.
+
+### (3) Props
+
+- `joyStickBallStyle`: 조이스틱 공의 스타일 (`React.CSSProperties` 객체).
+- `joyStickStyle`: 조이스틱 컨테이너의 스타일 (`React.CSSProperties` 객체).
+
+### (4) How To Use
+
+1. 컴포넌트 트리에 `JoyStick` 컴포넌트를 포함시킵니다.
+2. 컴포넌트는 마우스 및 터치 입력에 반응하여 이동을 제어합니다.
+3. (선택) `joyStickBallStyle` 및 `joyStickStyle`을 통해 필요한 스타일을 커스텀합니다
+
+### (5) Example
+
+```jsx
+const MyComponent = () => {
+  // 커스텀 스타일 정의
+  const joyStickStyle = {
+    /* 여기에 조이스틱 컨테이너 스타일을 정의하세요 */
+  };
+  const joyStickBallStyle = {
+    /* 여기에 조이스틱 공의 스타일을 정의하세요 */
+  };
+
+  return (
+    <JoyStick
+      joyStickStyle={joyStickStyle}
+      joyStickBallStyle={joyStickBallStyle}
+    />
+  );
+};
+```
+
+## 2) keyBoardTooltip
+
+### (1) 개요
+
+- 키보드 컨트롤러 인터페이스를 시각적으로 표시하기 위해 만든 컴포넌트입니다. 키보드의 각 키와 연결된 액션을 시각적으로 나타냅니다.
+
+### (2) 특징
+
+- **키 배열 시각화** : 키보드의 모든 키를 배열 형태로 시각화합니다.
+- **애니메이션 상태 반영** : 현재 활성화된 키와 연관된 액션을 다른 스타일로 표시하여 사용자에게 피드백을 제공합니다.
+- **커스텀 스타일링** : 키 캡의 스타일을 사용자 정의할 수 있도록 다양한 스타일링 속성을 제공합니다.
+
+### (3) How To Use
+
+1. `KeyBoardToolTip` 컴포넌트를 `GaesupWorld` 컴포넌트에 포함시킵니다.
+2. mode의 `control`는 `keyboard` 로 정의합니다.
+3. 컴포넌트는 `KeyBoardAll` 상수에 따라 키보드의 각 키를 시각화하고, 현재 활성화된 키에 대해 다른 스타일을 적용합니다.
+4. (선택) 필요한 스타일을 `keyBoardToolTipInnerStyle`, `selectedKeyCapStyle`, `notSelectedkeyCapStyle`, `keyCapStyle` 속성을 통해 전달합니다.
+
+### (5) Example
+
+```jsx
+import { KeyBoardToolTip } from "./KeyBoardToolTip";
+import { GaesupWorldContext } from "../../world/context";
+
+const MyComponent = () => {
+  const keyBoardToolTipInnerStyle = {
+    /* ... */
+  };
+  const selectedKeyCapStyle = {
+    /* ... */
+  };
+  const notSelectedkeyCapStyle = {
+    /* ... */
+  };
+  const keyCapStyle = {
+    /* ... */
+  };
+
+  return (
+    <GaesupWorld>
+      {/* ... */}
+      <KeyBoardToolTip
+        keyBoardToolTipInnerStyle={keyBoardToolTipInnerStyle}
+        selectedKeyCapStyle={selectedKeyCapStyle}
+        notSelectedkeyCapStyle={notSelectedkeyCapStyle}
+        keyCapStyle={keyCapStyle}
+      />
+      {/* ... */}
+    </GaesupWorld>
+  );
+};
+```
+
+## 3) minimap
+
+### (1) Info
+
+- 3D 월드 내에서 사용자의 위치와 주변 환경을 작은 지도 형태로 보여주는 리액트 컴포넌트입니다. 이 컴포넌트는 `GaesupWorldContext`를 활용하여 사용자의 현재 상태와 모드에 따라 다르게 렌더링됩니다.
+
+### (2) 특징
+
+- **동적 스케일 조절**: 사용자가 지도의 크기를 동적으로 조절할 수 있습니다.
+- **방향 표시**: 동(East), 서(West), 남(South), 북(North) 방향을 시각적으로 표시합니다.
+- **커스텀 스타일링**: 미니맵 및 그 내부 요소들의 스타일을 사용자 정의할 수 있습니다.
+- **마우스 휠 지원**: 마우스 휠을 사용하여 미니맵의 스케일을 조절할 수 있습니다.
+
+## 사용 방법
+
+1. `MiniMap` 컴포넌트를 컴포넌트 트리에 포함시킵니다.
+2. 필요한 스타일을 `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, `plusMinusStyle` 속성을 통해 전달합니다.
+3. 컴포넌트는 현재 사용자의 위치와 방향에 따라 미니맵을 업데이트합니다.
+
+### (4) Example
+
+```jsx
+import { MiniMap } from "./MiniMap";
+
+const MyComponent = () => {
+  const minimapStyle = {
+    /* ... */
+  };
+  const innerStyle = {
+    /* ... */
+  };
+  // 다른 스타일 속성들도 정의
+
+  return (
+    <GaesupWorld>
+      {/* ... */}
+      <MiniMap
+        minimapStyle={minimapStyle}
+        innerStyle={innerStyle}
+        // 다른 스타일 속성들 전달
+      />
+      {/* ... */}
+    </GaesupWorld>
+  );
+};
+```
+
+## GameBoy
+
+## 개요
+
+- GameBoy 컨트롤러 인터페이스입니다. 게임 4방향 키처럼 사용할 수 있으며, 모바일에서 사용을 권장합니다.
+
+## 특징
+
+- **방향 버튼**: `GameBoyDirections` 배열을 사용하여 방향 입력 (앞으로, 뒤로, 왼쪽으로, 오른쪽으로)을 위한 버튼을 구현합니다.
+- **컨텍스트 인식 렌더링**: `GaesupWorldContext`에서 `mode.controller` 값에 따라 컴포넌트를 렌더링합니다.
+- **커스텀 스타일링**: 스타일링을 위한 `gameboyStyle` 및 `gameboyButtonStyle` 속성을 받습니다.
+
+## 사용 방법
+
+`GameBoy` 컴포넌트를 사용하기 위해:
+
+1. 컴포넌트 트리에 배치합니다.
+2. 필요한 스타일을 `gameboyStyle` 및 `gameboyButtonStyle` 속성을 통해 전달합니다.
+3. 컴포넌트는 `GameBoyDirections` 배열에 기반하여 버튼을 렌더링합니다.
+
+## 예제 코드
+
+```jsx
+import { GameBoy } from "./GameBoy";
+import { GaesupWorldContext } from "../../world/context";
+
+const MyComponent = () => {
+  // 커스텀 스타일 정의
+  const gameboyStyle = {
+    /* ... */
+  };
+  const gameboyButtonStyle = {
+    /* ... */
+  };
+
+  return (
+    <GameBoy
+      gameboyStyle={gameboyStyle}
+      gameboyButtonStyle={gameboyButtonStyle}
+    />
+  );
+};
+```
+
+## GamePad
+
+## 개요
+
+- 게임패드 컨트롤 인터페이스를 제공하는 커스터마이징 가능한 인터페이스입니다. 조이스틱과 GameBoy와 같은 다양한 컨트롤러 모드에 대응할 수 있는 범용성을 가지고 있습니다.
+
+## 특징
+
+- **동적 버튼 렌더링**: `GaesupWorldContext`의 `control` 객체에 기반하여 버튼을 생성합니다.
+- **범용적 사용**: 조이스틱 및 GameBoy와 같은 다양한 컨트롤러 모드와 호환됩니다.
+- **커스텀 스타일링**: `gamePadStyle` 및 `gamePadButtonStyle` 속성을 통해 커스텀 스타일링 가능.
+
+## 속성 (Props)
+
+- `gamePadStyle`: 게임패드 컨테이너의 스타일 (`React.CSSProperties` 객체).
+- `gamePadButtonStyle`: 개별 버튼의 스타일 (`React.CSSProperties` 객체).
+- `label`: 버튼에 대한 커스텀 라벨.
+
+## 사용 방법
+
+1. `GamePad` 컴포넌트를 컴포넌트 트리에 배치합니다.
+2. `gamePadStyle` 및 `gamePadButtonStyle`을 사용하여 외관을 커스터마이즈합니다.
+3. 컴포넌트는 컨트롤러 모드에 맞춰 적절한 버튼을 렌더링합니다.
+
+## 예제 코드
+
+```jsx
+import { GamePad } from "./GamePad";
+import { GaesupWorldContext } from "../../world/context";
+
+const MyComponent = () => {
+  const gamePadStyle = {
+    /* 여기에 커스텀 스타일을 정의하세요 */
+  };
+  const gamePadButtonStyle = {
+    /* 여기에 버튼의 커스텀 스타일을 정의하세요 */
+  };
+
+  return (
+    <GamePad
+      gamePadStyle={gamePadStyle}
+      gamePadButtonStyle={gamePadButtonStyle}
+    />
+  );
+};
+```
+
+## ZoomButton
+
+## 개요
+
+- 특정 위치로 카메라를 이동시키기 위한 버튼이고 카메라의 zoom 컨트롤을 주로 수행합니다. target에 특정 물체를 넣을 수도 있습니다.
+
+## 속성 (Props)
+
+- `position`: 카메라가 이동할 대상 위치 (`THREE.Vector3` 객체).
+- `children`: (선택사항) 버튼 내에 렌더링될 React 노드.
+- `target`: (선택사항) 카메라가 바라볼 대상 위치 (`THREE.Vector3` 객체).
+- `keepBlocking`: (선택사항) 카메라 이동 중 블로킹 상태를 유지할지 여부.
+- `zoomButtonStyle`: (선택사항) 버튼의 스타일 (`React.CSSProperties` 객체).
+
+## 사용 방법
+
+1. `ZoomButton` 컴포넌트를 원하는 위치에 배치합니다.
+2. `position` prop을 통해 카메라가 이동할 위치를 지정합니다.
+3. 버튼을 클릭하면 지정된 위치로 카메라가 이동합니다.
+
+## 예제 코드
+
+```jsx
+import { ZoomButton } from "./ZoomButton";
+import * as THREE from "three";
+
+const App = () => {
+  return (
+    <ZoomButton position={new THREE.Vector3(0, 0, 5)}>
+      Zoom to Position
+    </ZoomButton>
+  );
+};
+```

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

@@ -1,9 +1,11 @@
 import { V3 } from "../../utils/vector";
 export default function normal(prop) {
-    var state = prop.state, perspectiveCamera = prop.controllerContext.perspectiveCamera, activeState = prop.worldContext.activeState;
+    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, perspectiveCamera.YDistance, perspectiveCamera.XZDistance));
+        .add(V3(0, cameraOption.YDistance, cameraOption.XZDistance));
     state.camera.position.lerp(cameraPosition, 0.9);
     state.camera.lookAt(activeState.position.clone());
 }

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

@@ -1,2 +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 default function orbit(prop: cameraPropType): void;

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

@@ -1,18 +1,21 @@
 import { quat } from "@react-three/rapier";
 import { V3 } from "../../utils/vector";
-export default function orbit(prop) {
-    var state = prop.state, perspectiveCamera = prop.controllerContext.perspectiveCamera, activeState = prop.worldContext.activeState;
-    var cameraPosition = activeState.position.clone().add(V3(Math.sin(activeState.euler.y), 0, Math.cos(activeState.euler.y))
+export var makeCameraPosition = 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()
         .clone()
-        .multiplyScalar(perspectiveCamera.XZDistance)
-        .multiplyScalar(perspectiveCamera.isFront ? -1 : 1)
-        .add(V3(0, perspectiveCamera.YDistance, 0)));
-    state.camera.position.lerp(cameraPosition, 0.9);
+        .multiply(V3(-XDistance, YDistance, -ZDistance)));
+    return cameraPosition;
+};
+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);
+    state.camera.position.lerp(cameraPosition, 1);
     state.camera.quaternion.copy(activeState.quat
         .clone()
-        .multiply(perspectiveCamera.isFront
-        ? quat().setFromAxisAngle(V3(0, 1, 0), Math.PI)
-        : quat()));
+        .multiply(quat().setFromAxisAngle(V3(0, 1, 0), Math.PI)));
     state.camera.lookAt(activeState.position.clone());
 }

package/dist/gaesup/camera/index.js

@@ -9,24 +9,62 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { MapControls, OrbitControls, OrthographicCamera, PerspectiveCamera, } from "@react-three/drei";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CameraControls } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useContext, useEffect, useMemo } from "react";
+import { vec3 } from "@react-three/rapier";
+import { useContext, useEffect, useMemo, useRef } from "react";
 import * as THREE from "three";
 import { GaesupControllerContext } from "../controller/context";
 import { GaesupWorldContext } from "../world/context";
-import mapControl from "./control/map";
 import normal from "./control/normal";
 import orbit from "./control/orbit";
+import detector from "./detector";
 export default function Camera(_a) {
+    var _this = this;
     var refs = _a.refs, prop = _a.prop, control = _a.control;
     var worldContext = useContext(GaesupWorldContext);
     var controllerContext = useContext(GaesupControllerContext);
-    var cameraMode = controllerContext.cameraMode, perspectiveCamera = controllerContext.perspectiveCamera, orthographicCamera = controllerContext.orthographicCamera;
+    var mode = worldContext.mode, cameraOption = worldContext.cameraOption;
     var rigidBodyRef = refs.rigidBodyRef, outerGroupRef = refs.outerGroupRef;
-    var scene = useThree().scene;
-    var activeState = worldContext.activeState;
+    var _b = useThree(), scene = _b.scene, camera = _b.camera;
+    var cameraRef = useRef();
     var intersectObjectMap = useMemo(function () { return ({}); }, []);
     var cameraProp = __assign(__assign({}, prop), { control: control, controllerContext: controllerContext, worldContext: worldContext, intersectObjectMap: intersectObjectMap });
     var getMeshs = function (object) {
@@ -43,29 +81,46 @@ export default function Camera(_a) {
     useEffect(function () {
         scene.children.forEach(function (child) { return getMeshs(child); });
     }, []);
+    var position = useMemo(function () { return camera.position; }, []);
+    var dir = useMemo(function () { return vec3(); }, []);
+    cameraProp.cameraRay.rayCast = new THREE.Raycaster(cameraProp.cameraRay.origin, cameraProp.cameraRay.dir, 0, -cameraOption.maxDistance);
+    useEffect(function () {
+        cameraProp.cameraRay.origin.copy(position);
+        cameraProp.cameraRay.dir.copy(camera.getWorldDirection(dir));
+    }, [cameraProp]);
     useFrame(function (state, delta) {
         if (!rigidBodyRef ||
             !rigidBodyRef.current ||
             !outerGroupRef ||
             !outerGroupRef.current)
-            return null;
-        cameraProp.state = state;
+            return;
         cameraProp.delta = delta;
-        if (cameraMode.cameraType === "perspective") {
-            if (cameraMode.controlType === "orbit") {
+        cameraProp.state = state;
+        if (!worldContext.cameraBlock) {
+            if (mode.control === "orbit") {
                 orbit(cameraProp);
             }
-            else if (cameraMode.controlType === "normal") {
+            else if (mode.control === "normal") {
                 normal(cameraProp);
             }
+            detector(cameraProp);
         }
-        else if (cameraMode.cameraType === "orthographic") {
-            mapControl(cameraProp);
-        }
-        // const distV3 = camera.position.clone().sub(activeState.position);
-        // cameraRay.origin.copy(camera.position);
-        // cameraRay.dir.copy(distV3.negate().normalize());
-        // detector(cameraProp);
     });
-    return (_jsxs(_Fragment, { children: [cameraMode.cameraType === "perspective" && (_jsxs(_Fragment, { children: [_jsx(OrbitControls, { target: activeState.position }), _jsx(PerspectiveCamera, __assign({ makeDefault: true }, perspectiveCamera))] })), cameraMode.cameraType === "orthographic" && (_jsxs(_Fragment, { children: [_jsx(MapControls, { target: activeState.position }), _jsx(OrthographicCamera, __assign({ makeDefault: true }, orthographicCamera))] }))] }));
+    // moveTo 함수 정의
+    worldContext.moveTo = function (position, target) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    camera.position.copy(position);
+                    return [4 /*yield*/, Promise.all([
+                            cameraRef.current.setPosition(position.x, position.y, position.z, true),
+                            cameraRef.current.setLookAt(position.x, position.y, position.z, target.x, target.y, target.z, true),
+                        ])];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return _jsx(CameraControls, { ref: cameraRef });
 }

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

@@ -12,5 +12,5 @@ export function CharacterRef(_a) {
     var ref = playCharacterActions({
         groundRay: props.groundRay,
     }).ref;
-    return (_jsx(WrapperRef, { props: props, refs: refs, gltf: characterGltf, animationRef: ref, children: _jsx(CharacterCapsuleCollider, { props: props, ref: refs.capsuleColliderRef }) }));
+    return (_jsx(WrapperRef, { props: props, refs: refs, gltf: characterGltf, animationRef: ref, name: "character", children: _jsx(CharacterCapsuleCollider, { props: props, ref: refs.capsuleColliderRef }) }));
 }

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

@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 import { controllerInnerType } from "../../../controller/type";
 export declare const RigidBodyRef: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
+    name?: string;
 } & import("react").RefAttributes<RapierRigidBody>>;
 export declare const PassiveRigidBodyRef: import("react").ForwardRefExoticComponent<{
     props: controllerInnerType;

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

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { RigidBody } from "@react-three/rapier";
 import { forwardRef } from "react";
 export var RigidBodyRef = forwardRef(function (_a, ref) {
-    var children = _a.children;
-    return (_jsx(RigidBody, { colliders: false, ref: ref, children: children }));
+    var children = _a.children, name = _a.name;
+    return (_jsx(RigidBody, { colliders: false, ref: ref, name: name, children: children }));
 });
 export var PassiveRigidBodyRef = forwardRef(function (_a, ref) {
     var props = _a.props, children = _a.children;

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

@@ -2,11 +2,12 @@ import { ReactNode, Ref } from "react";
 import * as THREE from "three";
 import { controllerInnerType, refsType } from "../../../controller/type";
 import { GLTFResult } from "../../type";
-export declare function WrapperRef({ children, outerChildren, props, refs, gltf, animationRef, }: {
+export declare function WrapperRef({ children, outerChildren, props, refs, gltf, animationRef, name, }: {
     children: ReactNode;
     outerChildren?: ReactNode;
     props: controllerInnerType;
     refs: refsType;
     gltf: GLTFResult;
     animationRef?: Ref<THREE.Object3D<THREE.Object3DEventMap>>;
+    name?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,6 @@ import { OuterGroupRef } from "../common/OuterGroupRef";
 import { SlopeRayRef } from "../common/slopeRayRef";
 import { RigidBodyRef } from "./RigidbodyRef";
 export function WrapperRef(_a) {
-    var children = _a.children, outerChildren = _a.outerChildren, props = _a.props, refs = _a.refs, gltf = _a.gltf, animationRef = _a.animationRef;
-    return (_jsxs(OuterGroupRef, { ref: refs.outerGroupRef, props: props, children: [_jsxs(RigidBodyRef, { ref: refs.rigidBodyRef, children: [_jsx(SlopeRayRef, { slopeRay: props.slopeRay, groundRay: props.groundRay, ref: refs.slopeRayOriginRef }), children, props.children, _jsx(InnerGroupRef, { props: props, gltf: gltf, ref: refs.innerGroupRef, animationRef: animationRef })] }), outerChildren] }));
+    var children = _a.children, outerChildren = _a.outerChildren, props = _a.props, refs = _a.refs, gltf = _a.gltf, animationRef = _a.animationRef, name = _a.name;
+    return (_jsxs(OuterGroupRef, { ref: refs.outerGroupRef, props: props, children: [_jsxs(RigidBodyRef, { ref: refs.rigidBodyRef, name: name, children: [_jsx(SlopeRayRef, { slopeRay: props.slopeRay, groundRay: props.groundRay, ref: refs.slopeRayOriginRef }), children, props.children, _jsx(InnerGroupRef, { props: props, gltf: gltf, ref: refs.innerGroupRef, animationRef: animationRef })] }), outerChildren] }));
 }

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

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { CuboidCollider } from "@react-three/rapier";
 import { forwardRef, useContext } from "react";
 import { GaesupWorldContext } from "../../../world/context";
 export var VehicleCollider = forwardRef(function (_, ref) {
     var _a = useContext(GaesupWorldContext), collider = _a.vehicleCollider, url = _a.url;
     var vehicleSizeX = collider.vehicleSizeX, vehicleSizeY = collider.vehicleSizeY, vehicleSizeZ = collider.vehicleSizeZ;
-    return (_jsx(CuboidCollider, { ref: ref, args: [vehicleSizeX / 2, vehicleSizeY / 2, vehicleSizeZ / 2], position: [0, vehicleSizeY + url.wheelUrl ? collider.wheelSizeY : 0, 0] }));
+    return (_jsx(_Fragment, { children: url.wheelUrl ? (_jsx(CuboidCollider, { ref: ref, args: [vehicleSizeX / 2, vehicleSizeY / 2, vehicleSizeZ / 2], position: [0, vehicleSizeY + collider.wheelSizeY / 2, 0] })) : (_jsx(CuboidCollider, { ref: ref, args: [vehicleSizeX / 2, vehicleSizeY / 2, vehicleSizeZ / 2], position: [0, vehicleSizeY, 0] })) }));
 });

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

@@ -4,7 +4,7 @@ import { CylinderCollider, RigidBody, useRevoluteJoint, } from "@react-three/rap
 import { forwardRef, useContext, useRef } from "react";
 import { GaesupWorldContext } from "../../../world/context";
 export var WheelRegidBodyRef = forwardRef(function (_a, ref) {
-    var index = _a.index, wheelPosition = _a.wheelPosition, bodyRef = _a.bodyRef, wheel = _a.wheel, bodyAnchor = _a.bodyAnchor, wheelAnchor = _a.wheelAnchor, rotationAxis = _a.rotationAxis;
+    var bodyRef = _a.bodyRef, wheel = _a.wheel, bodyAnchor = _a.bodyAnchor, wheelAnchor = _a.wheelAnchor, rotationAxis = _a.rotationAxis;
     var _b = useContext(GaesupWorldContext), collider = _b.vehicleCollider, url = _b.url;
     var wheelSizeX = collider.wheelSizeX, wheelSizeY = collider.wheelSizeY;
     useRevoluteJoint(bodyRef, wheel, [bodyAnchor, wheelAnchor, rotationAxis]);

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 mode = useContext(GaesupWorldContext).mode;
+    var _b = useContext(GaesupWorldContext), mode = _b.mode, activeState = _b.activeState;
     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

@@ -27,9 +27,11 @@ export function PassiveAirplane(props) {
     }, [props]), position = _a.position, euler = _a.euler, currentAnimation = _a.currentAnimation, airplaneUrl = _a.airplaneUrl;
     useFrame(function () {
         if (innerGroupRef && innerGroupRef.current) {
+            var _euler = euler.clone();
+            _euler.y = 0;
             innerGroupRef.current.setRotationFromQuaternion(quat()
                 .setFromEuler(innerGroupRef.current.rotation.clone())
-                .slerp(quat().setFromEuler(euler), 0.1));
+                .slerp(quat().setFromEuler(_euler), 0.2));
         }
         if (rigidBodyRef && rigidBodyRef.current) {
             rigidBodyRef.current.setGravityScale(props.gravity, false);

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

@@ -3,5 +3,8 @@ 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;
-    return (_jsx(RigidBody, { colliders: false, ref: ref, position: position, rotation: rotation, userData: { intangible: true }, children: children }));
+    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 }));
 });

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

@@ -1,28 +1,7 @@
 /// <reference types="react" />
 import { dispatchType } from "../../utils/type";
-import { gaesupControllerType, orthographicCameraType, perspectiveCameraType } from "./type";
+import { gaesupControllerType } from "./type";
 export declare const gaesupControllerDefault: {
-    cameraMode: perspectiveCameraType | orthographicCameraType;
-    cameraOption: {
-        offset: import("three").Vector3;
-        initDistance: number;
-        maxDistance: number;
-        minDistance: number;
-        initDir: number;
-        collisionOff: number;
-        distance: number;
-        camFollow: number;
-    };
-    perspectiveCamera: {
-        isFront: boolean;
-        XZDistance: number;
-        YDistance: number;
-    };
-    orthographicCamera: {
-        zoom: number;
-        near: number;
-        far: number;
-    };
     airplane: {
         angleDelta: import("three").Vector3;
         maxAngle: import("three").Vector3;