ader

frontend/config/routes.js

+/*
+ * @Author: wuhao930406 1148547900@qq.com
+ * @Date: 2023-10-17 10:14:53
+ * @LastEditors: wuhao930406 1148547900@qq.com
+ * @LastEditTime: 2023-10-19 14:58:59
+ * @FilePath: /standaloneframe/frontend/config/routes.js
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
+ */
 export default [
   {
     path: "/user",
@@ -32,10 +42,16 @@ export default [
         path: '/report',
         component: './report',
       },
+      {
+        name: '看板',
+        path: '/dashboard',
+        component: './dashboard',
+      },
       {
         name: '个人中心',
         path: '/mycenter',
         component: './mycenter',
+        hideInMenu: true
       },
     ],
   },

frontend/package.json

@@ -11,6 +11,9 @@
   "dependencies": {
     "@ant-design/icons": "^5.1.4",
     "@ant-design/pro-components": "^2.5.2",
+    "@react-three/drei": "^9.88.4",
+    "@react-three/fiber": "^8.14.6",
+    "@types/three": "^0.157.0",
     "ahooks": "^3.7.7",
     "antd": "^5.5.2",
     "antd-img-crop": "^4.12.2",
@@ -18,6 +21,7 @@
     "react-resizable": "^3.0.5",
     "react-reveal": "^1.2.2",
     "techui-react-lite": "^0.0.6",
+    "three": "^0.157.0",
     "umi": "^4.0.69",
     "umi-request": "^1.4.0"
   },

frontend/src/.umi/core/route.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 
 export async function getRoutes() {
-  const routes = {"1":{"path":"/user","parentId":"@@/global-layout","id":"1"},"2":{"path":"/user","redirect":"/user/login","parentId":"1","id":"2"},"3":{"name":"登录","path":"/user/login","parentId":"1","id":"3"},"4":{"path":"/","name":"欢迎使用","parentId":"@@/global-layout","id":"4"},"5":{"path":"/","redirect":"/port","parentId":"4","id":"5"},"6":{"name":"报单","path":"/port","parentId":"4","id":"6"},"7":{"name":"退货单","path":"/report","parentId":"4","id":"7"},"8":{"name":"个人中心","path":"/mycenter","parentId":"4","id":"8"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
+  const routes = {"1":{"path":"/user","parentId":"@@/global-layout","id":"1"},"2":{"path":"/user","redirect":"/user/login","parentId":"1","id":"2"},"3":{"name":"登录","path":"/user/login","parentId":"1","id":"3"},"4":{"path":"/","name":"欢迎使用","parentId":"@@/global-layout","id":"4"},"5":{"path":"/","redirect":"/port","parentId":"4","id":"5"},"6":{"name":"报单","path":"/port","parentId":"4","id":"6"},"7":{"name":"退货单","path":"/report","parentId":"4","id":"7"},"8":{"name":"看板","path":"/dashboard","parentId":"4","id":"8"},"9":{"name":"个人中心","path":"/mycenter","hideInMenu":true,"parentId":"4","id":"9"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
   return {
     routes,
     routeComponents: {
@@ -15,7 +15,8 @@ export async function getRoutes() {
 '5': React.lazy(() => import( './EmptyRoute')),
 '6': React.lazy(() => import(/* webpackChunkName: "p__port__index" */'@/pages/port/index.jsx')),
 '7': React.lazy(() => import(/* webpackChunkName: "p__report__index" */'@/pages/report/index.jsx')),
-'8': React.lazy(() => import(/* webpackChunkName: "p__mycenter__index" */'@/pages/mycenter/index.jsx')),
+'8': React.lazy(() => import(/* webpackChunkName: "p__dashboard__index" */'@/pages/dashboard/index.jsx')),
+'9': React.lazy(() => import(/* webpackChunkName: "p__mycenter__index" */'@/pages/mycenter/index.jsx')),
 '@@/global-layout': React.lazy(() => import(/* webpackChunkName: "layouts__index" */'/Users/wuhao/Desktop/demos/standaloneframe/frontend/src/layouts/index.jsx')),
 },
   };

frontend/src/layouts/layout.jsx

@@ -19,14 +19,14 @@ import { doFetch } from "@/utils/doFetch";
 import Fade from "react-reveal/Fade";
 import Headers from "./components/Header";
 import "./index.less";
+import routes from "../../config/routes";
 
 const { Header, Content, Footer, Sider } = Layout;
-const labels = ["报单", "退货单"];
-const paths = ["/port", "/report"];
-const items = [UserOutlined, VideoCameraOutlined].map((icon, index) => ({
-  key: paths[index],
-  icon: React.createElement(icon),
-  label: labels[index],
+const curroutes = routes?.filter(it=>it.path==="/")?.[0]?.routes?.filter(it=>it.name&&!it.hideInMenu)
+const items = curroutes.map((it, index) => ({
+  key: it.path,
+  //icon: React.createElement(icon),
+  label: it?.name,
 }));
 
 const Dashboard = () => {

frontend/src/pages/dashboard/index.jsx

+import * as THREE from "three";
+import React, { useRef, Suspense, memo, useState, useEffect } from "react";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { useGLTF, OrbitControls, useAnimations, Gltf } from "@react-three/drei";
+import {
+  Canvas,
+  useFrame,
+  extend,
+  useLoader,
+  useThree,
+  axesHelper,
+} from "@react-three/fiber";
+
+useGLTF.preload(require(`./model.glb`));
+
+const Mesh = (props) => {
+  const { scene, nodes, materials, animations } = useGLTF(props.path);
+  const { ref, mixer, names, actions, clips } = useAnimations(animations);
+  const index = 1;
+  //   let mixer = new THREE.AnimationMixer(model.scene);
+  //   model.animations.forEach((clip) => {
+  //     const action = mixer.clipAction(clip);
+  //     action.play();
+  //   });
+
+  //   useFrame((scene, delta) => {
+  //     mixer?.update(delta);
+  //   });
+
+  useEffect(() => {
+    // Reset and fade in animation after an index has been changed
+    actions[names[index]].reset().fadeIn(0.5).play();
+    // In the clean-up phase, fade it out
+    return () => actions[names[index]].fadeOut(0.5);
+    // In the clean-up phase, fade it out
+  }, [actions, names, nodes]);
+
+  //   <primitive
+  //   ref={ref}
+  //   object={nodes.Scene}
+  //   scale={0.1}
+  //   position={[0, 0, 0]}
+  // />
+  return (
+    <Gltf
+      ref={ref}
+      src={props.path}
+      receiveShadow
+      castShadow
+      scale={0.1}
+      position={[0, 0, 0]}
+      inject={
+        <meshPhysicalMaterial
+          color={"#fff"}
+          transparent={true} //是否支持透明度
+          opacity={1} //透明度
+          //visible={true}//是否可见
+          metalness={0.5} //金属性贴图
+          roughness={2} //粗糙程度 越精细镜面效果越强
+          clearcoat={1} // 透明漆 罩光漆
+          transmission={0.5} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
+          reflectivity={1} //光的 反射率
+        />
+      }
+    />
+  );
+};
+
+function Jixiebi(props) {
+  return (
+    <Suspense fallback={null}>
+      <Mesh {...props} path={require(`./model.glb`)} />
+    </Suspense>
+  );
+}
+
+const Jixie = memo(Jixiebi);
+
+function Dashboard({}) {
+  //  alert(0)
+  return (
+    <div style={{ height: "100%", width: "100%" }}>
+      <Canvas camera={[0, 0, 0]}>
+        <ambientLight />
+        <pointLight position={[10, 10, 10]} />
+        <OrbitControls />
+        <Jixie castShadow receiveShadow />
+      </Canvas>
+    </div>
+  );
+}
+
+
+export default Dashboard;