gaesup-world 0.0.1

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

@@ -0,0 +1,31 @@
+import { Ref, forwardRef, useContext } from "react";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+
+export const AirplaneInnerGroupRef = forwardRef((_, ref: Ref<THREE.Group>) => {
+  const { airplaneGltf: gltf } = useContext(GaesupWorldContext);
+  const { materials, nodes } = gltf;
+  return (
+    <>
+      {nodes && materials && (
+        <group receiveShadow castShadow ref={ref}>
+          {Object.keys(nodes).map((name: string, key: number) => {
+            if (
+              nodes[name].type === "Mesh" ||
+              nodes[name].type === "SkinnedMesh"
+            ) {
+              return (
+                <mesh
+                  castShadow
+                  receiveShadow
+                  material={materials[name]}
+                  geometry={nodes[name].geometry}
+                  key={key}
+                />
+              );
+            }
+          })}
+        </group>
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,81 @@
+import { GroupProps } from "@react-three/fiber";
+import { 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";
+
+export type characterGltfType = {
+  prop: propType;
+  groupProps?: GroupProps;
+  groundRay: groundRayType;
+  refs: refsType;
+  callbacks?: callbackType;
+  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);
+
+  initCallback({
+    prop,
+    callbacks,
+    outerGroupRef: refs.outerGroupRef,
+  });
+
+  playActions({
+    outerGroupRef: refs.outerGroupRef,
+    groundRay: groundRay,
+    isRider,
+  });
+
+  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}
+            receiveShadow
+            castShadow
+          />
+        )}
+      {nodes &&
+        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

@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+
+export default function VehicleGltf() {
+  const { vehicleGltf: gltf } = useContext(GaesupWorldContext);
+  const { materials, nodes } = gltf;
+  return (
+    <>
+      {nodes && materials && (
+        <group receiveShadow castShadow rotation={[0, Math.PI, 0]}>
+          {Object.keys(nodes).map((name: string, key: number) => {
+            if (
+              nodes[name].type === "Mesh" ||
+              nodes[name].type === "SkinnedMesh"
+            ) {
+              return (
+                <mesh
+                  castShadow
+                  receiveShadow
+                  material={materials[name]}
+                  geometry={nodes[name].geometry}
+                  key={key}
+                />
+              );
+            }
+          })}
+        </group>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { RapierRigidBody } from "@react-three/rapier";
+import { createRef, useContext, useRef } from "react";
+import { propType } from "../../controller/type";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { WheelRegidBodyRef } from "../ref/vehicle";
+
+export function Wheels({ prop }: { prop: propType }) {
+  const { rigidBodyRef, constant } = prop;
+  const { wheelOffset } = constant;
+  const { vehicleCollider: collider } = useContext(GaesupWorldContext);
+  const { vehicleSizeX, vehicleSizeZ, wheelSizeX, wheelSizeZ } = collider;
+  const X = (vehicleSizeX + wheelSizeX) / 2 + wheelOffset;
+  const Z = (vehicleSizeZ + wheelSizeZ) / 2 + wheelOffset;
+  const wheelPositions: [number, number, number][] = [
+    [-X, 0, Z],
+    [-X, 0, -Z],
+    [X, 0, Z],
+    [X, 0, -Z],
+  ];
+  const wheelRefs = useRef(
+    wheelPositions.map(() => createRef<RapierRigidBody>())
+  );
+  return (
+    <>
+      {wheelPositions.map((wheelPosition, index) => (
+        <WheelRegidBodyRef
+          key={index}
+          ref={wheelRefs.current[index]}
+          wheelPosition={wheelPosition}
+          bodyRef={rigidBodyRef}
+          wheel={wheelRefs.current[index]}
+          bodyAnchor={wheelPosition}
+          wheelAnchor={[0, 0, 0]}
+          rotationAxis={[1, 0, 0]}
+        />
+      ))}
+    </>
+  );
+}

package/src/gaesup/component/gltf/type.ts

@@ -0,0 +1,6 @@
+import { GLTF } from "three-stdlib";
+
+export type GLTFResult = GLTF & {
+  nodes: { [name: string]: THREE.Mesh | THREE.SkinnedMesh };
+  materials: { [name: string]: THREE.Material | THREE.MeshStandardMaterial };
+};

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

@@ -0,0 +1,83 @@
+import { Collider } from "@dimforge/rapier3d-compat";
+
+import {
+  CuboidCollider,
+  RapierRigidBody,
+  RigidBody,
+  useRapier,
+} 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 { getRayHit } from "../../utils/ray";
+import { useForwardRef } from "../../utils/ref";
+
+export const AirplaneRigidBody = forwardRef(
+  (
+    {
+      groundRay,
+      children,
+    }: {
+      groundRay: groundRayType;
+      children: ReactNode;
+    },
+    ref: Ref<RapierRigidBody>
+  ) => {
+    return (
+      <RigidBody colliders={false} ref={ref}>
+        {/* {options.debug && (
+          <mesh visible={options.debug}>
+            <arrowHelper
+              args={[groundRay.dir, groundRay.origin, groundRay.length]}
+            />
+          </mesh>
+        )} */}
+        {children}
+      </RigidBody>
+    );
+  }
+);
+
+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;
+    groundRay.length = airplaneSizeY * 5 + 2;
+    groundRay.rayCast = new rapier.Ray(groundRay.origin, groundRay.dir);
+    groundRay.hit = getRayHit<groundRayType>({
+      ray: groundRay,
+      ref: colliderRef,
+    });
+    groundRay.parent = groundRay.hit?.collider.parent();
+
+    return (
+      <CuboidCollider
+        ref={ref}
+        args={[airplaneSizeX / 2, airplaneSizeY / 2, airplaneSizeZ / 2]}
+        position={[0, airplaneSizeY / 2, 0]}
+      />
+    );
+  }
+);
+
+export const AirplaneGroup = forwardRef(
+  (
+    {
+      children,
+    }: {
+      children: ReactNode;
+    },
+    ref: Ref<THREE.Group>
+  ) => {
+    return (
+      <group ref={ref} userData={{ intangible: true }}>
+        {children}
+      </group>
+    );
+  }
+);

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

@@ -0,0 +1,132 @@
+import { Collider } from "@dimforge/rapier3d-compat";
+
+import {
+  CapsuleCollider,
+  RapierRigidBody,
+  RigidBody,
+  useRapier,
+} from "@react-three/rapier";
+import { ReactNode, Ref, forwardRef, useContext } from "react";
+import * as THREE from "three";
+
+import {
+  controllerType,
+  groundRayType,
+  propType,
+  slopeRayType,
+} from "../../controller/type";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { getRayHit } from "../../utils/ray";
+import { useForwardRef } from "../../utils/ref";
+
+export const CharacterRigidBody = forwardRef(
+  (
+    {
+      controllerProps,
+      children,
+    }: {
+      controllerProps: controllerType;
+      children: ReactNode;
+    },
+    ref: Ref<RapierRigidBody>
+  ) => {
+    return (
+      <RigidBody
+        colliders={false}
+        canSleep={false}
+        ref={ref}
+        {...controllerProps}
+      >
+        {/* {options.debug && (
+          <mesh
+            visible={options.debug}
+            userData={{
+              intangible: true,
+            }}
+          >
+            <arrowHelper
+              args={[groundRay.dir, groundRay.origin, groundRay.length]}
+            />
+          </mesh>
+        )} */}
+        {children}
+      </RigidBody>
+    );
+  }
+);
+
+export const CharacterCapsuleCollider = forwardRef(
+  ({ prop }: { prop: propType }, ref: Ref<Collider>) => {
+    const { characterCollider: collider } = useContext(GaesupWorldContext);
+    const colliderRef = useForwardRef<Collider>(ref);
+    const { rapier } = useRapier();
+    const { groundRay, slopeRay } = prop;
+    groundRay.length = collider.radius + 2;
+    groundRay.rayCast = new rapier.Ray(groundRay.origin, groundRay.dir);
+    groundRay.hit = getRayHit<groundRayType>({
+      ray: groundRay,
+      ref: colliderRef,
+    });
+    groundRay.parent = groundRay.hit?.collider.parent();
+
+    slopeRay.rayCast = new rapier.Ray(slopeRay.origin, slopeRay.dir);
+    slopeRay.length = collider.radius + 3;
+    slopeRay.rayCast = new rapier.Ray(slopeRay.origin, slopeRay.dir);
+
+    return (
+      <CapsuleCollider ref={ref} args={[collider.height, collider.radius]} />
+    );
+  }
+);
+
+export const CharacterGroup = forwardRef(
+  (
+    {
+      children,
+    }: {
+      children: ReactNode;
+    },
+    ref: Ref<THREE.Group>
+  ) => {
+    return (
+      <group ref={ref} userData={{ intangible: true }}>
+        {children}
+      </group>
+    );
+  }
+);
+
+export const CharacterSlopeRay = forwardRef(
+  (
+    {
+      groundRay,
+      slopeRay,
+    }: {
+      groundRay: groundRayType;
+      slopeRay: slopeRayType;
+    },
+    ref: Ref<THREE.Mesh>
+  ) => {
+    return (
+      <mesh
+        position={[
+          groundRay.offset.x,
+          groundRay.offset.y,
+          groundRay.offset.z + slopeRay.offset.z,
+        ]}
+        ref={ref}
+        visible={false}
+        userData={{ intangible: true }}
+      >
+        {/* {options.debug && (
+          <mesh userData={{ intangible: true }}>
+            <arrowHelper
+              args={[slopeRay.dir, slopeRay.origin, slopeRay.length, "#ff0000"]}
+            />
+          </mesh>
+        )} */}
+        <boxGeometry args={[0.15, 0.15, 0.15]} />
+      </mesh>
+    );
+  }
+);

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

@@ -0,0 +1,145 @@
+import { Collider } from "@dimforge/rapier3d-compat";
+import { Gltf } from "@react-three/drei";
+import {
+  CuboidCollider,
+  CylinderCollider,
+  RapierRigidBody,
+  RigidBody,
+  useRevoluteJoint,
+} from "@react-three/rapier";
+import { ReactNode, Ref, RefObject, forwardRef, useContext } from "react";
+import * as THREE from "three";
+import { groundRayType } from "../../controller/type";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { S3 } from "../../utils/constant";
+
+export const VehicleRigidBody = forwardRef(
+  (
+    {
+      groundRay,
+      children,
+    }: {
+      groundRay: groundRayType;
+      children: ReactNode;
+    },
+    ref: Ref<RapierRigidBody>
+  ) => {
+    return (
+      <RigidBody colliders={false} ref={ref}>
+        {/* {options.debug && (
+          <mesh visible={options.debug}>
+            <arrowHelper
+              args={[groundRay.dir, groundRay.origin, groundRay.length]}
+            />
+          </mesh>
+        )} */}
+        {children}
+      </RigidBody>
+    );
+  }
+);
+
+export const VehicleCollider = forwardRef((_, ref: Ref<Collider>) => {
+  const { vehicleCollider: collider } = useContext(GaesupWorldContext);
+  const { vehicleSizeX, vehicleSizeY, vehicleSizeZ } = collider;
+  return (
+    <CuboidCollider
+      ref={ref}
+      args={[vehicleSizeX / 2, vehicleSizeY / 2, vehicleSizeZ / 2]}
+      position={[0, vehicleSizeY / 2, 0]}
+    />
+  );
+});
+
+export const VehicleGroup = forwardRef(
+  (
+    {
+      children,
+    }: {
+      children: ReactNode;
+    },
+    ref: Ref<THREE.Group>
+  ) => {
+    return (
+      <group ref={ref} userData={{ intangible: true }}>
+        {children}
+      </group>
+    );
+  }
+);
+
+export type wheelRegidBodyType = {
+  wheelPosition: [number, number, number];
+  wheelsUrl?: string;
+  bodyRef: RefObject<RapierRigidBody>;
+  wheel: RefObject<RapierRigidBody>;
+  bodyAnchor: THREE.Vector3Tuple;
+  wheelAnchor: THREE.Vector3Tuple;
+  rotationAxis: THREE.Vector3Tuple;
+};
+
+export const WheelRegidBodyRef = forwardRef(
+  (
+    {
+      wheelPosition,
+      wheelsUrl,
+      bodyRef,
+      wheel,
+      bodyAnchor,
+      wheelAnchor,
+      rotationAxis,
+    }: wheelRegidBodyType,
+    ref: Ref<RapierRigidBody>
+  ) => {
+    const { vehicleCollider: collider } = useContext(GaesupWorldContext);
+    const { wheelSizeX, wheelSizeY } = collider;
+    useRevoluteJoint(bodyRef, wheel, [bodyAnchor, wheelAnchor, rotationAxis]);
+
+    return (
+      <RigidBody position={wheelPosition} colliders={false} ref={ref}>
+        <CylinderCollider
+          args={[wheelSizeX / 2, wheelSizeY / 2]}
+          rotation={[0, 0, Math.PI / 2]}
+        />
+        <Gltf src={wheelsUrl || S3 + "/wheel.glb"} />
+      </RigidBody>
+    );
+  }
+);
+
+//
+// export const GaesupSlopeRay = forwardRef(
+//   (
+//     {
+//       groundRay,
+//       slopeRay,
+//     }: {
+//       groundRay: groundRayType;
+//       slopeRay: slopeRayType;
+//     },
+//     ref: Ref<THREE.Mesh>
+//   ) => {
+//     const options = useAtomValue(optionsAtom);
+//     return (
+//       <mesh
+//         position={[
+//           groundRay.offset.x,
+//           groundRay.offset.y,
+//           groundRay.offset.z + slopeRay.offset.z,
+//         ]}
+//         ref={ref}
+//         visible={false}
+//         userData={{ intangible: true }}
+//       >
+//         {options.debug && (
+//           <mesh>
+//             <arrowHelper
+//               args={[slopeRay.dir, slopeRay.origin, slopeRay.length, "#ff0000"]}
+//             />
+//           </mesh>
+//         )}
+//         <boxGeometry args={[0.15, 0.15, 0.15]} />
+//       </mesh>
+//     );
+//   }
+// );

package/src/gaesup/controller/index.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Collider, RevoluteImpulseJoint } from "@dimforge/rapier3d-compat";
+import { RapierRigidBody } from "@react-three/rapier";
+import React, { useContext, useMemo, useReducer, useRef } from "react";
+import Camera from "../camera";
+import { Airplane } from "../component/Airplane";
+import { Character } from "../component/Character";
+import { Vehicle } from "../component/Vehicle";
+import initControllerProps from "../initial/controller";
+import {
+  GaesupControllerContext,
+  GaesupControllerDispatchContext,
+  gaesupControllerDefault,
+} from "../stores/context/controller";
+import { gaesupControllerReducer } from "../stores/context/controller/reducer";
+import { GaesupWorldContext } from "../stores/context/gaesupworld";
+import { controllerType, propType, refsType } from "./type";
+
+export default function GaesupController(props: controllerType) {
+  const { mode } = useContext(GaesupWorldContext);
+  const [controller, controllerDispatch] = useReducer(gaesupControllerReducer, {
+    cameraMode: Object.assign(
+      gaesupControllerDefault.cameraMode,
+      props.cameraMode || {}
+    ),
+    cameraOption: Object.assign(
+      gaesupControllerDefault.cameraOption,
+      props.cameraOption || {}
+    ),
+    perspectiveCamera: Object.assign(
+      gaesupControllerDefault.perspectiveCamera,
+      props.perspectiveCamera || {}
+    ),
+    orthographicCamera: Object.assign(
+      gaesupControllerDefault.orthographicCamera,
+      props.orthographicCamera || {}
+    ),
+  });
+
+  const capsuleColliderRef = useRef<Collider>(null);
+  const rigidBodyRef = useRef<RapierRigidBody>(null);
+  const outerGroupRef = useRef<THREE.Group>(null);
+  const innerGroupRef = useRef<THREE.Group>(null);
+  const slopeRayOriginRef = useRef<THREE.Mesh>(null);
+  const jointRefs = useRef<RevoluteImpulseJoint>(null);
+
+  const gaesupControl = useMemo(
+    () => ({
+      value: controller,
+      dispatch: controllerDispatch,
+    }),
+    [
+      controller.cameraMode,
+      controller.cameraOption,
+      controller.perspectiveCamera,
+      controller.orthographicCamera,
+      controllerDispatch,
+    ]
+  );
+
+  const refs: refsType = {
+    capsuleColliderRef,
+    rigidBodyRef,
+    outerGroupRef,
+    innerGroupRef,
+    slopeRayOriginRef,
+    jointRefs,
+  };
+
+  const prop: propType = {
+    ...initControllerProps({
+      props,
+      refs,
+    }),
+    callbacks: {
+      onReady: props.onReady,
+      onFrame: props.onFrame,
+      onDestory: props.onDestory,
+      onAnimate: props.onAnimate,
+    },
+    children: props.children,
+    groupProps: props.groupProps,
+    ...refs,
+  };
+
+  return (
+    <GaesupControllerContext.Provider value={gaesupControl.value}>
+      <Camera refs={refs} prop={prop} control={prop.keyControl} />
+      <GaesupControllerDispatchContext.Provider value={gaesupControl.dispatch}>
+        {mode.type === "character" && (
+          <Character controllerProps={prop} refs={refs} />
+        )}
+        {mode.type === "vehicle" && (
+          <Vehicle controllerProps={prop} refs={refs} />
+        )}
+        {mode.type === "airplane" && (
+          <Airplane controllerProps={prop} refs={refs} />
+        )}
+      </GaesupControllerDispatchContext.Provider>
+    </GaesupControllerContext.Provider>
+  );
+}