first commit

Author: ErdongChen-Andrew

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Erdong Chen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

example/CharacterAnimation.png

@@ -0,0 +1,152 @@
+import { Text } from "@react-three/drei";
+import { useFrame } from "@react-three/fiber";
+import {
+  CuboidCollider,
+  CylinderCollider,
+  RigidBody,
+} from "@react-three/rapier";
+import { useRef, useMemo } from "react";
+import * as THREE from "three";
+
+export default function DynamicPlatforms() {
+  const sideMovePlatformRef = useRef();
+  const verticalMovePlatformRef = useRef();
+  const rotatePlatformRef = useRef();
+  const rotationDrumRef = useRef();
+
+  // Initializ animation settings
+  let time = null;
+  const xRotationAxies = new THREE.Vector3(1, 0, 0);
+  const yRotationAxies = new THREE.Vector3(0, 1, 0);
+  const zRotationAxies = new THREE.Vector3(0, 0, 1);
+  const quaternionRotation = useMemo(() => new THREE.Quaternion(), []);
+
+  useFrame((state) => {
+    time = state.clock.elapsedTime;
+
+    // Move platform
+    sideMovePlatformRef.current?.setNextKinematicTranslation({
+      x: 5 * Math.sin(time / 2) - 12,
+      y: -0.5,
+      z: -10,
+    });
+
+    // Elevate platform
+    verticalMovePlatformRef.current?.setNextKinematicTranslation({
+      x: -25,
+      y: 2 * Math.sin(time / 2) + 2,
+      z: 0,
+    });
+    verticalMovePlatformRef.current?.setNextKinematicRotation(
+      quaternionRotation.setFromAxisAngle(yRotationAxies, time * 0.5)
+    );
+
+    // Rotate platform
+    rotatePlatformRef.current?.setNextKinematicRotation(
+      quaternionRotation.setFromAxisAngle(yRotationAxies, time * 0.5)
+    );
+
+    // Rotate drum
+    rotationDrumRef.current?.setNextKinematicRotation(
+      quaternionRotation.setFromAxisAngle(xRotationAxies, time * 0.5)
+    );
+  });
+
+  return (
+    <>
+      {/* Moving platform */}
+      <RigidBody
+        type="kinematicPosition"
+        ref={sideMovePlatformRef}
+        colliders={false}
+      >
+        <Text
+          scale={0.5}
+          color="black"
+          maxWidth={10}
+          textAlign="center"
+          position={[0, 2.5, 0]}
+        >
+          Kinematic Moving Platform
+        </Text>
+        <CuboidCollider args={[2.5, 0.1, 2.5]} />
+        <mesh receiveShadow castShadow>
+          <boxGeometry args={[5, 0.2, 5]} />
+          <meshStandardMaterial color={"moccasin"} />
+        </mesh>
+      </RigidBody>
+
+      {/* Elevating platform */}
+      <RigidBody
+        type="kinematicPosition"
+        position={[-25, 0, 0]}
+        ref={verticalMovePlatformRef}
+        colliders={false}
+      >
+        <Text
+          scale={0.5}
+          color="black"
+          maxWidth={10}
+          textAlign="center"
+          position={[0, 2.5, 0]}
+          rotation={[0, Math.PI / 2, 0]}
+        >
+          Kinematic Elevating Platform
+        </Text>
+        <CuboidCollider args={[2.5, 0.1, 2.5]} />
+        <mesh receiveShadow castShadow>
+          <boxGeometry args={[5, 0.2, 5]} />
+          <meshStandardMaterial color={"moccasin"} />
+        </mesh>
+      </RigidBody>
+
+      {/* Rotating Platform */}
+      <RigidBody
+        type="kinematicPosition"
+        position={[-25, -0.5, -10]}
+        ref={rotatePlatformRef}
+        colliders={false}
+      >
+        <Text
+          scale={0.5}
+          color="black"
+          maxWidth={10}
+          textAlign="center"
+          position={[0, 2.5, 0]}
+        >
+          Kinematic Rotating Platform
+        </Text>
+        <CuboidCollider args={[2.5, 0.1, 2.5]} />
+        <mesh receiveShadow castShadow>
+          <boxGeometry args={[5, 0.2, 5]} />
+          <meshStandardMaterial color={"moccasin"} />
+        </mesh>
+      </RigidBody>
+
+      {/* Rotating drum */}
+      <Text
+        scale={0.5}
+        color="black"
+        maxWidth={10}
+        textAlign="center"
+        position={[-15, 2.5, -15]}
+      >
+        Kinematic Rotating Drum
+      </Text>
+      <RigidBody
+        colliders={false}
+        type="kinematicPosition"
+        position={[-15, -1, -15]}
+        ref={rotationDrumRef}
+      >
+        <group rotation={[0, 0, Math.PI / 2]}>
+          <CylinderCollider args={[5, 1]} />
+          <mesh receiveShadow>
+            <cylinderGeometry args={[1, 1, 10]} />
+            <meshStandardMaterial color={"moccasin"} />
+          </mesh>
+        </group>
+      </RigidBody>
+    </>
+  );
+}