gaesup-world 0.9.778 → 0.9.780

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gaesup-world",
-  "version": "0.9.778",
+  "version": "0.9.780",
   "type": "commonjs",
   "main": "./index.ts",
   "types": "./index.d.ts",
@@ -46,7 +46,7 @@
     }
   },
   "files": [
-    "dist",
+    "src",
     "README.md",
     "LICENSE.txt"
   ],

package/src/gaesup/animation/actions.ts

@@ -0,0 +1,112 @@
+import { useFrame } from '@react-three/fiber'
+import { useContext, useEffect } from 'react'
+import { animationTagType } from '../controller/type'
+import { useGaesupAnimation } from '../hooks/useGaesupAnimation'
+import { GaesupWorldContext, GaesupWorldDispatchContext } from '../world/context'
+import { playActionsType, subscribeActionsType } from './type'
+
+export function subscribeActions({ type }: subscribeActionsType) {
+  const { states } = useContext(GaesupWorldContext)
+  const { subscribeAll } = useGaesupAnimation({ type })
+  // 초기 기본 애니메이션 등록
+  useEffect(() => {
+    subscribeAll([
+      {
+        tag: 'walk',
+        condition: () => !states.isRunning && states.isMoving,
+        action: () => {},
+        animationName: 'walk',
+        key: 'walk',
+      },
+      {
+        tag: 'run',
+        condition: () => states.isRunning,
+        action: () => {},
+        animationName: 'run',
+        key: 'run',
+      },
+      {
+        tag: 'jump',
+        condition: () => states.isJumping,
+        action: () => {},
+        animationName: 'jump',
+        key: 'jump',
+      },
+
+      {
+        tag: 'ride',
+        condition: () => states.isPush['keyR'],
+        action: () => {},
+        animationName: 'ride',
+        key: 'ride',
+      },
+      {
+        tag: 'land',
+        condition: () => states.isLanding,
+        action: () => {},
+        animationName: 'land',
+        key: 'land',
+      },
+      {
+        tag: 'fall',
+        condition: () => states.isFalling,
+        action: () => {},
+        animationName: 'fall',
+        key: 'fall',
+      },
+    ])
+  }, [])
+}
+
+export default function playActions({ type, actions, animationRef, currentAnimation, isActive }: playActionsType) {
+  const { mode, animationState, block } = useContext(GaesupWorldContext)
+  const dispatch = useContext(GaesupWorldDispatchContext)
+  const { notify, store } = useGaesupAnimation({ type })
+
+  if (isActive) {
+    currentAnimation = animationState?.[type]?.current
+  }
+
+  const play = (tag: keyof animationTagType) => {
+    animationState[type].current = tag
+    const currentAnimation = store[tag]
+    if (currentAnimation?.action) {
+      currentAnimation.action()
+    }
+    dispatch({
+      type: 'update',
+      payload: {
+        animationState: {
+          ...animationState,
+        },
+      },
+    })
+  }
+
+  useEffect(() => {
+    let animation = 'idle'
+    if (block.animation) {
+      animation = 'idle'
+    } else if (currentAnimation) {
+      animation = currentAnimation
+    } else if (animationState[type].current) {
+      animation = animationState[type].current
+    }
+    const action = actions[animation]?.reset().fadeIn(0.2).play()
+    return () => {
+      action?.fadeOut(0.2)
+    }
+  }, [currentAnimation, mode.type, block.animation, type])
+
+  useFrame(() => {
+    if (isActive) {
+      const tag = notify() as keyof animationTagType
+      play(tag)
+    }
+  })
+
+  return {
+    animationRef,
+    currentAnimation: animationState?.[type]?.current,
+  }
+}

package/src/gaesup/animation/type.ts

@@ -0,0 +1,37 @@
+import { Ref } from 'react'
+import * as THREE from 'three'
+import { AnimationAction, AnimationClip, AnimationMixer, Object3D, Object3DEventMap } from 'three'
+import { groundRayType } from '../controller/type'
+
+export type Api<T extends AnimationClip> = {
+  ref: React.MutableRefObject<Object3D | undefined | null>
+  clips: AnimationClip[]
+  mixer: AnimationMixer
+  names: T['name'][]
+  actions: {
+    [key in T['name']]: AnimationAction | null
+  }
+}
+
+export type playActionsType = {
+  type: 'character' | 'vehicle' | 'airplane'
+  currentAnimation?: string
+  actions: actionsType
+  animationRef: Ref<Object3D<Object3DEventMap>>
+  isActive: boolean
+}
+
+export type subscribeActionsType = {
+  type: 'character' | 'vehicle' | 'airplane'
+  groundRay: groundRayType
+  animations: AnimationClip[]
+}
+
+export type actionsType = {
+  [x: string]: THREE.AnimationAction | null
+}
+
+export type playResultType = {
+  actions: actionsType
+  ref: Ref<Object3D<Object3DEventMap>>
+}

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

@@ -0,0 +1,27 @@
+import { cameraPropType } from "../../physics/type";
+import { V3 } from "../../utils/vector";
+import { activeStateType, cameraOptionType } from "../../world/context/type";
+
+export const makeNormalCameraPosition = (
+  activeState: activeStateType,
+  cameraOption: cameraOptionType
+) => {
+  const { XDistance, YDistance, ZDistance } = cameraOption;
+  const cameraPosition = activeState.position
+    .clone()
+    .add(V3(XDistance, YDistance, ZDistance));
+  return cameraPosition;
+};
+export default function normal(prop: cameraPropType) {
+  const {
+    state,
+    worldContext: { cameraOption },
+    controllerOptions: { lerp },
+  } = prop;
+  if (!state || !state.camera) return;
+  state.camera.position.lerp(
+    cameraOption.position.clone(),
+    lerp.cameraPosition
+  );
+  state.camera.lookAt(cameraOption.target);
+}

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

@@ -0,0 +1,37 @@
+import { quat } from "@react-three/rapier";
+import { cameraPropType } from "../../physics/type";
+import { V3 } from "../../utils/vector";
+import { activeStateType, cameraOptionType } from "../../world/context/type";
+
+export const makeOrbitCameraPosition = (
+  activeState: activeStateType,
+  cameraOption: cameraOptionType
+) => {
+  const { XDistance, YDistance, ZDistance } = cameraOption;
+  const cameraPosition = activeState.position.clone().add(
+    V3(Math.sin(activeState.euler.y), 1, Math.cos(activeState.euler.y))
+      .normalize()
+      .clone()
+      .multiply(V3(-XDistance, YDistance, -ZDistance))
+  );
+  return cameraPosition;
+};
+
+export default function orbit(prop: cameraPropType) {
+  const {
+    state,
+    worldContext: { activeState, cameraOption },
+    controllerOptions: { lerp },
+  } = prop;
+
+  if (!state || !state.camera) return;
+  const cameraPosition = makeOrbitCameraPosition(activeState, cameraOption);
+  state.camera.position.lerp(cameraPosition.clone(), lerp.cameraTurn);
+  state.camera.quaternion.copy(
+    activeState.quat
+      .clone()
+      .multiply(quat().setFromAxisAngle(V3(0, 1, 0), Math.PI))
+  );
+  state.camera.rotation.copy(activeState.euler);
+  state.camera.lookAt(activeState.position.clone());
+}

package/src/gaesup/camera/index.tsx

@@ -0,0 +1,29 @@
+import { useFrame } from "@react-three/fiber";
+import { cameraPropType } from "../physics/type";
+import normal, { makeNormalCameraPosition } from "./control/normal";
+import orbit from "./control/orbit";
+
+export default function Camera(prop: cameraPropType) {
+  useFrame((state) => {
+    prop.state = state;
+    if (!prop.worldContext.block.camera) {
+      if (prop.worldContext.mode.control === "orbit") {
+        orbit(prop);
+      } else if (prop.worldContext.mode.control === "normal") {
+        normal(prop);
+      }
+    }
+  });
+
+  // 포커스가 아닐 때 카메라 activeStae 따라가기
+  useFrame(() => {
+    if (!prop.worldContext.cameraOption.focus) {
+      prop.worldContext.cameraOption.target =
+        prop.worldContext.activeState.position;
+      prop.worldContext.cameraOption.position = makeNormalCameraPosition(
+        prop.worldContext.activeState,
+        prop.worldContext.cameraOption
+      );
+    }
+  });
+}

package/src/gaesup/camera/type.ts

@@ -0,0 +1,14 @@
+import * as THREE from "three";
+import {} from "three-stdlib";
+
+export type cameraRayType = {
+  origin: THREE.Vector3;
+  hit: THREE.Raycaster;
+  rayCast: THREE.Raycaster | null;
+  length: number;
+  dir: THREE.Vector3;
+  position: THREE.Vector3;
+  intersects: THREE.Intersection<THREE.Mesh>[];
+  detected: THREE.Intersection<THREE.Mesh>[];
+  intersectObjectMap: { [uuid: string]: THREE.Mesh };
+};

package/src/gaesup/component/active/airplane/index.tsx

@@ -0,0 +1,17 @@
+import { AirplaneInnerRef } from "../../inner/airplane";
+import { activeAirplaneInnerType } from "./type";
+
+export function AirplaneRef(props: activeAirplaneInnerType) {
+  return (
+    <AirplaneInnerRef
+      name={"airplane"}
+      isActive={true}
+      currentAnimation={"idle"}
+      componentType={"airplane"}
+      ridingUrl={props.ridingUrl}
+      {...props}
+    >
+      {props.children}
+    </AirplaneInnerRef>
+  );
+}

package/src/gaesup/component/active/airplane/type.ts

@@ -0,0 +1,4 @@
+import { passiveAirplanePropsType } from "../../passive/airplane/type";
+import { innerRefType } from "../../passive/type";
+
+export type activeAirplaneInnerType = passiveAirplanePropsType & innerRefType;

package/src/gaesup/component/active/character/index.tsx

@@ -0,0 +1,35 @@
+import { controllerInnerType, refsType } from "../../../controller/type";
+import { urlsType } from "../../../world/context/type";
+import { CharacterInnerRef } from "../../inner/character";
+
+export function CharacterRef({
+  children,
+  props,
+  refs,
+  urls,
+}: {
+  children: React.ReactNode;
+  props: controllerInnerType;
+  refs: refsType;
+  urls: urlsType;
+}) {
+  return (
+    <CharacterInnerRef
+      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}
+      rigidBodyProps={props.rigidBodyProps}
+      parts={props.parts}
+      {...refs}
+    >
+      {children}
+    </CharacterInnerRef>
+  );
+}

package/src/gaesup/component/active/character/type.ts

@@ -0,0 +1,13 @@
+import { RigidBodyTypeString } from "@react-three/rapier";
+import * as THREE from "three";
+import { controllerOptionsType } from "../../../controller/type";
+
+export type activeCharacterPropsType = {
+  characterUrl: string;
+  position?: THREE.Vector3;
+  rotation?: THREE.Euler;
+  controllerOptions?: controllerOptionsType;
+  currentAnimation?: string;
+  children?: React.ReactNode;
+  rigidbodyType?: RigidBodyTypeString;
+};

package/src/gaesup/component/active/vehicle/index.tsx

@@ -0,0 +1,17 @@
+import { VehicleInnerRef } from "../../inner/vehicle";
+import { activeVehicleInnerType } from "./type";
+
+export function VehicleRef(props: activeVehicleInnerType) {
+  return (
+    <VehicleInnerRef
+      name={"vehicle"}
+      isActive={true}
+      currentAnimation={"idle"}
+      componentType={"vehicle"}
+      ridingUrl={props.ridingUrl}
+      {...props}
+    >
+      {props.children}
+    </VehicleInnerRef>
+  );
+}

package/src/gaesup/component/active/vehicle/type.ts

@@ -0,0 +1,4 @@
+import { innerRefType } from "../../passive/type";
+import { passiveVehiclePropsType } from "../../passive/vehicle/type";
+
+export type activeVehicleInnerType = passiveVehiclePropsType & innerRefType;

package/src/gaesup/component/index.tsx

@@ -0,0 +1,65 @@
+import { vec3 } from "@react-three/rapier";
+import { useContext } from "react";
+import { controllerInnerType, refsType } from "../controller/type";
+import { GaesupWorldContext } from "../world/context";
+import { AirplaneRef } from "./active/airplane";
+import { CharacterRef } from "./active/character";
+import { VehicleRef } from "./active/vehicle";
+
+export function GaesupComponent({
+  props,
+  refs,
+}: {
+  props: controllerInnerType;
+  refs: refsType;
+}) {
+  const { mode, states, rideable, urls } = useContext(GaesupWorldContext);
+  const { enableRiding, isRiderOn, rideableId } = states;
+
+  return (
+    <>
+      {mode.type === "character" && (
+        <CharacterRef props={props} refs={refs} urls={urls}>
+          {props.children}
+        </CharacterRef>
+      )}
+      {mode.type === "vehicle" && (
+        <VehicleRef
+          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}
+        >
+          {props.children}
+        </VehicleRef>
+      )}
+      {mode.type === "airplane" && (
+        <AirplaneRef
+          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}
+        >
+          {props.children}
+        </AirplaneRef>
+      )}
+    </>
+  );
+}

package/src/gaesup/component/inner/airplane/index.tsx

@@ -0,0 +1,21 @@
+import { OuterGroupRef } from "../common/OuterGroupRef";
+import { RigidBodyRef } from "../common/RigidbodyRef";
+import { airplaneInnerType } from "./type";
+
+export function AirplaneInnerRef(props: airplaneInnerType) {
+  const { rigidBodyRef, outerGroupRef } = props;
+
+  return (
+    <OuterGroupRef ref={outerGroupRef}>
+      <RigidBodyRef
+        ref={rigidBodyRef}
+        name={props.name}
+        componentType={"airplane"}
+        ridingUrl={props.ridingUrl}
+        {...props}
+      >
+        {props.children}
+      </RigidBodyRef>
+    </OuterGroupRef>
+  );
+}

package/src/gaesup/component/inner/airplane/type.ts

@@ -0,0 +1,8 @@
+import { ridingType, rigidBodyRefType } from "../common/type";
+
+// airplane 타입 정의
+export type airplaneUrlType = {
+  wheelUrl?: string;
+};
+
+export type airplaneInnerType = rigidBodyRefType & ridingType & airplaneUrlType;

package/src/gaesup/component/inner/character/index.tsx

@@ -0,0 +1,22 @@
+import { OuterGroupRef } from "../common/OuterGroupRef";
+import { RigidBodyRef } from "../common/RigidbodyRef";
+import { characterInnerType } from "./type";
+
+export function CharacterInnerRef(props: characterInnerType) {
+  const { outerGroupRef } = props;
+  return (
+    <OuterGroupRef ref={outerGroupRef}>
+      <RigidBodyRef
+        name={"character"}
+        url={props.url}
+        controllerOptions={props.controllerOptions}
+        ref={props.rigidBodyRef}
+        groundRay={props.groundRay}
+        isNotColliding={props.isNotColliding}
+        {...props}
+      >
+        {props.children}
+      </RigidBodyRef>
+    </OuterGroupRef>
+  );
+}

package/src/gaesup/component/inner/character/type.ts

@@ -0,0 +1,14 @@
+import { callbackType } from "../../../controller/initialize/callback/type";
+import { groundRayType, partsType } from "../../../controller/type";
+import { passiveCharacterPropsType } from "../../passive/character/type";
+import { componentTypeString, innerRefType } from "../../passive/type";
+
+// 내부 정의
+export type characterInnerType = {
+  componentType: componentTypeString;
+  isActive?: boolean;
+  groundRay: groundRayType;
+  parts?: partsType;
+} & passiveCharacterPropsType &
+  innerRefType &
+  callbackType;

package/src/gaesup/component/inner/common/InnerGroupRef.tsx

@@ -0,0 +1,56 @@
+import { Ref, forwardRef } from "react";
+import * as THREE from "three";
+import RiderRef from "../rider";
+import { InnerGroupRefType } from "./type";
+
+export const InnerGroupRef = forwardRef(
+  (props: InnerGroupRefType, ref: Ref<THREE.Group>) => {
+    return (
+      <group receiveShadow castShadow ref={ref} userData={{ intangible: true }}>
+        {props.isRiderOn &&
+          props.enableRiding &&
+          props.isActive &&
+          props.ridingUrl && (
+            <RiderRef url={props.ridingUrl} offset={props.offset} />
+          )}
+
+        {props.children}
+        {props.objectNode && props.animationRef && (
+          <primitive
+            object={props.objectNode}
+            visible={false}
+            receiveShadow
+            castShadow
+            ref={props.animationRef}
+          />
+        )}
+
+        {Object.keys(props.nodes).map((name: string, key: number) => {
+          const node = props.nodes[name];
+          if (node instanceof THREE.SkinnedMesh) {
+            return (
+              <skinnedMesh
+                castShadow
+                receiveShadow
+                material={node.material}
+                geometry={node.geometry}
+                skeleton={node.skeleton}
+                key={key}
+              />
+            );
+          } else if (node instanceof THREE.Mesh) {
+            return (
+              <mesh
+                castShadow
+                receiveShadow
+                material={node.material}
+                geometry={node.geometry}
+                key={key}
+              />
+            );
+          }
+        })}
+      </group>
+    );
+  }
+);

package/src/gaesup/component/inner/common/OuterGroupRef.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, MutableRefObject, ReactNode } from 'react'
+import * as THREE from 'three'
+
+export const OuterGroupRef = forwardRef(
+  (
+    {
+      children,
+    }: {
+      children: ReactNode
+    },
+    ref: any
+  ) => {
+    return (
+      <group ref={ref} userData={{ intangible: true }}>
+        {children}
+      </group>
+    )
+  }
+)