gaesup-world 0.7.2 → 0.7.4

package/README.md

@@ -1,11 +1,11 @@
 # Gaesup World
 
-[![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)
+[![Version](https://img.shields.io/npm/v/../../../src?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/../../../src)
+[![Downloads](https://img.shields.io/npm/dt/../../../src.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/../../../src)
 
 ### Web 3D Character Controller and World Platform Library
 
-### ![ezgif-7-177168be04](https://github.com/jigglypop/gaesup-world/assets/52653682/3ac16291-c851-4b0c-9c19-7026a18a00bb)
+### ![ezgif-7-177168be04](https://github.com/jigglypop/../../../src/assets/52653682/3ac16291-c851-4b0c-9c19-7026a18a00bb)
 
 ## introduction
 
@@ -50,13 +50,13 @@ export default function App() {
 ## Installation
 
 ```bash
-npm install @react-three/fiber @react-three/drei three @types/three @react-three/rapier gaesup-world
+npm install @react-three/fiber @react-three/drei three @types/three @react-three/rapier ../../../src
 ```
 
 Or
 
 ```bash
-yarn add @react-three/fiber @react-three/drei three @types/three @react-three/rapier gaesup-world
+yarn add @react-three/fiber @react-three/drei three @types/three @react-three/rapier ../../../src
 ```
 
 ## 4) How to Contribute

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

@@ -13,5 +13,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CharacterInnerRef } from "../../inner/character";
 export function CharacterRef(_a) {
     var props = _a.props, refs = _a.refs, urls = _a.urls;
-    return (_jsx(CharacterInnerRef, __assign({ url: urls.characterUrl, isActive: true, componentType: "character", rigidbodyType: "dynamic", controllerOptions: props.controllerOptions }, refs, { children: props.children })));
+    return (_jsx(CharacterInnerRef, __assign({ url: urls.characterUrl, isActive: true, componentType: "character", rigidbodyType: "dynamic", controllerOptions: props.controllerOptions, groundRay: props.groundRay, onAnimate: props.onAnimate, onFrame: props.onFrame, onReady: props.onReady, onDestory: props.onDestory }, refs, { children: props.children })));
 }

package/dist/gaesup/component/index.js

@@ -20,9 +20,9 @@ export function GaesupComponent(_a) {
     var props = _a.props, refs = _a.refs, urls = _a.urls;
     var _b = useContext(GaesupWorldContext), mode = _b.mode, states = _b.states, rideable = _b.rideable;
     var enableRiding = states.enableRiding, isRiderOn = states.isRiderOn, rideableId = states.rideableId;
-    return (_jsxs(_Fragment, { children: [mode.type === "character" && (_jsx(CharacterRef, { props: props, refs: refs, urls: urls })), mode.type === "vehicle" && (_jsx(VehicleRef, __assign({ controllerOptions: props.controllerOptions, url: urls.vehicleUrl, wheelUrl: urls.wheelUrl, ridingUrl: urls.ridingUrl, enableRiding: enableRiding, isRiderOn: isRiderOn, offset: rideableId && rideable[rideableId]
+    return (_jsxs(_Fragment, { children: [mode.type === "character" && (_jsx(CharacterRef, { props: props, refs: refs, urls: urls })), mode.type === "vehicle" && (_jsx(VehicleRef, __assign({ controllerOptions: props.controllerOptions, url: urls.vehicleUrl, wheelUrl: urls.wheelUrl, ridingUrl: urls.ridingUrl, enableRiding: enableRiding, isRiderOn: isRiderOn, groundRay: props.groundRay, offset: rideableId && rideable[rideableId]
                     ? rideable[rideableId].offset
-                    : vec3() }, refs, { children: props.children }))), mode.type === "airplane" && (_jsx(AirplaneRef, __assign({ controllerOptions: props.controllerOptions, url: urls.airplaneUrl, ridingUrl: urls.ridingUrl, enableRiding: enableRiding, isRiderOn: isRiderOn, offset: rideableId && rideable[rideableId]
+                    : vec3() }, refs, { children: props.children }))), mode.type === "airplane" && (_jsx(AirplaneRef, __assign({ controllerOptions: props.controllerOptions, url: urls.airplaneUrl, ridingUrl: urls.ridingUrl, enableRiding: enableRiding, isRiderOn: isRiderOn, groundRay: props.groundRay, offset: rideableId && rideable[rideableId]
                     ? rideable[rideableId].offset
                     : vec3() }, refs, { children: props.children })))] }));
 }

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

@@ -14,5 +14,5 @@ import { OuterGroupRef } from "../common/OuterGroupRef";
 import { RigidBodyRef } from "../common/RigidbodyRef";
 export function CharacterInnerRef(props) {
     var outerGroupRef = props.outerGroupRef;
-    return (_jsx(OuterGroupRef, { ref: outerGroupRef, children: _jsx(RigidBodyRef, __assign({ name: "character", url: props.url, controllerOptions: props.controllerOptions, ref: props.rigidBodyRef }, props, { children: props.children })) }));
+    return (_jsx(OuterGroupRef, { ref: outerGroupRef, children: _jsx(RigidBodyRef, __assign({ name: "character", url: props.url, controllerOptions: props.controllerOptions, ref: props.rigidBodyRef, groundRay: props.groundRay }, props, { children: props.children })) }));
 }

package/dist/gaesup/component/inner/character/type.d.ts

@@ -1,6 +1,9 @@
+import { callbackType } from "../../../controller/initialize/callback/type";
+import { groundRayType } from "../../../controller/type";
 import { passiveCharacterPropsType } from "../../passive/character/type";
 import { componentTypeString, innerRefType } from "../../passive/type";
 export type characterInnerType = {
     componentType: componentTypeString;
     isActive?: boolean;
-} & passiveCharacterPropsType & innerRefType;
+    groundRay: groundRayType;
+} & passiveCharacterPropsType & innerRefType & callbackType;

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

@@ -9,8 +9,10 @@ export declare const RigidBodyRef: import("react").ForwardRefExoticComponent<{
     onCollisionEnter?: (e: import("@react-three/rapier").CollisionEnterPayload) => Promise<void>;
     isActive?: boolean;
     ridingUrl?: string;
+    groundRay?: import("../../../controller/type").groundRayType;
 } & {
     children?: import("react").ReactNode;
+    groundRay?: import("../../../controller/type").groundRayType;
     url: string;
     ridingUrl?: string;
     wheelUrl?: string;
@@ -25,4 +27,4 @@ export declare const RigidBodyRef: import("react").ForwardRefExoticComponent<{
     userData?: {
         intangible: boolean;
     };
-} & import("./type").ridingType & import("../../passive/type").innerRefType & import("react").RefAttributes<RapierRigidBody>>;
+} & import("./type").ridingType & import("../../passive/type").innerRefType & import("../../../controller/initialize/callback/type").callbackType & import("react").RefAttributes<RapierRigidBody>>;

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

@@ -1,55 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAnimations, useGLTF } from "@react-three/drei";
 import { useFrame, useGraph } from "@react-three/fiber";
-import { CapsuleCollider, RigidBody, euler, useRapier, vec3, } from "@react-three/rapier";
+import { CapsuleCollider, RigidBody, euler, } from "@react-three/rapier";
 import { forwardRef, useContext, useMemo } from "react";
 import * as THREE from "three";
 import { SkeletonUtils } from "three-stdlib";
 import playActions, { subscribeActions } from "../../../animation/actions";
 import Camera from "../../../camera";
 import { GaesupControllerContext } from "../../../controller/context";
+import initCallback from "../../../controller/initialize/callback";
 import { useGltfAndSize } from "../../../hooks/useGaesupGltf";
 import calculation from "../../../physics";
 import { V3 } from "../../../utils";
 import { GaesupWorldContext } from "../../../world/context";
-import { calcCharacterColliderProps } from "../../inner/common/calc";
 import { InnerGroupRef } from "./InnerGroupRef";
+import { setGroundRay } from "./setGroundRay";
 export var RigidBodyRef = forwardRef(function (props, ref) {
     var _a;
     var size = useGltfAndSize({ url: props.url }).size;
-    var collider = calcCharacterColliderProps(size);
-    var groundRay = useMemo(function () {
-        return {
-            origin: vec3(),
-            dir: vec3({ x: 0, y: -1, z: 0 }),
-            offset: vec3({ x: 0, y: -1, z: 0 }),
-            hit: null,
-            parent: null,
-            rayCast: null,
+    props.groundRay &&
+        setGroundRay({
+            groundRay: props.groundRay,
             length: 0.5,
-        };
-    }, []);
-    var _b = useRapier(), rapier = _b.rapier, world = _b.world;
-    useFrame(function () {
-        var _a;
-        groundRay.offset = vec3({
-            x: 0,
-            y: (collider === null || collider === void 0 ? void 0 : collider.halfHeight) ? -collider.halfHeight : -1,
-            z: 0,
+            colliderRef: props.colliderRef,
         });
-        groundRay.length = 5;
-        groundRay.rayCast = new rapier.Ray(groundRay.origin, groundRay.dir);
-        groundRay.hit = world.castRay(groundRay.rayCast, groundRay.length, true, undefined, undefined);
-        groundRay.parent = (_a = groundRay.hit) === null || _a === void 0 ? void 0 : _a.collider.parent();
-    });
-    var _c = useGLTF(props.url), scene = _c.scene, animations = _c.animations;
-    var _d = useAnimations(animations), actions = _d.actions, animationRef = _d.ref;
+    var _b = useGLTF(props.url), scene = _b.scene, animations = _b.animations;
+    var _c = useAnimations(animations), actions = _c.actions, animationRef = _c.ref;
     var worldContext = useContext(GaesupWorldContext);
     var controllerContext = useContext(GaesupControllerContext);
     if (props.isActive) {
         subscribeActions({
             type: props.componentType,
-            groundRay: groundRay,
+            groundRay: props.groundRay,
             animations: animations,
         });
         var cameraProps_1 = {
@@ -67,7 +49,7 @@ export var RigidBodyRef = forwardRef(function (props, ref) {
             innerGroupRef: props.innerGroupRef,
             rigidBodyRef: ref,
             colliderRef: props.colliderRef,
-            groundRay: groundRay,
+            groundRay: props.groundRay,
         });
     }
     playActions({
@@ -77,6 +59,11 @@ export var RigidBodyRef = forwardRef(function (props, ref) {
         currentAnimation: props.isActive ? undefined : props.currentAnimation,
         isActive: props.isActive,
     });
+    initCallback({
+        props: props,
+        actions: actions,
+        componentType: props.componentType,
+    });
     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"; });

package/dist/gaesup/component/inner/common/type.d.ts

@@ -2,6 +2,7 @@ import { Collider } from "@dimforge/rapier3d-compat";
 import { CollisionEnterPayload, RigidBodyTypeString } from "@react-three/rapier";
 import { MutableRefObject, RefObject } from "react";
 import * as THREE from "three";
+import { callbackType } from "../../../controller/initialize/callback/type";
 import { groundRayType } from "../../../controller/type";
 import { urlsType } from "../../../world/context/type";
 import { innerRefType, passivePropsType } from "../../passive/type";
@@ -55,4 +56,5 @@ export type rigidBodyRefType = {
     onCollisionEnter?: (e: CollisionEnterPayload) => Promise<void>;
     isActive?: boolean;
     ridingUrl?: string;
-} & passivePropsType & innerRefType;
+    groundRay?: groundRayType;
+} & passivePropsType & innerRefType & callbackType;

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

@@ -33,5 +33,5 @@ export function PassiveCharacter(props) {
                 cameraTurn: 1,
                 cameraPosition: 1,
             },
-        }, position: props.position, rotation: props.rotation, currentAnimation: props.currentAnimation }, refs, props, { children: props.children })));
+        }, position: props.position, rotation: props.rotation, groundRay: props.groundRay, currentAnimation: props.currentAnimation }, refs, props, { children: props.children })));
 }

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

@@ -2,7 +2,7 @@ import { Collider } from "@dimforge/rapier3d-compat";
 import { CollisionEnterPayload, RapierRigidBody, RigidBodyTypeString } from "@react-three/rapier";
 import { MutableRefObject } from "react";
 import * as THREE from "three";
-import { controllerOptionsType } from "../../controller/type";
+import { controllerOptionsType, groundRayType } from "../../controller/type";
 import { ridingType } from "../inner/common/type";
 export type componentTypeString = "character" | "vehicle" | "airplane";
 export type innerRefType = {
@@ -13,6 +13,7 @@ export type innerRefType = {
 };
 export type passivePropsType = {
     children?: React.ReactNode;
+    groundRay?: groundRayType;
     url: string;
     ridingUrl?: string;
     wheelUrl?: string;

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

@@ -1,9 +1,13 @@
-import * as THREE from "three";
-import { Api } from "../../../animation/actions";
+import { AnimationAction } from "three";
+import { rigidBodyRefType } from "../../../component/inner/common/type";
+import { componentTypeString } from "../../../component/passive/type";
 import { animationTagType } from "../../type";
-export default function initCallback({ animationResult, type, }: {
-    animationResult: Api<THREE.AnimationClip>;
-    type: "character" | "vehicle" | "airplane";
+export default function initCallback({ props, actions, componentType, }: {
+    props: rigidBodyRefType;
+    actions: {
+        [x: string]: AnimationAction;
+    };
+    componentType: componentTypeString;
 }): {
     subscribe: ({ tag, condition, action, animationName, key, }: import("../../../world/context/type").animationAtomType) => void;
     playAnimation: (tag: keyof animationTagType, key: string) => void;

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

@@ -9,24 +9,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { useContext } from "react";
+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(_a) {
-    var 
-    // props,
-    animationResult = _a.animationResult, type = _a.type;
-    var actions = animationResult.actions;
+    var props = _a.props, actions = _a.actions, componentType = _a.componentType;
     var animationState = useContext(GaesupWorldContext).animationState;
     var dispatch = useContext(GaesupWorldDispatchContext);
-    var store = useGaesupAnimation({ type: type }).store;
+    var store = useGaesupAnimation({ type: componentType }).store;
     var _b = useContext(GaesupWorldContext), activeState = _b.activeState, states = _b.states, control = _b.control;
-    var subscribe = useGaesupAnimation({ type: type }).subscribe;
+    var subscribe = useGaesupAnimation({ type: componentType }).subscribe;
     var playAnimation = function (tag, key) {
         if (!(key in control))
             return;
-        if (control[key]) {
-            animationState[type].current = tag;
+        if (control[key] && animationState[componentType]) {
+            animationState[componentType].current = tag;
             var currentAnimation = store[tag];
             if (currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.action) {
                 currentAnimation.action();
@@ -39,39 +37,30 @@ export default function initCallback(_a) {
             });
         }
     };
-    //   const controllerProp: callbackPropType = {
-    //     ...props,
-    //     activeState,
-    //     control,
-    //     states,
-    //     subscribe,
-    //   };
-    //
-    //   useEffect(() => {
-    //     if (props.onReady) {
-    //       props.onReady(controllerProp);
-    //     }
-    //     return () => {
-    //       if (props.onDestory) {
-    //         props.onDestory(controllerProp);
-    //       }
-    //     };
-    //   }, []);
-    //
-    //   useFrame((prop) => {
-    //     if (props.onFrame) {
-    //       props.onFrame({ ...controllerProp, ...prop });
-    //     }
-    //     if (props.onAnimate) {
-    //       props.onAnimate({
-    //         ...controllerProp,
-    //         ...prop,
-    //         actions,
-    //         animationState,
-    //         playAnimation,
-    //       });
-    //     }
-    //   });
+    var controllerProp = {
+        activeState: activeState,
+        control: control,
+        states: states,
+        subscribe: subscribe,
+    };
+    useEffect(function () {
+        if (props.onReady) {
+            props.onReady(controllerProp);
+        }
+        return function () {
+            if (props.onDestory) {
+                props.onDestory(controllerProp);
+            }
+        };
+    }, []);
+    useFrame(function (prop) {
+        if (props.onFrame) {
+            props.onFrame(__assign(__assign({}, controllerProp), prop));
+        }
+        if (props.onAnimate) {
+            props.onAnimate(__assign(__assign(__assign({}, controllerProp), prop), { actions: actions, animationState: animationState, playAnimation: playAnimation }));
+        }
+    });
     return {
         subscribe: subscribe,
         playAnimation: playAnimation,

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

@@ -1,13 +1,10 @@
 import { RootState } from "@react-three/fiber";
 import * as THREE from "three";
-import { cameraRayType } from "../../../camera/type";
 import { activeStateType, animationAtomType, animationStateType, keyControlType, statesType } from "../../../world/context/type";
-import { actionsType, groundRayType } from "../../type";
+import { actionsType } from "../../type";
 export type callbackPropType = {
     activeState: activeStateType;
     states: statesType;
-    groundRay: groundRayType;
-    cameraRay: cameraRayType;
     control: keyControlType;
     subscribe: (props: animationAtomType) => void;
 };

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

@@ -55,7 +55,7 @@ export default function initControllerProps(_a) {
             hit: null,
             parent: null,
             rayCast: null,
-            length: 0.5,
+            length: 10,
         };
     }, []);
     var cameraRay = useMemo(function () {

package/dist/gaesup/physics/check/ground.js

@@ -6,20 +6,17 @@ export default function checkOnTheGround(prop) {
         states.isOnTheGround = false;
     }
     if (groundRay.hit) {
-        if (groundRay.hit.toi >= groundRay.length * 0.8) {
+        var MAX = groundRay.length * 2;
+        var MIN = groundRay.length * 0.8;
+        if (groundRay.hit.toi >= MAX) {
             states.isFalling = true;
-            states.isLanding = false;
             states.isOnTheGround = false;
         }
-        else if (groundRay.length * 0.4 < groundRay.hit.toi &&
-            groundRay.hit.toi < groundRay.length * 0.8) {
-            states.isLanding = true;
-            states.isFalling = false;
-            states.isOnTheGround = false;
+        else if (MIN <= groundRay.hit.toi && groundRay.hit.toi < MAX) {
+            states.isFalling = true;
         }
-        else {
+        else if (groundRay.hit.toi < MIN) {
             states.isFalling = false;
-            states.isLanding = false;
             states.isOnTheGround = true;
         }
     }

package/dist/gaesup/physics/check/moving.js

@@ -5,16 +5,18 @@ export default function moving(prop) {
         states.isMoving = forward || backward || leftward || rightward;
         states.isNotMoving = !states.isMoving;
         states.isRunning = shift && states.isMoving;
+        states.isJumping = space;
     }
     else if (mode.controller === "joystick") {
         states.isMoving = joystick.joyStickOrigin.isOn;
         states.isNotMoving = !joystick.joyStickOrigin.isOn;
         states.isRunning = shift && states.isMoving;
+        states.isJumping = space;
     }
     else if (mode.controller === "clicker") {
         states.isMoving = clicker.isOn;
         states.isNotMoving = !clicker.isOn;
         states.isRunning = (shift || clicker.isRun) && states.isMoving;
+        states.isJumping = space;
     }
-    states.isJumping = space;
 }

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

@@ -45,15 +45,23 @@ export function MiniMap(props) {
                                 ? "translate(-50%, 50%) rotate(180deg) "
                                 : "translate(-50%, 50%) rotate(-".concat((activeState.euler.y * 180) / Math.PI + 180, "deg) ") }, directionStyle), children: "S" }), _jsx("div", { className: "north direction", style: __assign({ transform: props.blockRotate || mode.control === "normal"
                                 ? "translate(-50%, -50%) rotate(180deg) "
-                                : "translate(-50%, -50%) rotate(-".concat((activeState.euler.y * 180) / Math.PI + 180, "deg) ") }, directionStyle), children: "N" }), "\u00E7", Object.values(minimap.props).map(function (_a, key) {
+                                : "translate(-50%, -50%) rotate(-".concat((activeState.euler.y * 180) / Math.PI + 180, "deg) ") }, directionStyle), children: "N" }), Object.values(minimap.props).map(function (_a, key) {
                         var center = _a.center, size = _a.size, text = _a.text;
                         var X = (center.x - activeState.position.x) *
-                            (props.angle ? -Math.sin(props.angle) : 1) *
+                            (props.angle ? Math.sin(props.angle) : 1) *
                             scale;
                         var Z = (center.z - activeState.position.z) *
                             (props.angle ? -Math.cos(props.angle) : 1) *
                             scale;
-                        return (_jsxs("div", { children: [_jsx("div", { className: "minimapObject", style: __assign({ width: "".concat(size.x * scale, "rem"), height: "".concat(size.z * scale, "rem"), top: "50%", left: "50%", transform: "translate(-50.1%, -50.1%) translate(".concat(-X, "rem, ").concat(-Z, "rem)"), transformOrigin: "50% 50%", zIndex: 1 + key }, objectStyle) }, key), _jsx("div", { className: "imageObject", style: __assign({ width: "".concat(props.imageWidth * scale, "rem"), height: "".concat(props.imageHeight * scale, "rem"), top: "50%", left: "50%", transform: "translate(-50.1%, -50.1%) translate(".concat(-X, "rem, ").concat(-Z, "rem)"), transformOrigin: "50% 50%", zIndex: 1000 + key }, imageStyle) }, key + 10), _jsx("div", { className: "textObject", style: {
+                        return (_jsxs("div", { children: [_jsx("div", { className: "minimapObject", style: __assign({ width: "".concat(size.x * scale, "rem"), height: "".concat(size.z * scale, "rem"), top: "50%", left: "50%", transform: "translate(-50.1%, -50.1%) translate(".concat(-X, "rem, ").concat(-Z, "rem) rotate(").concat((Math.PI * 3) / 2 + props.angle || 0, "rad)"), transformOrigin: "50% 50%", zIndex: 1 + key }, objectStyle) }, key), _jsx("div", { className: "imageObject", style: {
+                                        width: "".concat(size.x * scale, "rem"),
+                                        height: "".concat(size.z * scale, "rem"),
+                                        top: "50%",
+                                        left: "50%",
+                                        transform: "translate(-50.1%, -50.1%) translate(".concat(-X, "rem, ").concat(-Z, "rem) rotate(").concat((Math.PI * 3) / 2 + props.angle || 0, "rad)"),
+                                        transformOrigin: "50% 50%",
+                                        zIndex: 1 + key,
+                                    } }, key), _jsx("div", { className: "textObject", style: {
                                         width: "".concat(size.x * scale, "rem"),
                                         height: "".concat(size.z * scale, "rem"),
                                         top: "50.1%",

package/dist/gaesup/tools/miniMap/style.css

@@ -188,6 +188,7 @@
   text-align: center;
   border-radius: 2px;
   background: rgba(0, 0, 0, 0.3);
+
   /* border: 2px solid rgba(88, 88, 88, 0.5); */
 }
 
@@ -198,9 +199,11 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  border-radius: 2px;
-  background: rgba(0, 0, 0, 0.3);
-  /* border: 2px solid rgba(88, 88, 88, 0.5); */
+  background:
+    linear-gradient(to bottom, transparent 95%, rgba(0, 0, 0, 0.2) 20%) 0 0 /
+      100% 40px repeat-y,
+    linear-gradient(to right, transparent 38px, rgba(0, 0, 0, 0.2) 38px) 0 0 /
+      40px 100% repeat-x transparent;
 }
 
 .textObject {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gaesup-world",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,9 +11,11 @@
     "@react-icons/all-files": "^4.1.0",
     "@react-three/drei": "9.105.4",
     "@react-three/fiber": "8.16.2",
+    "@react-three/postprocessing": "^2.16.2",
     "@react-three/rapier": "^1.3.1",
     "@types/three": "^0.163.0",
     "gh-pages": "^6.1.1",
+    "jotai": "^2.8.0",
     "leva": "0.9.35",
     "lodash": "^4.17.21",
     "node-fetch": "3.3.2",
@@ -47,7 +49,7 @@
   "description": "Web 3D Character Controller and World Platform Library",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jigglypop/gaesup-world.git"
+    "url": "git+https://github.com/jigglypop/../../../src.git"
   },
   "keywords": [
     "three.js",
@@ -60,7 +62,7 @@
   "author": "jigglypop",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/jigglypop/gaesup-world/issues"
+    "url": "https://github.com/jigglypop/../../../src/issues"
   },
   "scripts": {
     "dev": "vite",