links

src/pages/models/M8.jsx

-
-
-
-import React, { useRef } from "react";
-import { useGLTF } from "@react-three/drei";
-
-export default function M8(props) {
-  const { nodes, materials } = useGLTF(require(`@/assets/obj/M8.gltf`));
-  return (
-    <group {...props} dispose={null} scale={0.002}>
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes["body277381_no_0,_0"].geometry}
-        material={materials["body277381_no_0,_0"]}
-      />
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes["body285531_no_0,_0"].geometry}
-        material={materials["body285531_no_0,_0"]}
-      />
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes["body713310_no_0,_0"].geometry}
-        material={materials["body713310_no_0,_0"]}
-      />
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes["body713293_no_0,_0"].geometry}
-        material={materials["body713293_no_0,_0"]}
-      />
-    </group>
-  );
-}
-
-useGLTF.preload(require(`@/assets/obj/M8.gltf`));
-

src/pages/models/T360.jsx

-import React, { useRef } from "react";
-import { useGLTF } from "@react-three/drei";
-
-export default function T360(props) {
-  const { nodes, materials } = useGLTF(require(`@/assets/obj/T360.gltf`));
-  return (
-    <group  dispose={null} scale={0.002}>
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes["body1159053_no_0,_0"].geometry}
-        material={materials["body1159053_no_0,_0"]}
-      >
-        <meshBasicMaterial color="rgb(56, 20, 30)" />
-        <meshPhysicalMaterial color="rgb(56, 20, 30)" />
-
-      </mesh>
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes["body1143322_no_0,_0"].geometry}
-        material={materials["body1143322_no_0,_0"]}
-      />
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes["body1158466_no_0,_0"].geometry}
-        material={materials["body1158466_no_0,_0"]}
-      />
-    </group>
-  );
-}
-
-useGLTF.preload(require(`@/assets/obj/T360.gltf`));

src/pages/models/gltf.jsx

+import * as THREE from "three";
+import { Canvas } from "@react-three/fiber";
+import { useLoader } from "@react-three/fiber";
+import React, { useMemo, Suspense } from "react";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { useGLTF } from "@react-three/drei";
+
+const statusbar = {
+  1: "lightblue",
+};
+
+const Mesh = (props) => {
+  let { name, path, position, status, scale } = props;
+  const { nodes } = useGLTF(props.path);
+
+  return (
+    <group {...props} dispose={null}>
+      {Object.keys(nodes).map((it, i) => {
+        return (
+          <mesh
+            geometry={nodes[it].geometry}
+            scale={scale??0.002}
+          >
+            <meshPhysicalMaterial
+              color={statusbar[status]}
+              envMap={"lightblue"}
+              //transparent={true} //是否支持透明度
+              // opacity={0.5} //透明度
+              //visible={true}//是否可见
+              wireframe={false} //线框化
+              //metalness={1} //金属性贴图
+              roughness={0} //粗糙程度 越精细镜面效果越强
+              clearcoat={1} // 透明漆 罩光漆
+              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
+              // reflectivity={1} //光的 反射率
+            />
+          </mesh>
+        );
+      })}
+    </group>
+  );
+};
+
+export default function Model(props) {
+  return (
+    <Suspense fallback={null}>
+      <Mesh
+        {...props}
+        path={require(`@/assets/gltf/${props?.modelname}.glb`)}
+      />
+    </Suspense>
+  );
+}
+
+const arr = ["M8", "T360", "M850"].map((it) => {
+  return require(`@/assets/gltf/${it}.glb`);
+});
+
+useGLTF.preload(arr);

src/pages/models/index.jsx

@@ -5,22 +5,33 @@ import { Environment, OrbitControls } from "@react-three/drei";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import React, { useMemo, Suspense } from "react";
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
 const statusbar = {
-  1:"lightblue"
+  1: "lightblue",
 };
 
-const Mesh = ({ path, position,status,rotation }) => {
+const Mesh = ({ name,path, position, status, rotation }) => {
   const obj = useLoader(OBJLoader, path);
-  const geometry = useMemo(() => {
-    let g;
-    obj.traverse((c) => {
-        g = c.geometry;
-    });
-    return g;
-  }, [obj]);
+  // const geometry = useMemo(() => {
+  //   let g;
+  //   obj.traverse((c) => {
+  //     g = c.geometry;
+  //   });
+  //   return g;
+  // }, [obj]);
 
+  return (
+    <primitive
+      key={name}
+      object={obj}
+      position={position}
+      rotation={rotation ?? [0, 0, 0]}
+      scale={0.002}
+      castShadow
+      receiveShadow
+    />
+  );
   return (
     <mesh
       position={position}
@@ -28,7 +39,7 @@ const Mesh = ({ path, position,status,rotation }) => {
       scale={0.002}
       castShadow
       receiveShadow
-      rotation={rotation??[0,0,0]}
+      rotation={rotation ?? [0, 0, 0]}
     >
       <meshPhysicalMaterial
         color={statusbar[status]}
@@ -52,4 +63,4 @@ export default function Model(props) {
       <Mesh {...props} path={require(`@/assets/obj/${props?.modelname}.obj`)} />
     </Suspense>
   );
-}
\ No newline at end of file
+}

src/pages/threedire.js

@@ -27,7 +27,7 @@ import { useWebSocket, useFullscreen, useThrottle } from "ahooks";
 import { ShrinkOutlined, ArrowsAltOutlined } from "@ant-design/icons";
 import { Tooltip, notification } from "antd";
 import qs from "query-string";
-import Model from "./models";
+import Model from "./models/gltf";
 
 
 
@@ -66,17 +66,43 @@ const modelconfig = [
     rotation:[0,1.6,0]
   }, {
     name:"12",
-    position:[21, 10, -12],
+    position:[18, 0, -12.5],
     status:1,
     modelname:"T360",
+    scale:0.2,
+    rotation:[0,1.6,0]
+
   }, {
     name:"13",
-    position:[21, 0, -22],
+    position:[14, 0, -7],
     status:1,
     modelname:"T360",
+    scale:0.2,
+    
+  }, {
+    name:"14",
+    position:[18, 0, 6],
+    status:1,
+    modelname:"M850",
+  }, {
+    name:"15",
+    position:[18, 0, 14],
+    status:1,
+    modelname:"M8",
+  }, {
+    name:"16",
+    position:[18, 0, 23],
+    status:1,
+    modelname:"M8",
+  }, {
+    name:"17",
+    position:[9, 0, 24],
+    status:1,
+    modelname:"M1.4",
   }
 
 
+
 ]