kiill

config/env.ts

 export default {
   dev: {
-    REACT_APP_URL: "http://jmcl.nangaoyun.com/vstp", //  http://tasks-dev.nangaoyun.com
+    REACT_APP_URL: "/vstp", //  http://tasks-dev.nangaoyun.com
     DEFAULT_HEAD_IMG: "./assets/images/avatars/avatar_21.jpg",
     DEFAULT_404_IMG: "./assets/illustrations/illustration_404.svg",
     DOWNLOAD_URL: "http://192.168.40.2",

config/proxy.ts

@@ -22,7 +22,7 @@
 export default {
   dev: {
     "/vstp/": {
-      target: "http://jmcl.nangaoyun.com/vstp/", // "http://jmcl.nangaoyun.com/vstp/",
+      target: "http://192.168.40.146:8044/", // "http://jmcl.nangaoyun.com/vstp/",
       changeOrigin: true,
       // pathRewrite: { "^/vstp": "" },
     },

src/components/PointViewer/index.jsx

@@ -8,10 +8,12 @@
  *
  * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
  */
-import { Gltf, OrbitControls, Stage } from "@react-three/drei";
-import { Canvas } from "@react-three/fiber";
-import { useRef } from "react";
+import { Gltf, OrbitControls, Stage, useGLTF } from "@react-three/drei";
+import { Canvas, useThree } from "@react-three/fiber";
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
 import "./index.less";
+import { useTimeout } from "ahooks";
 
 function Sphere({ position, CoordinatePoint, CurGongjianPoint }) {
   const meshRef = useRef();
@@ -42,19 +44,70 @@ function Sphere({ position, CoordinatePoint, CurGongjianPoint }) {
   );
 }
 
-function PointViewer({ position, CoordinatePoint, CurGongjianPoint }) {
+const Model = ({ url }) => {
+  const { camera } = useThree();
+  const cameraRef = useRef(camera);
+  const { scene } = useGLTF(url);
+  const [position, setPosition] = useState([0, 0, 0]);
+
+  useEffect(() => {
+    // 计算模型的包围盒
+    const box = new THREE.Box3().setFromObject(scene);
+    const center = new THREE.Vector3();
+    box.getCenter(center);
+    let position = [-center.x * 240, -center.y * 240, -center.z * 240];
+    setPosition(position);
+    cameraRef.current.position.set(8, 8, 16); // 设置摄像机位置为 (5, 5, 5)
+    cameraRef.current.lookAt(0, 0, 0); // 使摄像机指向原点
+  }, [scene]);
+
+  return (
+    <Gltf
+      src={url}
+      receiveShadow
+      castShadow
+      position={position}
+      scale={240}
+      inject={
+        <meshPhysicalMaterial
+          color="white"
+          metalness={1} // 控制金属感，1 表示完全金属
+          roughness={0} // 控制光滑度，0 表示非常光滑
+        />
+      }
+    />
+  );
+};
+
+function PointViewer({
+  position,
+  CoordinatePoint,
+  CurGongjianPoint,
+  CurGongjianData,
+}) {
+  console.log("====================================");
+  console.log(CurGongjianData);
+  console.log("====================================");
+
+  const [url, seturl] = useState(null);
+
+  useTimeout(()=>{
+    seturl(`./glb/${CurGongjianData.ModelPath}.glb`)
+  },100)
+
+
   return (
     <div className="bar-block-component">
       {CurGongjianPoint && (
         <Canvas
           shadows
           dpr={[1, 1.5]}
-          gl={{ antialias: false }}
+          gl={{ antialias: true }}
           camera={{ position: [8, 8, 16], fov: 75 }}
           style={{ height: "100%", width: "100%" }}
-          id={"sada"}
+          id={"rrt"}
         >
-          <color attach="background" args={["white"]} />
+          <color attach="background" args={["#333"]} />
           <Stage
             intensity={0.5}
             preset="rembrandt"
@@ -65,21 +118,10 @@ function PointViewer({ position, CoordinatePoint, CurGongjianPoint }) {
               files: "env.hdr",
             }}
           >
-            <axesHelper args={[20]}></axesHelper>
-            <Gltf
-              src={"./model.glb"}
-              receiveShadow
-              castShadow
-              position={[0, 0, 0]}
-              scale={240}
-              inject={
-                <meshPhysicalMaterial
-                  color="white"
-                  metalness={1} // 控制金属感，1 表示完全金属
-                  roughness={0} // 控制光滑度，0 表示非常光滑
-                />
-              }
-            />
+            <axesHelper args={[20]} position={[0, 0, 0]}></axesHelper>
+            {url && (
+              <Model url={url}></Model>
+            )}
             <Sphere
               position={position}
               CoordinatePoint={CoordinatePoint}

src/pages/checkhomework/index.jsx

@@ -475,13 +475,14 @@ function Checkhomework() {
             <div style={{ position: "relative", minHeight: 360 }}>
               <Drawer
                 {...drawer}
-                getContainer={false}
+                width={"100%"} //fixer
                 title={false}
                 closable={false}
                 destroyOnClose
               >
                 <PointViewer
                   position={drawer?.position}
+                  CurGongjianData={dialogprops?.tabdata?.CurGongjianData}
                   CoordinatePoint={dialogprops?.tabdata?.CoordinatePoint}
                   CurGongjianPoint={dialogprops?.tabdata?.CurGongjianPoint}
                 ></PointViewer>

src/pages/myrecord/index.jsx

@@ -266,13 +266,14 @@ function Record() {
           <div style={{ position: "relative", minHeight: 360 }}>
             <Drawer
               {...drawer}
-              getContainer={false}
+              width={"100%"} //fixer
               title={false}
               closable={false}
               destroyOnClose
             >
               <PointViewer
                 position={drawer?.position}
+                CurGongjianData={dialogprops?.tabdata?.CurGongjianData}
                 CoordinatePoint={dialogprops?.tabdata?.CoordinatePoint}
                 CurGongjianPoint={dialogprops?.tabdata?.CurGongjianPoint}
               ></PointViewer>

src/pages/rebustrain/index.jsx

@@ -435,13 +435,14 @@ function Dolessons() {
             <div style={{ position: "relative", minHeight: 360 }}>
               <Drawer
                 {...drawer}
-                getContainer={false}
+                width={"100%"} //fixer
                 title={false}
                 closable={false}
                 destroyOnClose
               >
                 <PointViewer
                   position={drawer?.position}
+                  CurGongjianData={dialogprops?.tabdata?.CurGongjianData}
                   CoordinatePoint={dialogprops?.tabdata?.CoordinatePoint}
                   CurGongjianPoint={dialogprops?.tabdata?.CurGongjianPoint}
                 ></PointViewer>