gaesup-world 0.0.1

package/src/gaesup/controller/type.ts

@@ -0,0 +1,139 @@
+import {
+  Collider,
+  Ray,
+  RayColliderToi,
+  RevoluteImpulseJoint,
+} from "@dimforge/rapier3d-compat";
+import { GroupProps, OrthographicCameraProps } from "@react-three/fiber";
+import { RapierRigidBody, RigidBodyProps } from "@react-three/rapier";
+import { ReactNode, RefObject } from "react";
+import * as THREE from "three";
+import { cameraRayType } from "../camera/type";
+import { callbackType } from "../initial/callback/type";
+
+import {
+  gaesupCameraOptionType,
+  gaesupCameraPropType,
+  perspectiveCameraPropType,
+} from "../stores/context/controller/type";
+import { keyControlType } from "../stores/control/type";
+
+export type constantType = {
+  jumpSpeed: number;
+  turnSpeed: number;
+  walkSpeed: number;
+  runSpeed: number;
+  accelRate: number;
+  brakeRate: number;
+  wheelOffset: number;
+  linearDamping: number;
+  cameraInitDistance: number;
+  cameraMaxDistance: number;
+  cameraMinDistance: number;
+  cameraInitDirection: number;
+  cameraCollisionOff: number;
+  cameraDistance: number;
+  cameraCamFollow: number;
+};
+
+export type optionsType = {
+  debug: boolean;
+  mode?: "normal" | "vehicle" | "airplane";
+  controllerType: "none" | "gameboy" | "joystick" | "keyboard";
+  cameraCollisionType: "transparent" | "closeUp";
+  camera: {
+    type: "perspective" | "orthographic";
+    control: "orbit" | "normal";
+  };
+  minimap: boolean;
+  minimapRatio: number;
+};
+
+export type partialOptionsType = Partial<optionsType>;
+export type partialConstantType = Partial<constantType>;
+
+export type jumpInnerType = {
+  velocity: THREE.Vector3;
+  direction: THREE.Vector3;
+};
+
+export type jumpConstType = {
+  speed: number;
+  gravity: number;
+};
+
+export type jumpPropType = jumpInnerType & jumpConstType;
+
+export type rayType = {
+  origin: THREE.Vector3;
+  hit: RayColliderToi | null;
+  rayCast: Ray | null;
+  dir: THREE.Vector3;
+  offset: THREE.Vector3;
+  length: number;
+  current?: THREE.Vector3;
+  angle?: number;
+  parent?: RapierRigidBody | null | undefined;
+};
+
+export type slopeRayType = Omit<rayType, "parent">;
+export type groundRayType = Omit<rayType, "current" | "angle">;
+
+export type propType = {
+  children?: ReactNode;
+  groupProps?: GroupProps;
+  slopeRay: slopeRayType;
+  groundRay: groundRayType;
+  cameraRay: cameraRayType;
+  constant: constantType;
+  capsuleColliderRef: RefObject<Collider>;
+  rigidBodyRef: RefObject<RapierRigidBody>;
+  outerGroupRef: RefObject<THREE.Group>;
+  innerGroupRef: RefObject<THREE.Group>;
+  slopeRayOriginRef: RefObject<THREE.Mesh>;
+  jointRefs?: RefObject<RevoluteImpulseJoint>;
+  characterUrl?: string;
+  kartUrl?: string;
+  airplaneUrl?: string;
+  keyControl: keyControlType;
+  debug?: boolean;
+  callbacks?: callbackType;
+};
+
+export type animationTagType = {
+  idle: string;
+  walk: string;
+  run: string;
+  jump: string;
+  jumpIdle: string;
+  jumpLand: string;
+  fall: string;
+  ride: string;
+};
+
+export type actionsType = animationTagType & {
+  [key: string]: string;
+};
+
+export type refsType = {
+  capsuleColliderRef: RefObject<Collider>;
+  rigidBodyRef: RefObject<RapierRigidBody>;
+  outerGroupRef: RefObject<THREE.Group>;
+  innerGroupRef: RefObject<THREE.Group>;
+  slopeRayOriginRef: RefObject<THREE.Mesh>;
+  jointRefs: RefObject<RevoluteImpulseJoint>;
+};
+
+export interface controllerPropType extends RigidBodyProps {
+  children?: ReactNode;
+  debug?: boolean;
+  slopeRay?: slopeRayType;
+  props?: RigidBodyProps;
+  constant?: partialConstantType;
+  groupProps?: GroupProps;
+  cameraMode?: gaesupCameraPropType;
+  cameraOption?: gaesupCameraOptionType;
+  perspectiveCamera?: perspectiveCameraPropType;
+  orthographicCamera?: OrthographicCameraProps;
+}
+export type controllerType = controllerPropType & {} & callbackType;

package/src/gaesup/gaesupProps/index.tsx

@@ -0,0 +1,66 @@
+import { vec3 } from "@react-three/rapier";
+import { useContext, useEffect, useRef } from "react";
+import * as THREE from "three";
+import {
+  GaesupWorldContext,
+  GaesupWorldDispatchContext,
+} from "../stores/context/gaesupworld";
+
+export default function GaeSupProps({
+  text,
+  position,
+  jumpPoint,
+  children,
+}: {
+  text: string;
+  position?: [number, number, number];
+  jumpPoint?: boolean;
+  children: React.ReactNode;
+}) {
+  const groupRef = useRef<THREE.Group>(null);
+  const { minimap, points } = useContext(GaesupWorldContext);
+  const dispatch = useContext(GaesupWorldDispatchContext);
+  useEffect(() => {
+    if (jumpPoint && position) {
+      points.push({
+        text,
+        position: vec3().set(position[0], 5, position[2]),
+      });
+      dispatch({
+        type: "update",
+        payload: {
+          points: [...points],
+        },
+      });
+    }
+    if (groupRef.current) {
+      const box = new THREE.Box3().setFromObject(groupRef.current);
+      const size = vec3(box.getSize(new THREE.Vector3()))
+        .clone()
+        .multiplyScalar(minimap.ratio);
+      const center = vec3(box.getCenter(new THREE.Vector3()))
+        .clone()
+        .multiplyScalar(minimap.ratio);
+      const obj = {
+        text,
+        size,
+        center,
+      };
+      minimap.props[text] = obj;
+      dispatch({
+        type: "update",
+        payload: {
+          minimap: {
+            ...minimap,
+          },
+        },
+      });
+    }
+  }, []);
+
+  return (
+    <group ref={groupRef} position={position}>
+      {children}
+    </group>
+  );
+}

package/src/gaesup/initial/callback/index.ts

@@ -0,0 +1,73 @@
+import { useFrame } from "@react-three/fiber";
+import { useContext, useEffect } from "react";
+
+import { useAnimations, useKeyboardControls } from "@react-three/drei";
+import { animationTagType } from "../../controller/type";
+
+import {
+  GaesupWorldContext,
+  GaesupWorldDispatchContext,
+} from "../../stores/context/gaesupworld";
+import { callbackPropType, initCallbackType } from "./type";
+
+export default function initCallback({
+  prop,
+  callbacks,
+  outerGroupRef,
+}: initCallbackType) {
+  const {
+    characterGltf,
+    animations: characterAnimations,
+    activeState,
+    states,
+  } = useContext(GaesupWorldContext);
+  const dispatch = useContext(GaesupWorldDispatchContext);
+  const { animations } = characterGltf;
+  const control = useKeyboardControls()[1]();
+  const { actions } = useAnimations(animations, outerGroupRef);
+
+  const playAnimation = (tag: keyof animationTagType) => {
+    characterAnimations.current = tag;
+    dispatch({
+      type: "update",
+      payload: {
+        animations: {
+          ...characterAnimations,
+        },
+      },
+    });
+  };
+
+  const controllerProp: callbackPropType = {
+    ...prop,
+    activeState,
+    control,
+    states,
+  };
+
+  useEffect(() => {
+    if (callbacks && callbacks.onReady) {
+      callbacks.onReady(controllerProp);
+    }
+    return () => {
+      if (callbacks && callbacks.onDestory) {
+        callbacks.onDestory(controllerProp);
+      }
+    };
+  }, []);
+
+  useFrame((prop) => {
+    if (callbacks && callbacks.onFrame) {
+      callbacks.onFrame({ ...controllerProp, ...prop });
+    }
+    if (callbacks && callbacks.onAnimate) {
+      callbacks.onAnimate({
+        ...controllerProp,
+        ...prop,
+        actions,
+        animation: characterAnimations,
+        playAnimation,
+      });
+    }
+  });
+}

package/src/gaesup/initial/callback/type.ts

@@ -0,0 +1,45 @@
+import { RootState } from "@react-three/fiber";
+import { cameraRayType } from "../../camera/type";
+import {
+  actionsType,
+  constantType,
+  groundRayType,
+  propType,
+  slopeRayType,
+} from "../../controller/type";
+import { activeStateType } from "../../stores/active/type";
+import { animationPropType } from "../../stores/animation/type";
+import { keyControlType } from "../../stores/control/type";
+import { statesType } from "../../stores/states/type";
+
+export type initCallbackType = {
+  prop: propType;
+  callbacks?: callbackType;
+  outerGroupRef: React.MutableRefObject<THREE.Group | undefined>;
+};
+
+export type callbackPropType = {
+  activeState: activeStateType;
+  states: statesType;
+  slopeRay: slopeRayType;
+  groundRay: groundRayType;
+  cameraRay: cameraRayType;
+  constant: constantType;
+  control: keyControlType;
+};
+
+export type onFramePropType = callbackPropType & RootState;
+export type onAnimatePropType = onFramePropType & {
+  actions: {
+    [x: string]: THREE.AnimationAction | null;
+  };
+  animation: animationPropType;
+  playAnimation: (tag: keyof actionsType) => void;
+};
+
+export type callbackType = {
+  onReady?: (prop: callbackPropType) => void;
+  onFrame?: (prop: onFramePropType) => void;
+  onDestory?: (prop: callbackPropType) => void;
+  onAnimate?: (prop: onAnimatePropType) => void;
+};

package/src/gaesup/initial/controller/index.ts

@@ -0,0 +1,143 @@
+import { useKeyboardControls } from "@react-three/drei";
+import { vec3 } from "@react-three/rapier";
+import { useCallback, useContext, useEffect, useMemo } from "react";
+import * as THREE from "three";
+import {
+  constantType,
+  controllerType,
+  groundRayType,
+  refsType,
+  slopeRayType,
+} from "../../controller/type";
+import {
+  GaesupWorldContext,
+  GaesupWorldDispatchContext,
+} from "../../stores/context/gaesupworld";
+import { keyControlType } from "../../stores/control/type";
+import initDebug from "./initDebug";
+
+export default function initControllerProps({
+  props,
+  refs,
+}: {
+  props: controllerType;
+  refs: refsType;
+}) {
+  const context = useContext(GaesupWorldContext);
+  const dispatch = useContext(GaesupWorldDispatchContext);
+
+  const [_, getKeys] = useKeyboardControls();
+  const keyControl: keyControlType = getKeys();
+
+  const groundRay: groundRayType = useMemo(() => {
+    return {
+      origin: vec3(),
+      dir: vec3({ x: 0, y: -1, z: 0 }),
+      offset: vec3({ x: 0, y: -context.characterCollider.halfHeight, z: 0 }),
+      hit: null,
+      parent: null,
+      rayCast: null,
+      length: 0.5,
+    };
+  }, []);
+
+  const slopeRay: slopeRayType = useMemo(() => {
+    return {
+      current: vec3(),
+      origin: vec3(),
+      hit: null,
+      rayCast: null,
+      dir: vec3({ x: 0, y: -1, z: 0 }),
+      offset: vec3({ x: 0, y: 0, z: context.characterCollider.radius - 0.03 }),
+      length: context.characterCollider.radius + 3,
+      angle: 0,
+    };
+  }, []);
+
+  let constant: constantType = useMemo(() => {
+    return {
+      jumpSpeed: 5,
+      turnSpeed: 10,
+      walkSpeed: 4,
+      runSpeed: 10,
+      accelRate: 5,
+      brakeRate: 5,
+      wheelOffset: 0.1,
+      linearDamping: 1,
+      cameraInitDistance: -5,
+      cameraMaxDistance: -7,
+      cameraMinDistance: -0.7,
+      cameraInitDirection: 0,
+      cameraCollisionOff: 0.7,
+      cameraDistance: -1,
+      cameraCamFollow: 11,
+    };
+  }, []);
+
+  const cameraRay = useMemo(() => {
+    return {
+      origin: vec3(),
+      hit: new THREE.Raycaster(),
+      rayCast: new THREE.Raycaster(vec3(), vec3(), 0, -7),
+      lerpingPoint: vec3(),
+      dir: vec3(),
+      position: vec3(),
+      length: -1,
+      followCamera: new THREE.Object3D(),
+      pivot: new THREE.Object3D(),
+      intersetesAndTransParented: [],
+      intersects: [],
+      intersectObjects: [],
+      intersectObjectMap: {},
+    };
+  }, []);
+  cameraRay.rayCast = new THREE.Raycaster(
+    cameraRay.origin,
+    cameraRay.dir,
+    0,
+    -constant.cameraMaxDistance
+  );
+
+  const initRefs = useCallback(
+    (refs: refsType) => {
+      dispatch({
+        type: "update",
+        payload: {
+          refs: {
+            ...refs,
+          },
+        },
+      });
+    },
+    [refs]
+  );
+
+  useEffect(() => {
+    if (refs) {
+      initRefs(refs);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (props.constant) {
+      constant = {
+        ...constant,
+        ...Object.assign(constant, props.constant),
+      };
+    }
+  }, []);
+
+  return initDebug({
+    slopeRay,
+    groundRay,
+    constant,
+    cameraRay,
+    capsuleColliderRef: refs.capsuleColliderRef,
+    rigidBodyRef: refs.rigidBodyRef,
+    outerGroupRef: refs.outerGroupRef,
+    slopeRayOriginRef: refs.slopeRayOriginRef,
+    innerGroupRef: refs.innerGroupRef,
+    keyControl,
+    debug: props.debug,
+  });
+}

package/src/gaesup/initial/controller/initDebug.ts

@@ -0,0 +1,102 @@
+import { useControls } from "leva";
+import { propType } from "../../controller/type";
+
+export default function initDebug(prop: propType) {
+  const debugProps = { ...prop };
+  if (prop.debug) {
+    debugProps.constant = useControls("constants", {
+      jumpSpeed: {
+        value: debugProps.constant.jumpSpeed,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      turnSpeed: {
+        value: debugProps.constant.turnSpeed,
+        min: 5,
+        max: 30,
+        step: 0.01,
+      },
+      walkSpeed: {
+        value: debugProps.constant.walkSpeed,
+        min: 1,
+        max: 5,
+        step: 0.01,
+      },
+      runSpeed: {
+        value: debugProps.constant.runSpeed,
+        min: 1,
+        max: 5,
+        step: 0.01,
+      },
+      accelRate: {
+        value: debugProps.constant.accelRate,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      brakeRate: {
+        value: debugProps.constant.brakeRate,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      wheelOffset: {
+        value: debugProps.constant.wheelOffset,
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+      linearDamping: {
+        value: debugProps.constant.linearDamping,
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+      cameraInitDistance: {
+        value: debugProps.constant.cameraInitDistance,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      cameraMaxDistance: {
+        value: debugProps.constant.cameraMaxDistance,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      cameraMinDistance: {
+        value: debugProps.constant.cameraMinDistance,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      cameraInitDirection: {
+        value: debugProps.constant.cameraInitDirection,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      cameraCollisionOff: {
+        value: debugProps.constant.cameraCollisionOff,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      cameraDistance: {
+        value: debugProps.constant.cameraDistance,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+      cameraCamFollow: {
+        value: debugProps.constant.cameraCamFollow,
+        min: 1,
+        max: 10,
+        step: 0.01,
+      },
+    });
+  }
+
+  return { ...debugProps };
+}

package/src/gaesup/initial/gaesupWorld/collider/airplane.ts

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { innerColliderPropType } from "../type";
+
+export function airplane({ gltf, value, dispatch }: innerColliderPropType) {
+  const { url } = value;
+  if (!url || !url.airplaneUrl) return;
+  const { airplaneSize } = gltf;
+
+  useEffect(() => {
+    if (airplaneSize.x !== 0 && airplaneSize.y !== 0 && airplaneSize.z !== 0) {
+      dispatch({
+        type: "update",
+        payload: {
+          airplaneCollider: {
+            airplaneSizeX: airplaneSize.x,
+            airplaneSizeY: airplaneSize.y,
+            airplaneSizeZ: airplaneSize.z,
+            airplaneX: airplaneSize.x / 2,
+            airplaneY: airplaneSize.y / 2,
+            airplaneZ: airplaneSize.z / 2,
+          },
+        },
+      });
+    }
+  }, [airplaneSize.x, airplaneSize.y, airplaneSize.z]);
+}

package/src/gaesup/initial/gaesupWorld/collider/character.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { innerColliderPropType } from "../type";
+
+export function character({ gltf, value, dispatch }: innerColliderPropType) {
+  const { url } = value;
+  if (!url || !url.characterUrl) return;
+  const { characterSize } = gltf;
+  useEffect(() => {
+    if (
+      characterSize.x !== 0 &&
+      characterSize.y !== 0 &&
+      characterSize.z !== 0
+    ) {
+      const heightPlusDiameter = characterSize.y / 2;
+      const diameter = Math.max(characterSize.x, characterSize.z);
+      const radius = diameter / 2;
+      const height = heightPlusDiameter - radius;
+      const halfHeight = height / 2;
+      dispatch({
+        type: "update",
+        payload: {
+          characterCollider: {
+            height,
+            halfHeight,
+            radius,
+            diameter,
+          },
+        },
+      });
+    }
+  }, [characterSize.x, characterSize.y, characterSize.z]);
+}