code upload

src/components/PointViewer/index.jsx

@@ -8,15 +8,21 @@
  *
  * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
  */
-import { Gltf, OrbitControls, Stage, useGLTF } from "@react-three/drei";
+import { Gltf, OrbitControls, Stage } 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";
+import { useEffect, useMemo, useRef, useState } from "react";
+import "./index.less";
 
 function Sphere({ position, CoordinatePoint, CurGongjianPoint }) {
   const meshRef = useRef();
+  const { camera } = useThree();
+
+  useEffect(() => {
+    setTimeout(() => {
+    camera.lookAt(0, 0, 0); // 设置相机指向原点
+    }, 200);
+  }, [camera]);
 
   return (
     <mesh
@@ -25,41 +31,28 @@ function Sphere({ position, CoordinatePoint, CurGongjianPoint }) {
       position={
         position
           ? Object.values(position)?.map((it, i) => {
-              const offset = Object.values(CoordinatePoint);
-              const offset1 = Object.values(CurGongjianPoint);
-              let res =
-                parseFloat(it * 10000000) +
-                parseFloat(offset[i] * 10000000000) -
-                parseFloat(offset1[i] * 10000000000);
-              res = res / 10000000000;
-              const diyoffset = i === 0 ? 0.021 : i === 1 ? 0.012 : 0.005;
-              return (res + diyoffset) * 100;
+              return it;
             })
           : []
       }
     >
-      <sphereGeometry attach="geometry" args={[0.006, 32, 32]} />
+      <sphereGeometry attach="geometry" args={[0.1, 32, 32]} />
       <meshPhysicalMaterial attach="material" color="red" />
     </mesh>
   );
 }
 
-const Model = ({ url }) => {
-  const { camera } = useThree();
-  const cameraRef = useRef(camera);
-  const { scene } = useGLTF(url);
+const Model = ({ url, rotation, scale }) => {
   const [position, setPosition] = useState([0, 0, 0]);
+  console.log("====================================");
+  console.log(rotation, scale);
+  console.log("====================================");
 
-  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]);
+  const rotations = useMemo(() => {
+    return rotation.map((it, i) => {
+      return it * (Math.PI / 180);
+    });
+  }, [rotation]);
 
   return (
     <Gltf
@@ -67,7 +60,8 @@ const Model = ({ url }) => {
       receiveShadow
       castShadow
       position={position}
-      scale={240}
+      rotation={rotations}
+      scale={scale * 1000}
       inject={
         <meshPhysicalMaterial
           color="white"
@@ -85,16 +79,10 @@ function PointViewer({
   CurGongjianPoint,
   CurGongjianData,
 }) {
-  console.log("====================================");
-  console.log(CurGongjianData);
-  console.log("====================================");
-
   const [url, seturl] = useState(null);
-
-  useTimeout(()=>{
-    seturl(`./glb/${CurGongjianData.ModelPath}.glb`)
-  },100)
-
+  useTimeout(() => {
+    seturl(`./glb/${CurGongjianData.ModelPath}.glb`);
+  }, 100);
 
   return (
     <div className="bar-block-component">
@@ -102,8 +90,8 @@ function PointViewer({
         <Canvas
           shadows
           dpr={[1, 1.5]}
+          camera={{ position: [8, 8, 16] }}
           gl={{ antialias: true }}
-          camera={{ position: [8, 8, 16], fov: 75 }}
           style={{ height: "100%", width: "100%" }}
           id={"rrt"}
         >
@@ -118,9 +106,18 @@ function PointViewer({
               files: "env.hdr",
             }}
           >
-            <axesHelper args={[20]} position={[0, 0, 0]}></axesHelper>
+            <OrbitControls target={[0, 0, 0]}></OrbitControls>
+            <axesHelper args={[1000]} position={[0, 0, 0]}></axesHelper>
             {url && (
-              <Model url={url}></Model>
+              <Model
+                url={url}
+                rotation={CurGongjianData?.LocalRotation}
+                scale={
+                  CurGongjianData.ScalingRatio
+                    ? parseInt(CurGongjianData.ScalingRatio)
+                    : 1
+                }
+              ></Model>
             )}
             <Sphere
               position={position}
@@ -128,7 +125,6 @@ function PointViewer({
               CurGongjianPoint={CurGongjianPoint}
             ></Sphere>
           </Stage>
-          <OrbitControls></OrbitControls>
         </Canvas>
       )}
     </div>