Merge branch 'master' of http://git.fmode.cn:3000/fmode/ng-case

src/app/app-routing.module.ts

@@ -31,7 +31,7 @@ const routes: Routes = [
       },
       {
         path: 'babylon',
-        loadChildren: () => import('../modules/study/case-js-module/case-babylon/case-babylon.module').then( m => m.CaseBabylonPageModule)
+        loadChildren: () => import('../modules/babylon/pages/case-babylon/case-babylon.module').then( m => m.CaseBabylonPageModule)
       },
       {
         path: 'parse',

src/modules/babylon/README.md

@@ -0,0 +1,30 @@
+# WebGPU Babylon教学案例库
+
+
+
+# 模型素材
+- 中国城市lowpoly
+    - DIR https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-city-lowpoly/gltf/
+    - FILE scene.gltf
+- 中国象棋
+    - DIR https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-chess/gltf/
+    - FILE scene.gltf
+- 古风少女
+    - DIR https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/ancient-chinese-woman/gltf/
+    - FILE scene.gltf
+- 古风少年
+    - https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/ancient-chinese-man/README.md
+- 卡通异瞳少女
+    - DIR https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/vtuber-selen/gltf/
+    - FILE scene.gltf
+- 中国老杯子
+    - DIR https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-iron-cup/
+    - FILE scene.gltf
+
+## 上传格式
+- OBS对象KEY
+    - /storage/3d/model/<model_name>/gltf/scene.gltf
+- OBS命令行
+    - obsutil sync ../model/ obs://nova-cloud/storage/3d/model/
+- 本地临时存储
+    - ~/Downloads/model/<model_name>/gltf/scene.gltf

src/modules/babylon/pages/case-babylon/case-babylon.page.scss

@@ -0,0 +1,43 @@
+// 调试面板
+#scene-explorer-host {
+    position: absolute !important;
+}
+#sceneExplorer{
+    position:absolute!important;
+    height:100vh!important;
+}
+.babylonDebugLayer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 300px; /* 调试层的宽度 */
+    background-color: rgba(255, 255, 255, 0.8); /* 背景颜色和透明度 */
+    z-index: 20; /* 确保调试层在最顶层 */
+    overflow: auto; /* 如果内容过多，添加滚动条 */
+  }
+  
+  .babylonDebugLayer .content {
+    padding: 10px;
+  }
+
+// 展示区
+#renderCanvas {
+    width: 100vw;
+    height: 100vh;
+    display: block;
+    font-size: 0;
+    z-index: 1;
+}
+
+.list{
+    position: absolute;
+    top:20px;
+    z-index: 10;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    .character{
+        
+    }
+}

src/modules/study/case-js-module/case-babylon/case-babylon.page.ts → src/modules/babylon/pages/case-babylon/case-babylon.page.ts

@@ -21,16 +21,22 @@ export class CaseBabylonPage implements OnInit {
 
   CharacterMap:any = {}
   CharacterMeshList = [
-    {
-      name:"机器人",
-      dirPath:"assets/3dmodel/robot_rk11/",
-      filePath:"scene.gltf"
-    },
-    {
-      name:"卡通人",
-      dirPath:"assets/3dmodel/vtuber/",
-      filePath:"scene.gltf"
-    }
+    {name:"古风少女",
+    dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/ancient-chinese-woman/gltf/",
+    filePath:"scene.gltf"},
+    {name:"中国象棋",
+    dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-chess/gltf/",
+    filePath:"scene.gltf"},
+    {name:"卡通异瞳少女",
+    dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/vtuber-selen/gltf/",
+    filePath:"scene.gltf"},
+    {name:"中国老杯子",
+    dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-iron-cup/",
+    filePath:"scene.gltf"},
+    {name:"中国城市lowpoly",
+    dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-city-lowpoly/gltf/",
+    filePath:"scene.gltf"},
+
   ]
   constructor() { }
 
@@ -56,7 +62,8 @@ export class CaseBabylonPage implements OnInit {
     
     // 设置初始相机
     // Add an ArcRotateCamera to the scene and attach it to the canvas
-    let initPositon = new BABYLON.Vector3(0,12,0)
+    // let initPositon = new BABYLON.Vector3(0,12,0)
+    let initPositon = new BABYLON.Vector3(0,0,0)
     let beta = Math.PI / 2.5 // 镜头初始 纬度 Math.PI / 3 斜下45度
     let radius = 20 // 镜头初始半径
     const camera = new BABYLON.ArcRotateCamera('camera1', Math.PI / 2, beta, radius, initPositon, this.scene);
@@ -89,6 +96,9 @@ export class CaseBabylonPage implements OnInit {
       this.scene?.render();
     });
 
+    // 开启调试层，用于抓取角度
+    this.scene.debugLayer.show();
+
     // Watch for browser/canvas resize events
     window.addEventListener('resize', () => {
       this.engine?.resize();

src/modules/study/case-js-module/case-babylon/case-babylon.page.scss

@@ -1,20 +0,0 @@
-
-#renderCanvas {
-    width: 100vw;
-    height: 100vh;
-    display: block;
-    font-size: 0;
-    z-index: 1;
-}
-
-.list{
-    position: absolute;
-    top:20px;
-    z-index: 10;
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    .character{
-        
-    }
-}