Useless3d

package.json

@@ -35,6 +35,7 @@
     "redux-persist": "^6.0.0",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.0.4",
+    "three": "^0.136.0",
     "typescript": "^4.5.4",
     "uuid": "^8.3.2",
     "web-vitals": "^1.1.2"

src/components/Home/AnimatedLogo/AnimatedLogo.test.tsx

@@ -0,0 +1,6 @@
+import { render } from "@testing-library/react";
+import AnimatedLogo from "./AnimatedLogo";
+
+it("renders without crashing", () => {
+    render(<AnimatedLogo />);
+});

src/components/Home/AnimatedLogo/AnimatedLogo.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+import * as THREE from "three/build/three.module";
+import PaddleSceneJson from "./scene.json";
+
+/**
+ * AnimatedLogo component in QuickHit.
+ */
+function AnimatedLogo(): JSX.Element {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let camera: any, scene: any, renderer: any;
+
+    function init(): void {
+        camera = new THREE.PerspectiveCamera(70, 400 / 150, 0.01, 10);
+        camera.position.x = 0;
+        camera.position.y = 0.75;
+        camera.position.z = 0;
+        scene = new THREE.ObjectLoader().parse(PaddleSceneJson);
+        scene.getObjectByName("Group").position.x = 0;
+        scene.getObjectByName("Group").position.z = -3.5;
+
+        renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(400, 150);
+        renderer.setAnimationLoop(animation);
+		renderer.shadowMap.enabled = true;
+		renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+		const useless3DDiv = document.getElementById("useless3D");
+        if (useless3DDiv) {
+            useless3DDiv.appendChild(renderer.domElement);
+        }
+    }
+
+    function animation(time: number): void {
+        scene.getObjectByName("Group").rotation.y = time / 3000;
+        renderer.render(scene, camera);
+    }
+
+    useEffect(() => {
+        init();
+    }, []);
+
+    return <div id={"useless3D"} />;
+}
+
+export default AnimatedLogo;