Commit a6c3fb4f authored by Chunchi Che's avatar Chunchi Che

Merge branch 'remove_three' into 'main'

remove unused three.js

See merge request mycard/Neos!51
parents 4f900064 dd67c115
......@@ -26,7 +26,6 @@
"react-router-dom": "^6.4.0",
"react-scripts": "^5.0.1",
"socket.io-client": "^4.5.1",
"three": "^0.145.0",
"web-vitals": "^2.1.4"
},
"devDependencies": {
......@@ -15297,11 +15296,6 @@
"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": "6.0.1",
"resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
......@@ -27329,11 +27323,6 @@
"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": "6.0.1",
"resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
......@@ -21,7 +21,6 @@
"react-router-dom": "^6.4.0",
"react-scripts": "^5.0.1",
"socket.io-client": "^4.5.1",
"three": "^0.145.0",
"web-vitals": "^2.1.4"
},
"scripts": {
......
import React from "react";
import JoinRoom from "./JoinRoom";
import WaitRoom from "./WaitRoom";
import ThreeJs from "./ThreeJs";
import { Routes, Route } from "react-router-dom";
import Mora from "./Mora";
import Duel from "./Duel/mod";
......@@ -14,7 +13,6 @@ export default function () {
<Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
<Route path="/mora" element={<Mora />} />
<Route path="/duel" element={<Duel />} />
<Route path="/three" element={<ThreeJs />} />
</Routes>
);
}
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} />;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment