gaesup-world 0.0.1 → 0.0.2

package/src/gaesup/controller/index.tsx

@@ -2,7 +2,7 @@
 
 import { Collider, RevoluteImpulseJoint } from "@dimforge/rapier3d-compat";
 import { RapierRigidBody } from "@react-three/rapier";
-import React, { useContext, useMemo, useReducer, useRef } from "react";
+import { useContext, useMemo, useReducer, useRef } from "react";
 import Camera from "../camera";
 import { Airplane } from "../component/Airplane";
 import { Character } from "../component/Character";
@@ -36,6 +36,19 @@ export default function GaesupController(props: controllerType) {
       gaesupControllerDefault.orthographicCamera,
       props.orthographicCamera || {}
     ),
+    airplane: Object.assign(
+      gaesupControllerDefault.airplane,
+      props.airplane || {}
+    ),
+    vehicle: Object.assign(
+      gaesupControllerDefault.vehicle,
+      props.vehicle || {}
+    ),
+    character: Object.assign(
+      gaesupControllerDefault.character,
+      props.character || {}
+    ),
+    isRider: props.isRider !== null ? props.isRider : false,
   });
 
   const capsuleColliderRef = useRef<Collider>(null);
@@ -43,6 +56,7 @@ export default function GaesupController(props: controllerType) {
   const outerGroupRef = useRef<THREE.Group>(null);
   const innerGroupRef = useRef<THREE.Group>(null);
   const slopeRayOriginRef = useRef<THREE.Mesh>(null);
+  const characterInnerRef = useRef<THREE.Group>(null);
   const jointRefs = useRef<RevoluteImpulseJoint>(null);
 
   const gaesupControl = useMemo(
@@ -55,7 +69,10 @@ export default function GaesupController(props: controllerType) {
       controller.cameraOption,
       controller.perspectiveCamera,
       controller.orthographicCamera,
-      controllerDispatch,
+      controller.airplane,
+      controller.vehicle,
+      controller.character,
+      controller.isRider,
     ]
   );
 
@@ -65,6 +82,7 @@ export default function GaesupController(props: controllerType) {
     outerGroupRef,
     innerGroupRef,
     slopeRayOriginRef,
+    characterInnerRef,
     jointRefs,
   };
 
@@ -81,6 +99,7 @@ export default function GaesupController(props: controllerType) {
     },
     children: props.children,
     groupProps: props.groupProps,
+    isRider: props.isRider !== null ? props.isRider : false,
     ...refs,
   };
 

package/src/gaesup/controller/type.ts

@@ -11,6 +11,11 @@ import * as THREE from "three";
 import { cameraRayType } from "../camera/type";
 import { callbackType } from "../initial/callback/type";
 
+import {
+  airplaneType,
+  characterType,
+  vehicleType,
+} from "../stores/airplane/type";
 import {
   gaesupCameraOptionType,
   gaesupCameraPropType,
@@ -82,6 +87,7 @@ export type groundRayType = Omit<rayType, "current" | "angle">;
 export type propType = {
   children?: ReactNode;
   groupProps?: GroupProps;
+  rigidBodyProps?: RigidBodyProps;
   slopeRay: slopeRayType;
   groundRay: groundRayType;
   cameraRay: cameraRayType;
@@ -98,6 +104,7 @@ export type propType = {
   keyControl: keyControlType;
   debug?: boolean;
   callbacks?: callbackType;
+  isRider?: boolean;
 };
 
 export type animationTagType = {
@@ -121,6 +128,7 @@ export type refsType = {
   outerGroupRef: RefObject<THREE.Group>;
   innerGroupRef: RefObject<THREE.Group>;
   slopeRayOriginRef: RefObject<THREE.Mesh>;
+  characterInnerRef: RefObject<THREE.Group>;
   jointRefs: RefObject<RevoluteImpulseJoint>;
 };
 
@@ -131,9 +139,14 @@ export interface controllerPropType extends RigidBodyProps {
   props?: RigidBodyProps;
   constant?: partialConstantType;
   groupProps?: GroupProps;
+  rigidBodyProps?: RigidBodyProps;
   cameraMode?: gaesupCameraPropType;
   cameraOption?: gaesupCameraOptionType;
   perspectiveCamera?: perspectiveCameraPropType;
   orthographicCamera?: OrthographicCameraProps;
+  airplane?: airplaneType;
+  vehicle?: vehicleType;
+  character?: characterType;
+  isRider?: boolean;
 }
 export type controllerType = controllerPropType & {} & callbackType;

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

@@ -25,10 +25,23 @@ export default function initControllerProps({
 }) {
   const context = useContext(GaesupWorldContext);
   const dispatch = useContext(GaesupWorldDispatchContext);
-
+  const { control, mode } = useContext(GaesupWorldContext);
   const [_, getKeys] = useKeyboardControls();
   const keyControl: keyControlType = getKeys();
 
+  useEffect(() => {
+    if (keyControl && control) {
+      dispatch({
+        type: "update",
+        payload: {
+          control: {
+            ...(mode.controller === "keyboard" ? keyControl : control),
+          },
+        },
+      });
+    }
+  }, [mode.controller, keyControl, control]);
+
   const groundRay: groundRayType = useMemo(() => {
     return {
       origin: vec3(),

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

@@ -9,11 +9,11 @@ import {
 import { modeDefault } from "../../stores/context/gaesupworld";
 import { gaesupReducer } from "../../stores/context/gaesupworld/reducer";
 import { controlDefault } from "../../stores/control";
+import { gameboyDefault } from "../../stores/gameboy";
 import { joyStickDefault } from "../../stores/joystick";
 import { minimapDefault } from "../../stores/minimap";
 import { statesDefault } from "../../stores/states";
 import { urlDefault } from "../../stores/url";
-import minimap from "../../tools/minimap";
 import { V3 } from "../../utils/vector";
 import initColider from "./collider";
 import { initGaesupWorldPropsType } from "./type";
@@ -44,8 +44,9 @@ export default function initGaesupWorld(props: initGaesupWorldPropsType) {
     airplaneGltf: null,
     states: statesDefault,
     debug: false,
-    minimap: Object.assign(minimapDefault, minimap || {}),
+    minimap: Object.assign(minimapDefault, props.minimap || {}),
     joystick: joyStickDefault,
+    gameboy: gameboyDefault,
     control: controlDefault,
     points: [],
     refs: null,

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

@@ -10,6 +10,8 @@ import {
   gaesupWorldPartialPropType,
   gaesupWorldPropType,
 } from "../../stores/context/gaesupworld/type";
+import { gameboyType } from "../../stores/gameboy/type";
+import { joyStickType } from "../../stores/joystick/type";
 import { minimapType } from "../../stores/minimap/type";
 import { urlType } from "../../stores/url/type";
 import { getGltfResultType } from "./collider/gltf";
@@ -25,6 +27,8 @@ export type initGaesupWorldPropsType = {
   mode?: gaesupControllerPropType;
   debug?: boolean;
   minimap?: Omit<minimapType, "props">;
+  joystick?: joyStickType;
+  gameboy?: gameboyType;
 };
 
 export type innerColliderPropType = {

package/src/gaesup/physics/airplane/damping.ts

@@ -1,8 +1,6 @@
 import { calcPropType } from "../type";
 
 export default function damping(prop: calcPropType) {
-  const { rigidBodyRef, constant, control } = prop;
-  const { space } = control;
-  const { brakeRate } = constant;
-  rigidBodyRef.current.setLinearDamping(space ? brakeRate : 0.5);
+  const { rigidBodyRef } = prop;
+  rigidBodyRef.current.setLinearDamping(0.1);
 }

package/src/gaesup/physics/airplane/direction.ts

@@ -1,70 +1,81 @@
+import { quat } from "@react-three/rapier";
 import { V3 } from "../../utils/vector";
 import { calcPropType } from "../type";
 
 export default function direction(prop: calcPropType) {
   const {
-    rigidBodyRef,
+    state,
     innerGroupRef,
-    worldContext: { activeState },
+    worldContext: { joystick, activeState, control, mode },
+    controllerContext: { airplane },
   } = prop;
-  const { forward, backward, leftward, rightward, shift } = prop.control;
+  const { forward, backward, leftward, rightward, shift, space } = control;
+  const { angleChange, maxAngle, accelRatio } = airplane;
 
-  const boost = Number(shift);
-  const upDown = Number(backward) - Number(forward);
+  console.log(Number(joystick.joyStickOrigin.isUp));
+
+  let boost = 0;
+  if (mode.controller === "joystick") {
+    boost = space
+      ? Number(joystick.joyStickOrigin.isOn)
+      : Number(joystick.joyStickOrigin.isOn) * accelRatio;
+  } else {
+    boost = space ? Number(shift) : Number(shift) * accelRatio;
+  }
+  const upDown =
+    mode.controller === "joystick"
+      ? joystick.joyStickOrigin.isUp
+        ? -1
+        : 1
+      : Number(backward) - Number(forward);
   const leftRight = Number(rightward) - Number(leftward);
   const front = V3().set(boost, boost, boost);
-  activeState.euler.y += (Number(leftward) - Number(rightward)) * 0.02;
 
-  const X = Math.PI * 0.01 * upDown;
-  const Z = Math.PI * 0.005 * leftRight;
+  const _euler = activeState.euler.clone();
+  const __euler = activeState.euler.clone();
+  if (mode.controller === "joystick") {
+    __euler.y =
+      -state.camera.rotation.y - joystick.joyStickOrigin.angle - Math.PI / 2;
+  } else {
+    activeState.euler.y += -leftRight * angleChange.y;
+  }
+  if (mode.controller === "joystick")
+    activeState.euler.setFromQuaternion(
+      quat()
+        .setFromEuler(_euler)
+        .slerp(
+          quat().setFromEuler(__euler),
+          joystick.joyStickOrigin.isIn ? 0.01 : 0.1
+        )
+    );
+
+  const X = maxAngle.x * upDown;
+  const Z = maxAngle.z * leftRight;
 
   const _x = innerGroupRef.current.rotation.x;
   const _z = innerGroupRef.current.rotation.z;
 
-  const maxX = Math.PI / 16;
-  const maxZ = Math.PI / 16;
+  const maxX = maxAngle.x;
+  const maxZ = maxAngle.z;
+
+  const innerGrounRefRotation = innerGroupRef.current.clone();
 
-  if (_x < -maxX) innerGroupRef.current.rotation.x = -maxX + X;
-  else if (_x > maxX) innerGroupRef.current.rotation.x = maxX + X;
-  else innerGroupRef.current.rotateX(X);
+  if (_x < -maxX) innerGrounRefRotation.rotation.x = -maxX + X;
+  else if (_x > maxX) innerGrounRefRotation.rotation.x = maxX + X;
+  else innerGrounRefRotation.rotateX(X);
 
-  if (_z < -maxZ) innerGroupRef.current.rotation.z = -maxZ + Z;
-  else if (_z > maxZ) innerGroupRef.current.rotation.z = maxZ + Z;
-  else innerGroupRef.current.rotateZ(Z);
+  if (_z < -maxZ) innerGrounRefRotation.rotation.z = -maxZ + Z;
+  else if (_z > maxZ) innerGrounRefRotation.rotation.z = maxZ + Z;
+  else innerGrounRefRotation.rotateZ(Z);
+
+  innerGroupRef.current.setRotationFromQuaternion(
+    quat()
+      .setFromEuler(innerGroupRef.current.rotation.clone())
+      .slerp(quat().setFromEuler(innerGrounRefRotation.rotation), 0.1)
+  );
 
-  // current.dir = V3(
-  //   Math.sin(current.euler.y),
-  //   0,
-  //   Math.cos(current.euler.y)
-  // ).normalize();
-  // current.direction = front
-  //   .multiply(current.dir)
-  //   .multiplyScalar(shift ? accelRate : 1);
   activeState.direction = front.multiply(
     V3(Math.sin(activeState.euler.y), -upDown, Math.cos(activeState.euler.y))
   );
   activeState.dir = activeState.direction.normalize();
-
-  //   const pitch = Number(forward) - Number(backward);
-  //   // const front = vec3().set(start, start * 1, start);
-  //   const yaw = Number(leftward) - Number(rightward);
-  //
-  //   // activeState.euler.y += (side * Math.PI) / 64;
-  //
-  //   // if (euler.x > Math.PI / 16) euler.x = Math.PI / 16 - 0.005;
-  //   // else if (euler.x < -Math.PI / 16) euler.x = -Math.PI / 16 + 0.005;
-  //   // if (euler.z > Math.PI / 16) euler.z = Math.PI / 16 - 0.005;
-  //   // else if (euler.z < -Math.PI / 16) euler.z = -Math.PI / 16 + 0.005;
-  //   // if (euler.y > Math.PI / 4) euler.y = Math.PI / 4 - 0.005;
-  //   // else if (euler.y < -Math.PI / 4) euler.y = -Math.PI / 4 + 0.005;
-  //
-  //   const delta = Math.PI * 0.005;
-  //   euler.x += pitch * delta * Math.cos(euler.z) * Math.cos(euler.y);
-  //   euler.z += -yaw * delta;
-  //   euler.y += pitch * delta * Math.sin(euler.z) * Math.sin(euler.y);
-  //
-  //   // activeState.direction = front.multiply(
-  //   //   V3(Math.sin(activeState.euler.y), 1, Math.cos(activeState.euler.y))
-  //   // );
-  //   // activeState.dir = activeState.direction.normalize();
 }

package/src/gaesup/physics/airplane/impulse.ts

@@ -4,12 +4,18 @@ import { calcPropType } from "../type";
 export default function impulse(prop: calcPropType) {
   const {
     rigidBodyRef,
-    constant,
-    control,
-    worldContext: { activeState },
+    worldContext: { activeState, control },
+    controllerContext: { airplane },
   } = prop;
-  const { shift } = control;
-  const { accelRate } = constant;
+  const { maxSpeed } = airplane;
+
+  const velocity = rigidBodyRef.current.linvel();
+  const currentSpeed = Math.sqrt(
+    velocity.x ** 2 + velocity.y ** 2 + velocity.z ** 2
+  );
+  if (currentSpeed > maxSpeed) {
+    return null;
+  }
 
   rigidBodyRef.current.applyImpulse(
     vec3({

package/src/gaesup/physics/character/direction.ts

@@ -91,9 +91,8 @@ export function normalDirection({
 
 export default function direction(prop: calcPropType) {
   const {
-    control,
     state,
-    worldContext: { joystick, mode, activeState },
+    worldContext: { joystick, mode, activeState, control },
     controllerContext: { cameraMode },
   } = prop;
   if (cameraMode.controlType === "normal") {

package/src/gaesup/physics/check/moving.ts

@@ -2,10 +2,9 @@ import { calcPropType } from "../type";
 
 export default function moving(prop: calcPropType) {
   const {
-    control: calcControl,
-    worldContext: { states, joystick, mode },
+    worldContext: { states, joystick, mode, control },
   } = prop;
-  const { forward, backward, leftward, rightward, shift, space } = calcControl;
+  const { forward, backward, leftward, rightward, shift, space } = control;
   if (mode.controller === "gameboy" || mode.controller === "keyboard") {
     states.isMoving = forward || backward || leftward || rightward;
     states.isNotMoving = !states.isMoving;

package/src/gaesup/physics/index.ts

@@ -1,6 +1,5 @@
 import { useFrame } from "@react-three/fiber";
 
-import { useKeyboardControls } from "@react-three/drei";
 import { useContext } from "react";
 import { propType } from "../controller/type";
 
@@ -21,20 +20,20 @@ export default function calculation(prop: propType) {
   const worldContext = useContext(GaesupWorldContext);
   const controllerContext = useContext(GaesupControllerContext);
   const dispatch = useContext(GaesupWorldDispatchContext);
-  const control = useKeyboardControls()[1]();
   const { mode } = worldContext;
   useFrame((state, delta) => {
-    const { rigidBodyRef, outerGroupRef } = prop;
+    const { rigidBodyRef, outerGroupRef, innerGroupRef } = prop;
     if (
       !rigidBodyRef ||
       !rigidBodyRef.current ||
       !outerGroupRef ||
-      !outerGroupRef.current
+      !outerGroupRef.current ||
+      !innerGroupRef ||
+      !innerGroupRef.current
     )
       return null;
     const calcProp: calcPropType = {
       ...prop,
-      control,
       state,
       delta,
       worldContext,

package/src/gaesup/physics/type.ts

@@ -11,9 +11,6 @@ import {
 export type SetAtom<Args extends unknown[], Result> = (...args: Args) => Result;
 
 export type calcPropType = propType & {
-  control: {
-    [key: string]: boolean;
-  };
   state?: RootState;
   checkCollision?: (delta: number) => void;
   worldContext?: gaesupWorldPropType;

package/src/gaesup/physics/vehicle/damping.ts

@@ -1,7 +1,11 @@
 import { calcPropType } from "../type";
 
 export default function damping(prop: calcPropType) {
-  const { rigidBodyRef, constant, control } = prop;
+  const {
+    rigidBodyRef,
+    constant,
+    worldContext: { control },
+  } = prop;
   const { space } = control;
   const { brakeRate } = constant;
   rigidBodyRef.current.setLinearDamping(space ? brakeRate : 0.5);

package/src/gaesup/physics/vehicle/direction.ts

@@ -1,25 +1,46 @@
-import { vec3 } from "@react-three/rapier";
+import { quat, vec3 } from "@react-three/rapier";
 import { V3 } from "../../utils/vector";
 import { calcPropType } from "../type";
 
 export default function direction(prop: calcPropType) {
   const {
-    worldContext: { activeState },
+    state,
+    worldContext: { activeState, control, mode, joystick },
   } = prop;
-  const { forward, backward, leftward, rightward } = prop.control;
+  const { forward, backward, leftward, rightward } = control;
+
+  let start = Number(forward) - Number(backward);
+  if (mode.controller === "joystick") {
+    if (!joystick.joyStickOrigin.isCenter)
+      start = joystick.joyStickOrigin.isOn ? 1 : 0;
+  } else {
+    start = Number(forward) - Number(backward);
+  }
 
-  const start = Number(forward) - Number(backward);
   const front = vec3().set(start, 0, start);
-  activeState.euler.y +=
-    ((Number(leftward) - Number(rightward)) * Math.PI) / 64;
-  // current.dir = V3(
-  //   Math.sin(current.euler.y),
-  //   0,
-  //   Math.cos(current.euler.y)
-  // ).normalize();
-  // current.direction = front
-  //   .multiply(current.dir)
-  //   .multiplyScalar(shift ? accelRate : 1);
+
+  const _euler = activeState.euler.clone();
+  const __euler = activeState.euler.clone();
+
+  if (mode.controller === "joystick") {
+    if (!joystick.joyStickOrigin.isCenter)
+      __euler.y =
+        -state.camera.rotation.y - joystick.joyStickOrigin.angle - Math.PI / 2;
+  } else {
+    activeState.euler.y +=
+      ((Number(leftward) - Number(rightward)) * Math.PI) / 64;
+  }
+
+  if (mode.controller === "joystick")
+    activeState.euler.setFromQuaternion(
+      quat()
+        .setFromEuler(_euler)
+        .slerp(
+          quat().setFromEuler(__euler),
+          joystick.joyStickOrigin.isIn ? 0.01 : 0.1
+        )
+    );
+
   activeState.direction = front.multiply(
     V3(Math.sin(activeState.euler.y), 0, Math.cos(activeState.euler.y))
   );

package/src/gaesup/physics/vehicle/impulse.ts

@@ -5,18 +5,35 @@ export default function impulse(prop: calcPropType) {
   const {
     rigidBodyRef,
     constant,
-    control,
-    worldContext: { activeState },
+    worldContext: { activeState, control, mode, joystick },
+    controllerContext: { vehicle },
   } = prop;
   const { shift } = control;
   const { accelRate } = constant;
+  const { maxSpeed } = vehicle;
+  const velocity = rigidBodyRef.current.linvel();
+  const currentSpeed = Math.sqrt(
+    velocity.x ** 2 + velocity.y ** 2 + velocity.z ** 2
+  );
+  if (currentSpeed > maxSpeed) {
+    return null;
+  }
+
+  let speed = 1;
+  if (mode.controller === "joystick") {
+    console.log(joystick.joyStickOrigin.isCenter);
+    if (!joystick.joyStickOrigin.isCenter)
+      speed = joystick.joyStickOrigin.isIn ? accelRate : 1;
+  } else {
+    speed = shift ? accelRate : 1;
+  }
 
   rigidBodyRef.current.applyImpulse(
     vec3({
       x: activeState.direction.x,
       y: 0,
       z: activeState.direction.z,
-    }).multiplyScalar(shift ? accelRate : 1),
+    }).multiplyScalar(speed),
     false
   );
 }

package/src/gaesup/stores/airplane/index.ts

@@ -1,6 +1,22 @@
 import { V3 } from "../../utils/vector";
 
 export const airplaneDefault = {
-  angleChange: V3(0.02, 0.01, 0.01),
-  maxAngle: V3(0.2, 0.2, 0.2),
+  angleChange: V3(0.01, 0.005, 0.005),
+  maxAngle: V3(0.1, 0.1, 0.1),
+  maxSpeed: 60,
+  accelRatio: 2,
+};
+
+export const vehicleDefault = {
+  angleChange: V3(0.01, 0.005, 0.005),
+  maxAngle: V3(0.1, 0.1, 0.1),
+  maxSpeed: 60,
+  accelRatio: 2,
+};
+
+export const characterDefault = {
+  angleChange: V3(0.01, 0.005, 0.005),
+  maxAngle: V3(0.1, 0.1, 0.1),
+  maxSpeed: 60,
+  accelRatio: 2,
 };

package/src/gaesup/stores/airplane/type.ts

@@ -1,4 +1,22 @@
-export type airplaneType = {
-  angleChange: THREE.Vector3;
-  maxAngle: THREE.Vector3;
-};
+import { GroupProps } from "@react-three/fiber";
+
+export interface airplaneType extends GroupProps {
+  angleChange?: THREE.Vector3;
+  maxAngle?: THREE.Vector3;
+  maxSpeed?: number;
+  accelRatio?: number;
+}
+
+export interface vehicleType extends GroupProps {
+  angleChange?: THREE.Vector3;
+  maxAngle?: THREE.Vector3;
+  maxSpeed?: number;
+  accelRatio?: number;
+}
+
+export interface characterType extends GroupProps {
+  angleChange?: THREE.Vector3;
+  maxAngle?: THREE.Vector3;
+  maxSpeed?: number;
+  accelRatio?: number;
+}

package/src/gaesup/stores/context/controller/index.ts

@@ -1,6 +1,5 @@
 import { createContext } from "react";
 import { V3 } from "../../../utils/vector";
-import { airplaneDefault } from "../../airplane";
 import { dispatchType } from "../gaesupworld/type";
 import {
   gaesupControllerType,
@@ -26,7 +25,25 @@ export const gaesupControllerDefault = {
     near: 0.1,
     far: 1000,
   },
-  airplane: { ...airplaneDefault },
+  airplane: {
+    angleChange: V3(0.01, 0.005, 0.005),
+    maxAngle: V3(0.1, 0.1, 0.1),
+    maxSpeed: 60,
+    accelRatio: 2,
+  },
+  vehicle: {
+    angleChange: V3(0.01, 0.005, 0.005),
+    maxAngle: V3(0.1, 0.1, 0.1),
+    maxSpeed: 60,
+    accelRatio: 2,
+  },
+  character: {
+    angleChange: V3(0.01, 0.005, 0.005),
+    maxAngle: V3(0.1, 0.1, 0.1),
+    maxSpeed: 60,
+    accelRatio: 2,
+  },
+  isRider: false,
 };
 
 export const GaesupControllerContext = createContext<gaesupControllerType>({

package/src/gaesup/stores/context/controller/type.ts

@@ -1,5 +1,6 @@
 import { OrthographicCameraProps } from "@react-three/fiber";
 import { Dispatch } from "react";
+import { airplaneType, characterType, vehicleType } from "../../airplane/type";
 
 export type perspectiveCameraType = {
   cameraType?: "perspective";
@@ -29,6 +30,10 @@ export type gaesupControllerType = {
   cameraOption: gaesupCameraOptionType;
   perspectiveCamera: perspectiveCameraPropType;
   orthographicCamera: OrthographicCameraProps;
+  airplane: airplaneType;
+  vehicle: vehicleType;
+  character: characterType;
+  isRider: boolean;
 };
 
 export type gaesupControllerPartialType = Partial<gaesupControllerType>;