asder

package.json

@@ -119,6 +119,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-helmet": "^6.1.5",
+    "@types/three": "^0.159.0",
     "@umijs/lint": "^4.0.34",
     "@umijs/max": "^4.0.33",
     "cross-env": "^7.0.3",

src/components/PointViewer/index.jsx

@@ -8,26 +8,86 @@
  *
  * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
  */
-import { Gltf, OrbitControls } from "@react-three/drei";
+import { Gltf, OrbitControls, Stage } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import "./index.less";
 
-function PointViewer({ url }) {
-  
+function Sphere({ position, CoordinatePoint, CurGongjianPoint }) {
+  console.log({ position, CoordinatePoint, CurGongjianPoint });
+
+  return (
+    <mesh
+      scale={100}
+      position={
+        position
+          ? Object.values(position)?.map((it, i) => {
+              const offset = Object.values(CoordinatePoint);
+              const offset1 = Object.values(CurGongjianPoint);
+              const res =
+                parseFloat(it / 1000) +
+                parseFloat(offset[i]) -
+                parseFloat(offset1[i]);
+              console.log(res);
+              const diyoffset = i === 0 ? 0 : i === 1 ? 0.012 : 0.03;
+              return (res + diyoffset) * 100;
+            })
+          : []
+      }
+    >
+      <sphereGeometry attach="geometry" args={[0.002, 32, 32]} />
+      <meshPhysicalMaterial attach="material" color="red" />
+    </mesh>
+  );
+}
+
+function PointViewer({ position, CoordinatePoint, CurGongjianPoint }) {
   return (
     <div className="bar-block-component">
-      <Canvas style={{ height: "600px", width: "100%" }} id={"sada"}>
-        <color attach="background" args={["#333"]} />
-        <ambientLight intensity={1} />
-        <OrbitControls></OrbitControls>
-        <pointLight position={[10, 10, 10]} intensity={1} />
-        <Gltf
-          src={"./model.glb"}
-          receiveShadow
-          castShadow
-          position={[0, 0, 0]}
-        />
-      </Canvas>
+      {CurGongjianPoint && (
+        <Canvas
+          shadows
+          dpr={[1, 1.5]}
+          gl={{ antialias: false }}
+          camera={{ position: [8, 8, 16], fov: 75 }}
+          style={{ height: "100%", width: "100%" }}
+          id={"sada"}
+        >
+          <color attach="background" args={["white"]} />
+          <Stage
+            intensity={0.5}
+            preset="rembrandt"
+            shadows={"contact"}
+            adjustCamera={1}
+            environment={{
+              path: "/",
+              files: "env.hdr",
+            }}
+          >
+            <axesHelper args={[20]}></axesHelper>
+
+            <Gltf
+              src={"./model.glb"}
+              receiveShadow
+              castShadow
+              position={[0, 0, 0]}
+              scale={250}
+              inject={
+                <meshPhysicalMaterial
+                  color="white"
+                  metalness={1} // 控制金属感，1 表示完全金属
+                  roughness={0} // 控制光滑度，0 表示非常光滑
+                />
+              }
+            />
+            <Sphere
+              position={position}
+              CoordinatePoint={CoordinatePoint}
+              CurGongjianPoint={CurGongjianPoint}
+            ></Sphere>
+          </Stage>
+          <OrbitControls></OrbitControls>
+        </Canvas>
+      )}
     </div>
   );
 }

src/components/PointViewer/index.less

@@ -8,6 +8,7 @@
   position: relative;
   background-color: #f0f0f0;
   box-shadow: 0 5px 20px rgba(192,57,43,.1);
+  height: calc(100% - 24px) !important;
 }
 .bar-block-component, .foo-block-element {
   margin: 10px;

src/pages/checkhomework/index.jsx

@@ -466,9 +466,18 @@ function Checkhomework() {
 
             <Divider></Divider>
 
-            <div style={{ position: "relative" }}>
-              <Drawer {...drawer} getContainer={false} title={false} closable={false}>
-                <PointViewer></PointViewer>
+            <div style={{ position: "relative", minHeight: 360 }}>
+              <Drawer
+                {...drawer}
+                getContainer={false}
+                title={false}
+                closable={false}
+              >
+                <PointViewer
+                  position={drawer?.position}
+                  CoordinatePoint={dialogprops?.tabdata?.CoordinatePoint}
+                  CurGongjianPoint={dialogprops?.tabdata?.CurGongjianPoint}
+                ></PointViewer>
               </Drawer>
               <b style={{ fontSize: 14, paddingBottom: 10, display: "block" }}>
                 实验报告