setup three.js in react and add mesh example

package-lock.json

@@ -21,11 +21,13 @@
         "react-router-dom": "^6.4.0",
         "react-scripts": "^2.1.3",
         "socket.io-client": "^4.5.1",
+        "three": "^0.145.0",
         "typescript": "^4.7.4",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "@types/google-protobuf": "^3.15.6"
+        "@types/google-protobuf": "^3.15.6",
+        "@types/three": "^0.144.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -2217,6 +2219,21 @@
         "@types/jest": "*"
       }
     },
+    "node_modules/@types/three": {
+      "version": "0.144.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.144.0.tgz",
+      "integrity": "sha512-psvEs6q5rLN50jUYZ3D4pZMfxTbdt3A243blt0my7/NcL6chaCZpHe2csbCtx0SOD9fI/XnF3wnVUAYZGqCSYg==",
+      "dev": true,
+      "dependencies": {
+        "@types/webxr": "*"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.0.tgz",
+      "integrity": "sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==",
+      "dev": true
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.7.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.6.tgz",
@@ -18311,6 +18328,11 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "node_modules/three": {
+      "version": "0.145.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.145.0.tgz",
+      "integrity": "sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw=="
+    },
     "node_modules/throat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
@@ -21615,6 +21637,21 @@
         "@types/jest": "*"
       }
     },
+    "@types/three": {
+      "version": "0.144.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.144.0.tgz",
+      "integrity": "sha512-psvEs6q5rLN50jUYZ3D4pZMfxTbdt3A243blt0my7/NcL6chaCZpHe2csbCtx0SOD9fI/XnF3wnVUAYZGqCSYg==",
+      "dev": true,
+      "requires": {
+        "@types/webxr": "*"
+      }
+    },
+    "@types/webxr": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.0.tgz",
+      "integrity": "sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==",
+      "dev": true
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.6.tgz",
@@ -34437,6 +34474,11 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "three": {
+      "version": "0.145.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.145.0.tgz",
+      "integrity": "sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw=="
+    },
     "throat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "react-router-dom": "^6.4.0",
     "react-scripts": "^2.1.3",
     "socket.io-client": "^4.5.1",
+    "three": "^0.145.0",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
@@ -44,6 +45,7 @@
     ]
   },
   "devDependencies": {
-    "@types/google-protobuf": "^3.15.6"
+    "@types/google-protobuf": "^3.15.6",
+    "@types/three": "^0.144.0"
   }
 }

src/App.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import "./App.css";
 import JoinRoom from "./JoinRoom";
 import WaitRoom from "./WaitRoom";
+import ThreeJs from "./ThreeJs";
 import { Routes, Route } from "react-router-dom";
 
 function App() {
@@ -9,6 +10,7 @@ function App() {
     <Routes>
       <Route path="/" element={<JoinRoom />} />
       <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
+      <Route path="/three.js" element={<ThreeJs />} />
     </Routes>
   );
 }

src/ThreeJs.tsx

+import React, { useRef, useEffect } from "react";
+import * as THREE from "three";
+
+export default function ThreeJs() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current });
+      const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 5);
+      const scene = new THREE.Scene();
+
+      const geometry = new THREE.BoxGeometry(1, 1, 1);
+      const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 });
+      const cube = new THREE.Mesh(geometry, material);
+      scene.add(cube);
+
+      const light = new THREE.DirectionalLight(0xffffff, 1);
+      light.position.set(-1, 2, 4);
+      scene.add(light);
+
+      camera.position.z = 2;
+
+      const render = (time: number) => {
+        time = time * 0.001;
+        cube.rotation.x = time;
+        cube.rotation.y = time;
+        renderer.render(scene, camera);
+        window.requestAnimationFrame(render);
+      };
+      window.requestAnimationFrame(render);
+    }
+  }, [canvasRef]);
+
+  return <canvas ref={canvasRef} />;
+}