Merge branch 'feature-show-sensor-line-chart' into main

package.json

@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.16",
+    "@mui/x-charts": "^7.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "three": "^0.164.1",

src/ThreeApp.js

@@ -76,7 +76,7 @@ function ThreeApp(canvas) {
       30,
       window.innerWidth / window.innerHeight,
       0.1,
-      3
+      1
     );
     const agent = new THREE.Object3D();
     const helper = new THREE.CameraHelper(firstPersonViewCamera);
@@ -109,15 +109,44 @@ function ThreeApp(canvas) {
 
     const sensorGroup = new THREE.Group();
     scene.add(sensorGroup);
-    const geometry = new THREE.SphereGeometry(0.5, 32, 16);
-    const material = new THREE.MeshPhongMaterial({
-      color: 0xff0000,
-    });
 
-    const sphere = new THREE.Mesh(geometry, material);
-    sensorGroup.add(sphere);
+    const COUNT = 5;
+    const colors = Array(COUNT)
+      .fill(0)
+      .map(
+        (_, index) =>
+          new THREE.Color(
+            `hsl(${Math.trunc((index / (COUNT - 1)) * 255)}, 50%, 50%)`
+          )
+      );
+    const positions = [
+      [-3.629, 1.807, -2.62],
+      [2.334, 3.22, 3.7855],
+      [3.31, 1.43, -2.86],
+      [-0.72, 1.4401589, 2.284],
+      [1.718, 3.26488, -0.764],
+    ];
+    const objects = colors.map((color, index) => {
+      const geometry = new THREE.SphereGeometry(0.5, 32, 16);
+      const material = new THREE.MeshBasicMaterial({
+        color,
+        wireframe: true,
+      });
+      const sphere = new THREE.Mesh(geometry, material);
+      sphere.position.fromArray(positions[index]);
+      sensorGroup.add(sphere);
+      return {
+        color,
+        object: sphere,
+      };
+    });
 
-    const getSensors = () => {};
+    const getSensors = () => {
+      return objects.map(({ object, color }) => ({
+        color,
+        position: object.position,
+      }));
+    };
 
     const onSelectSensor = (event) => {
       const mouse = new THREE.Vector2();

src/ThreeCanvas.jsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useRef, useState } from "react";
 import ThreeApp from "./ThreeApp";
+import { LineChart } from "@mui/x-charts";
 const FullScreenCanvas = () => {
+  const [chartData, setChartData] = useState(null);
   const [core, setCore] = useState(null);
-  const [isTeleport, setIsTeleport] = useState(true);
+  const [isTeleport, setIsTeleport] = useState(false);
   const canvasRef = useRef(null);
 
   useEffect(() => {
     const canvas = canvasRef.current;
     const threeApp = new ThreeApp(canvas);
+    threeApp.setCamera([-3.628, 0.427, 5.378], [-3.628, 0.427, 5.378 - 1]);
     setCore(threeApp);
   }, []);
 
@@ -16,7 +19,6 @@ const FullScreenCanvas = () => {
     const canvas = canvasRef.current;
     const onPointerUp = (e) => {
       const point = core.getPointFromClick(e);
-
       if (isTeleport) {
         if (point)
           core.setCamera(
@@ -30,6 +32,15 @@ const FullScreenCanvas = () => {
         const path = core.findPathTo(point);
 
         if (path) {
+          const sensors = core.getSensors();
+          const distanceToSensor = sensors.map(({ position, color }) => {
+            return {
+              data: path.map((point) => point.distanceTo(position)),
+              color: `#${color.getHexString()}`,
+            };
+          });
+          setChartData(distanceToSensor);
+
           core.setCamera(
             [path[0].x, path[0].y, path[0].z],
             [path[1].x, path[1].y, path[1].z]
@@ -52,10 +63,19 @@ const FullScreenCanvas = () => {
 
   return (
     <>
-      <div style={{ position: "absolute" }}>
+      <div style={{ position: "absolute", background: "rgba(0,0,0,0.1)" }}>
         <button onClick={() => setIsTeleport((prev) => !prev)}>
           {isTeleport ? "click to teleport" : "click to find path"}
         </button>
+
+        {chartData && (
+          <LineChart
+            xAxis={[{ data: chartData[0].data.map((_, index) => index) }]}
+            series={chartData}
+            width={500}
+            height={300}
+          />
+        )}
       </div>
       <canvas
         ref={canvasRef}