gaesup-world 0.0.1 → 0.0.3

package/index.html

@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+
     <script type="module" src="/examples/select/main.tsx"></script>
   </body>
 </html>

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "gaesup-world",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "homepage": "https://jigglypop.github.io/gaesup-world/",
   "scripts": {
     "dev": "vite",
+    "build": "vite build",
     "prepare": "rm -rf dist && tsc",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
@@ -25,6 +26,7 @@
     "@types/three": "^0.158.1",
     "@types/uuid": "^9.0.6",
     "@uiw/react-md-editor": "3.25.2",
+    "@use-gesture/react": "^10.3.0",
     "@vanilla-extract/babel-plugin": "^1.2.0",
     "@vanilla-extract/css": "^1.13.0",
     "@vanilla-extract/css-utils": "^0.1.3",

package/src/gaesup/animation/actions.ts

@@ -5,7 +5,7 @@ import { animationTagType, groundRayType } from "../controller/type";
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
-} from "../stores/context/gaesupworld";
+} from "../world/context";
 
 export type playActionsType = {
   outerGroupRef: RefObject<THREE.Group>;

package/src/gaesup/camera/control/normal.ts

@@ -10,6 +10,7 @@ export default function normal(prop: cameraPropType) {
   const cameraPosition = activeState.position
     .clone()
     .add(V3(perspectiveCamera.XZDistance, perspectiveCamera.YDistance, 0));
+
   state.camera.position.lerp(cameraPosition, 1);
-  state.camera.lookAt(activeState.position);
+  state.camera.lookAt(activeState.position.clone());
 }

package/src/gaesup/camera/control/orbit.ts

@@ -17,7 +17,7 @@ export default function orbit(prop: cameraPropType) {
       .add(V3(0, perspectiveCamera.YDistance, 0))
   );
 
-  state.camera.position.lerp(cameraPosition, 0.2);
+  state.camera.position.lerp(cameraPosition, 0.5);
   state.camera.quaternion.copy(
     activeState.quat
       .clone()

package/src/gaesup/camera/index.tsx

@@ -7,13 +7,13 @@ import {
 import { useFrame, useThree } from "@react-three/fiber";
 import { useContext } from "react";
 import * as THREE from "three";
+import { GaesupControllerContext } from "../controller/context";
 import { propType, refsType } from "../controller/type";
 import { cameraPropType } from "../physics/type";
-import { GaesupControllerContext } from "../stores/context/controller";
-import { GaesupWorldContext } from "../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../world/context";
 import cameraCollisionDetector from "./cameraCollisionDetecter";
 import mapControl from "./control/map";
-import normal from "./control/normal copy";
+import normal from "./control/normal";
 import orbit from "./control/orbit";
 
 export default function Camera({
@@ -34,7 +34,7 @@ export default function Camera({
   const { rigidBodyRef, outerGroupRef } = refs;
   const { cameraRay } = prop;
   const { checkCollision } = cameraCollisionDetector(prop);
-  const { scene, camera } = useThree();
+  const { scene } = useThree();
   const { activeState } = worldContext;
 
   const intersectObjectMap: { [uuid: string]: THREE.Object3D } = {};

package/src/gaesup/component/Airplane.tsx

@@ -3,11 +3,13 @@
 import { propType, refsType } from "../controller/type";
 import calculation from "../physics";
 import { AirplaneInnerGroupRef } from "./gltf/AirplaneGltf";
+import { CharacterInnerGroupRef } from "./gltf/CharacterGltf";
 import {
   AirplaneCollider,
   AirplaneGroup,
   AirplaneRigidBody,
 } from "./ref/airplane";
+import setInit from "./setInit";
 
 export function Airplane({
   controllerProps,
@@ -16,28 +18,32 @@ export function Airplane({
   controllerProps: propType;
   refs: refsType;
 }) {
-  const { rigidBodyRef, outerGroupRef, capsuleColliderRef, innerGroupRef } =
-    refs;
+  const {
+    rigidBodyRef,
+    outerGroupRef,
+    capsuleColliderRef,
+    innerGroupRef,
+    characterInnerRef,
+  } = refs;
   calculation(controllerProps);
+  setInit(rigidBodyRef);
 
   return (
     <>
-      <AirplaneGroup ref={outerGroupRef}>
-        <AirplaneRigidBody
-          ref={rigidBodyRef}
-          groundRay={controllerProps.groundRay}
-        >
+      <AirplaneGroup ref={outerGroupRef} controllerProps={controllerProps}>
+        <AirplaneRigidBody ref={rigidBodyRef} controllerProps={controllerProps}>
           <AirplaneCollider prop={controllerProps} ref={capsuleColliderRef} />
-          {/* <CharacterGltf
-            gltf={characterGltf}
-            prop={prop}
-            url={props.url}
-            character={props.character}
-            groundRay={prop.groundRay}
-            refs={refs}
-            callbacks={callbacks}
-            isRider={true}
-          /> */}
+          {controllerProps.isRider && (
+            <CharacterInnerGroupRef
+              prop={controllerProps}
+              groupProps={controllerProps.groupProps}
+              groundRay={controllerProps.groundRay}
+              refs={refs}
+              callbacks={controllerProps.callbacks}
+              isRider={controllerProps.isRider}
+              ref={characterInnerRef}
+            />
+          )}
           <AirplaneInnerGroupRef ref={innerGroupRef} />
         </AirplaneRigidBody>
       </AirplaneGroup>

package/src/gaesup/component/Character.tsx

@@ -3,13 +3,14 @@
 import calculation from "../physics";
 
 import { propType, refsType } from "../controller/type";
-import CharacterGltf from "./gltf/CharacterGltf";
+import { CharacterInnerGroupRef, InnerGroupRef } from "./gltf/CharacterGltf";
 import {
   CharacterCapsuleCollider,
   CharacterGroup,
   CharacterRigidBody,
   CharacterSlopeRay,
 } from "./ref/character";
+import setInit from "./setInit";
 
 export function Character({
   controllerProps,
@@ -18,29 +19,38 @@ export function Character({
   controllerProps: propType;
   refs: refsType;
 }) {
-  const { capsuleColliderRef, rigidBodyRef, outerGroupRef, slopeRayOriginRef } =
-    refs;
+  const {
+    capsuleColliderRef,
+    rigidBodyRef,
+    outerGroupRef,
+    slopeRayOriginRef,
+    characterInnerRef,
+    innerGroupRef,
+  } = refs;
   calculation(controllerProps);
-
+  setInit(rigidBodyRef);
   return (
     <CharacterRigidBody ref={rigidBodyRef} controllerProps={controllerProps}>
       <CharacterCapsuleCollider
         prop={controllerProps}
         ref={capsuleColliderRef}
       />
-      <CharacterGroup ref={outerGroupRef}>
+      <CharacterGroup ref={outerGroupRef} controllerProps={controllerProps}>
         <CharacterSlopeRay
           slopeRay={controllerProps.slopeRay}
           groundRay={controllerProps.groundRay}
           ref={slopeRayOriginRef}
         />
         {controllerProps.children}
-        <CharacterGltf
+        <InnerGroupRef ref={innerGroupRef} />
+        <CharacterInnerGroupRef
           prop={controllerProps}
           groupProps={controllerProps.groupProps}
           groundRay={controllerProps.groundRay}
           refs={refs}
           callbacks={controllerProps.callbacks}
+          ref={characterInnerRef}
+          isRider={false}
         />
       </CharacterGroup>
     </CharacterRigidBody>

package/src/gaesup/component/Vehicle.tsx

@@ -2,10 +2,11 @@
 
 import { propType, refsType } from "../controller/type";
 import calculation from "../physics";
-import CharacterGltf from "./gltf/CharacterGltf";
-import VehicleGltf from "./gltf/VehicleGltf";
+import { CharacterInnerGroupRef } from "./gltf/CharacterGltf";
+import { VehicleInnerGroupRef } from "./gltf/VehicleGltf";
 import { Wheels } from "./gltf/WheelJoint";
 import { VehicleCollider, VehicleGroup, VehicleRigidBody } from "./ref/vehicle";
+import setInit from "./setInit";
 
 export function Vehicle({
   controllerProps,
@@ -14,25 +15,27 @@ export function Vehicle({
   controllerProps: propType;
   refs: refsType;
 }) {
-  const { rigidBodyRef, outerGroupRef } = refs;
+  const { rigidBodyRef, outerGroupRef, characterInnerRef, innerGroupRef } =
+    refs;
   calculation(controllerProps);
+  setInit(rigidBodyRef);
 
   return (
-    <VehicleGroup ref={outerGroupRef}>
-      <VehicleRigidBody
-        ref={rigidBodyRef}
-        groundRay={controllerProps.groundRay}
-      >
+    <VehicleGroup ref={outerGroupRef} controllerProps={controllerProps}>
+      <VehicleRigidBody ref={rigidBodyRef} controllerProps={controllerProps}>
         <VehicleCollider />
-        <CharacterGltf
-          prop={controllerProps}
-          groupProps={controllerProps.groupProps}
-          groundRay={controllerProps.groundRay}
-          refs={refs}
-          callbacks={controllerProps.callbacks}
-          isRider={true}
-        />
-        <VehicleGltf />
+        {controllerProps.isRider && (
+          <CharacterInnerGroupRef
+            prop={controllerProps}
+            groupProps={controllerProps.groupProps}
+            groundRay={controllerProps.groundRay}
+            refs={refs}
+            callbacks={controllerProps.callbacks}
+            ref={characterInnerRef}
+            isRider={true}
+          />
+        )}
+        <VehicleInnerGroupRef ref={innerGroupRef} />
       </VehicleRigidBody>
       <Wheels prop={controllerProps} />
     </VehicleGroup>

package/src/gaesup/component/gltf/AirplaneGltf.tsx

@@ -1,5 +1,5 @@
 import { Ref, forwardRef, useContext } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../../world/context";
 
 export const AirplaneInnerGroupRef = forwardRef((_, ref: Ref<THREE.Group>) => {
   const { airplaneGltf: gltf } = useContext(GaesupWorldContext);

package/src/gaesup/component/gltf/CharacterGltf.tsx

@@ -1,10 +1,10 @@
 import { GroupProps } from "@react-three/fiber";
-import { useContext } from "react";
+import { Ref, forwardRef, useContext } from "react";
 import playActions from "../../animation/actions";
 import { groundRayType, propType, refsType } from "../../controller/type";
 import initCallback from "../../initial/callback";
 import { callbackType } from "../../initial/callback/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../../world/context";
 
 export type characterGltfType = {
   prop: propType;
@@ -15,67 +15,82 @@ export type characterGltfType = {
   isRider?: boolean;
 };
 
-export default function CharacterGltf({
-  prop,
-  groupProps,
-  groundRay,
-  refs,
-  callbacks,
-  isRider,
-}: characterGltfType) {
-  const { characterGltf: gltf } = useContext(GaesupWorldContext);
-  const { materials, nodes } = gltf;
-  const { characterCollider, vehicleCollider } = useContext(GaesupWorldContext);
+export const InnerGroupRef = forwardRef((_, ref: Ref<THREE.Group>) => {
+  return <group ref={ref} visible={false} />;
+});
 
-  initCallback({
-    prop,
-    callbacks,
-    outerGroupRef: refs.outerGroupRef,
-  });
+export const CharacterInnerGroupRef = forwardRef(
+  (
+    {
+      prop,
+      groupProps,
+      groundRay,
+      refs,
+      callbacks,
+      isRider,
+    }: characterGltfType,
+    ref: Ref<THREE.Group>
+  ) => {
+    const { characterGltf: gltf } = useContext(GaesupWorldContext);
+    const { materials, nodes } = gltf;
+    const { characterCollider, vehicleCollider } =
+      useContext(GaesupWorldContext);
 
-  playActions({
-    outerGroupRef: refs.outerGroupRef,
-    groundRay: groundRay,
-    isRider,
-  });
+    initCallback({
+      prop,
+      callbacks,
+      outerGroupRef: refs.outerGroupRef,
+    });
 
-  return (
-    <group
-      receiveShadow
-      castShadow
-      {...groupProps}
-      position={[
-        0,
-        isRider ? vehicleCollider.vehicleSizeY / 2 : -characterCollider.height,
-        0,
-      ]}
-    >
-      {nodes &&
-        Object.values(nodes).find((node) => node.type === "Object3D") && (
-          <primitive
-            object={Object.values(nodes).find(
-              (node) => node.type === "Object3D"
-            )}
-            visible={false}
+    playActions({
+      outerGroupRef: refs.outerGroupRef,
+      groundRay: groundRay,
+      isRider,
+    });
+
+    return (
+      <>
+        {nodes && materials && (
+          <group
             receiveShadow
             castShadow
-          />
-        )}
-      {nodes &&
-        Object.keys(nodes).map((name: string, key: number) => {
-          if (nodes[name].type === "SkinnedMesh") {
-            return (
-              <skinnedMesh
-                castShadow
+            {...groupProps}
+            position={[
+              0,
+              isRider
+                ? vehicleCollider.vehicleSizeY / 2
+                : -characterCollider.height,
+              0,
+            ]}
+            ref={ref}
+          >
+            {Object.values(nodes).find((node) => node.type === "Object3D") && (
+              <primitive
+                object={Object.values(nodes).find(
+                  (node) => node.type === "Object3D"
+                )}
+                visible={false}
                 receiveShadow
-                material={materials[name]}
-                geometry={nodes[name].geometry}
-                skeleton={(nodes[name] as THREE.SkinnedMesh).skeleton}
-                key={key}
+                castShadow
               />
-            );
-          }
-        })}
-    </group>
-  );
-}
+            )}
+            {Object.keys(nodes).map((name: string, key: number) => {
+              if (nodes[name].type === "SkinnedMesh") {
+                return (
+                  <skinnedMesh
+                    castShadow
+                    receiveShadow
+                    material={materials[name]}
+                    geometry={nodes[name].geometry}
+                    skeleton={(nodes[name] as THREE.SkinnedMesh).skeleton}
+                    key={key}
+                  />
+                );
+              }
+            })}
+          </group>
+        )}
+      </>
+    );
+  }
+);

package/src/gaesup/component/gltf/VehicleGltf.tsx

@@ -1,13 +1,13 @@
-import { useContext } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { Ref, forwardRef, useContext } from "react";
+import { GaesupWorldContext } from "../../world/context";
 
-export default function VehicleGltf() {
+export const VehicleInnerGroupRef = forwardRef((_, ref: Ref<THREE.Group>) => {
   const { vehicleGltf: gltf } = useContext(GaesupWorldContext);
   const { materials, nodes } = gltf;
   return (
     <>
       {nodes && materials && (
-        <group receiveShadow castShadow rotation={[0, Math.PI, 0]}>
+        <group receiveShadow castShadow rotation={[0, Math.PI, 0]} ref={ref}>
           {Object.keys(nodes).map((name: string, key: number) => {
             if (
               nodes[name].type === "Mesh" ||
@@ -28,4 +28,4 @@ export default function VehicleGltf() {
       )}
     </>
   );
-}
+});

package/src/gaesup/component/gltf/WheelJoint.tsx

@@ -1,7 +1,7 @@
 import { RapierRigidBody } from "@react-three/rapier";
 import { createRef, useContext, useRef } from "react";
 import { propType } from "../../controller/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../../world/context";
 import { WheelRegidBodyRef } from "../ref/vehicle";
 
 export function Wheels({ prop }: { prop: propType }) {

package/src/gaesup/component/ref/airplane.tsx

@@ -8,31 +8,39 @@ import {
 } from "@react-three/rapier";
 import { ReactNode, Ref, forwardRef, useContext } from "react";
 import * as THREE from "three";
-import { groundRayType, propType } from "../../controller/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { controllerType, groundRayType, propType } from "../../controller/type";
 import { getRayHit } from "../../utils/ray";
 import { useForwardRef } from "../../utils/ref";
+import { GaesupWorldContext } from "../../world/context";
 
 export const AirplaneRigidBody = forwardRef(
   (
     {
-      groundRay,
+      controllerProps,
       children,
     }: {
-      groundRay: groundRayType;
+      controllerProps: propType;
       children: ReactNode;
     },
     ref: Ref<RapierRigidBody>
   ) => {
     return (
-      <RigidBody colliders={false} ref={ref}>
-        {/* {options.debug && (
-          <mesh visible={options.debug}>
+      <RigidBody
+        colliders={false}
+        ref={ref}
+        {...controllerProps.rigidBodyProps}
+      >
+        {controllerProps.debug && (
+          <mesh visible={controllerProps.debug}>
             <arrowHelper
-              args={[groundRay.dir, groundRay.origin, groundRay.length]}
+              args={[
+                controllerProps.groundRay.dir,
+                controllerProps.groundRay.origin,
+                controllerProps.groundRay.length,
+              ]}
             />
           </mesh>
-        )} */}
+        )}
         {children}
       </RigidBody>
     );
@@ -43,10 +51,10 @@ export const AirplaneCollider = forwardRef(
   ({ prop }: { prop: propType }, ref: Ref<Collider>) => {
     const { airplaneCollider: collider } = useContext(GaesupWorldContext);
     const { airplaneSizeX, airplaneSizeY, airplaneSizeZ } = collider;
-    console.log(airplaneSizeY);
+
     const colliderRef = useForwardRef<Collider>(ref);
     const { rapier } = useRapier();
-    const { groundRay, slopeRay } = prop;
+    const { groundRay } = prop;
     groundRay.length = airplaneSizeY * 5 + 2;
     groundRay.rayCast = new rapier.Ray(groundRay.origin, groundRay.dir);
     groundRay.hit = getRayHit<groundRayType>({
@@ -68,14 +76,20 @@ export const AirplaneCollider = forwardRef(
 export const AirplaneGroup = forwardRef(
   (
     {
+      controllerProps,
       children,
     }: {
+      controllerProps: controllerType;
       children: ReactNode;
     },
     ref: Ref<THREE.Group>
   ) => {
     return (
-      <group ref={ref} userData={{ intangible: true }}>
+      <group
+        ref={ref}
+        userData={{ intangible: true }}
+        {...controllerProps.airplane}
+      >
         {children}
       </group>
     );

package/src/gaesup/component/ref/character.tsx

@@ -15,9 +15,9 @@ import {
   propType,
   slopeRayType,
 } from "../../controller/type";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
 import { getRayHit } from "../../utils/ray";
 import { useForwardRef } from "../../utils/ref";
+import { GaesupWorldContext } from "../../world/context";
 
 export const CharacterRigidBody = forwardRef(
   (
@@ -25,7 +25,7 @@ export const CharacterRigidBody = forwardRef(
       controllerProps,
       children,
     }: {
-      controllerProps: controllerType;
+      controllerProps: propType;
       children: ReactNode;
     },
     ref: Ref<RapierRigidBody>
@@ -35,20 +35,19 @@ export const CharacterRigidBody = forwardRef(
         colliders={false}
         canSleep={false}
         ref={ref}
-        {...controllerProps}
+        {...controllerProps.rigidBodyProps}
       >
-        {/* {options.debug && (
-          <mesh
-            visible={options.debug}
-            userData={{
-              intangible: true,
-            }}
-          >
+        {controllerProps.debug && (
+          <mesh visible={controllerProps.debug}>
             <arrowHelper
-              args={[groundRay.dir, groundRay.origin, groundRay.length]}
+              args={[
+                controllerProps.groundRay.dir,
+                controllerProps.groundRay.origin,
+                controllerProps.groundRay.length,
+              ]}
             />
           </mesh>
-        )} */}
+        )}
         {children}
       </RigidBody>
     );
@@ -82,14 +81,20 @@ export const CharacterCapsuleCollider = forwardRef(
 export const CharacterGroup = forwardRef(
   (
     {
+      controllerProps,
       children,
     }: {
+      controllerProps: controllerType;
       children: ReactNode;
     },
     ref: Ref<THREE.Group>
   ) => {
     return (
-      <group ref={ref} userData={{ intangible: true }}>
+      <group
+        ref={ref}
+        userData={{ intangible: true }}
+        {...controllerProps.character}
+      >
         {children}
       </group>
     );