1

.claude/settings.local.json

@@ -1,12 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(cd /d/VscodeProject/zhengte.babylonjs-sdk && npm run build 2>&1 | head -50)",
-      "Bash(find \"D:\\\\VscodeProject\\\\zhengte.babylonjs-sdk\\\\src\" -name \"*.ts\" -type f -exec grep -l \"class Dictionary\" {} \\\\;)",
-      "Bash(find \"D:\\\\VscodeProject\\\\zhengte.babylonjs-sdk\\\\src\" -name \"*.ts\" -type f -exec grep -l \"class.*Kernel\\\\|export.*kernel\" {} \\\\;)",
-      "Bash(npm run *)",
-      "Bash(mysql -u root -p123456 zt)",
-      "Bash(mysql *)"
-    ]
-  }
-}

.gitignore

@@ -1,5 +1,14 @@
-/node_modules/
+# 大文件忽略
-/public/
+*.zip
-/dist/
+*.rar
-/assets/
+*.7z
-nul
+*.glb
+*.gltf
+*.png
+*.jpg
+*.jpeg
+node_modules/
+dist/
+build/
+.DS_Store
+*.log

API_USAGE_EXAMPLE.md

@@ -1,216 +0,0 @@
-# 模型管理 API 使用示例
-
-## API 说明
-
-### 1. 添加模型
-
-```javascript
-// 添加带有 rotation 控制类型的模型
-kernel.model.add({
-  modelId: "卷帘大",
-  modelUrl: "https://sdk.zguiy.com/resurces/model/卷帘大.glb",
-  modelControlType: "rotation"
-});
-
-// 添加带有 color 控制类型的模型
-kernel.model.add({
-  modelId: "小桌",
-  modelUrl: "https://sdk.zguiy.com/resurces/model/小桌.glb",
-  modelControlType: "color"
-});
-
-// 添加不带控制类型的模型
-kernel.model.add({
-  modelId: "框架",
-  modelUrl: "https://sdk.zguiy.com/resurces/model/框架.glb"
-});
-```
-
-### 2. 替换模型
-
-```javascript
-// 替换模型并指定控制类型
-kernel.model.replace({
-  modelId: "卷帘大",
-  modelUrl: "https://sdk.zguiy.com/resurces/model/新卷帘.glb",
-  modelControlType: "rotation"
-});
-```
-
-### 3. 模型变换 (Transform)
-
-```javascript
-// 设置模型旋转 - 直接使用角度（默认）
-kernel.transform.rotation({
-  modelId: "卷帘大",
-  vector3: { x: 0, y: 90, z: 0 }  // 绕Y轴旋转90度
-});
-
-// 更多角度示例
-kernel.transform.rotation({
-  modelId: "卷帘大",
-  vector3: { x: 0, y: 180, z: 0 }  // 旋转180度
-});
-
-kernel.transform.rotation({
-  modelId: "卷帘大",
-  vector3: { x: 45, y: 90, z: 0 }  // X轴45度，Y轴90度
-});
-
-// 如果需要使用弧度，设置 useDegrees: false
-kernel.transform.rotation({
-  modelId: "卷帘大",
-  vector3: { x: 0, y: Math.PI / 2, z: 0 },
-  useDegrees: false
-});
-
-// 设置模型位置
-kernel.transform.position({
-  modelId: "小桌",
-  vector3: { x: 10, y: 0, z: 5 }
-});
-
-// 设置模型缩放
-kernel.transform.scale({
-  modelId: "框架",
-  vector3: { x: 1.5, y: 1.5, z: 1.5 }  // 放大1.5倍
-});
-```
-
-### 4. 点击事件回调
-
-```javascript
-kernel.on('model:click', (data) => {
-  console.log('点击的网格名称:', data.meshName);
-  console.log('点击的网格对象:', data.pickedMesh);
-  console.log('点击的3D坐标:', data.pickedPoint);
-  console.log('材质名称:', data.materialName);
-  console.log('模型控制类型:', data.modelControlType); // 'rotation' | 'color' | undefined
-
-  // 根据控制类型执行不同操作
-  if (data.modelControlType === 'rotation') {
-    console.log('这是一个可旋转的模型');
-    // 执行旋转相关操作 - 直接使用角度
-    kernel.transform.rotation({
-      modelId: "卷帘大",
-      vector3: { x: 0, y: 180, z: 0 }
-    });
-  } else if (data.modelControlType === 'color') {
-    console.log('这是一个可改变颜色的模型');
-    // 执行颜色相关操作
-    kernel.material.color(data.materialName, '#FF0000');
-  }
-});
-```
-
-## ModelControlType 说明
-
-- `rotation`: 表示该模型支持旋转控制
-- `color`: 表示该模型支持颜色控制
-- `undefined`: 未指定控制类型
-
-## 完整示例
-
-```javascript
-import { kernel } from './index.js';
-
-const config = {
-  container: document.querySelector('#renderDom'),
-  modelUrlList: [],
-  env: { 
-    envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', 
-    intensity: 1.2, 
-    rotationY: 0.3, 
-    background: true 
-  },
-};
-
-kernel.init(config);
-
-// 添加多个模型
-kernel.model.add({
-  modelId: "框架",
-  modelUrl: "https://sdk.zguiy.com/resurces/model/框架.glb"
-});
-
-kernel.model.add({
-  modelId: "卷帘大",
-  modelUrl: "https://sdk.zguiy.com/resurces/model/卷帘大.glb",
-  modelControlType: "rotation"
-});
-
-kernel.model.add({
-  modelId: "小桌",
-  modelUrl: "https://sdk.zguiy.com/resurces/model/小桌.glb",
-  modelControlType: "color"
-});
-
-// 模型加载完成后设置变换
-kernel.on('model:loaded', () => {
-  // 设置初始位置
-  kernel.transform.position({
-    modelId: "小桌",
-    vector3: { x: 5, y: 0, z: 0 }
-  });
-
-  // 设置初始旋转 - 直接使用角度
-  kernel.transform.rotation({
-    modelId: "卷帘大",
-    vector3: { x: 0, y: 45, z: 0 }
-  });
-
-  // 设置缩放
-  kernel.transform.scale({
-    modelId: "框架",
-    vector3: { x: 1.2, y: 1.2, z: 1.2 }
-  });
-});
-
-// 监听点击事件
-kernel.on('model:click', (data) => {
-  console.log('模型点击数据:', data);
-  
-  if (data.modelControlType === 'rotation') {
-    // 处理旋转逻辑 - 每次点击旋转45度
-    kernel.transform.rotation({
-      modelId: data.meshName,
-      vector3: { x: 0, y: 45, z: 0 }
-    });
-  } else if (data.modelControlType === 'color') {
-    // 处理颜色变更逻辑
-    kernel.material.color(data.materialName, '#FF0000');
-  }
-});
-```
-
-## Transform API 详细说明
-
-### rotation - 旋转
-- 参数：`{ modelId: string, vector3: { x, y, z }, useDegrees?: boolean }`
-- **默认使用角度**：直接传递 90、180 等角度值
-- 如需使用弧度，设置 `useDegrees: false`
-- 示例：
-  ```javascript
-  // 使用角度（默认，推荐）
-  kernel.transform.rotation({
-    modelId: "model1",
-    vector3: { x: 0, y: 90, z: 0 }
-  });
-  
-  // 使用弧度
-  kernel.transform.rotation({
-    modelId: "model1",
-    vector3: { x: 0, y: Math.PI / 2, z: 0 },
-    useDegrees: false
-  });
-  ```
-
-### position - 位置
-- 参数：`{ modelId: string, vector3: { x, y, z } }`
-- 单位：场景单位
-- 坐标系：右手坐标系（X右，Y上，Z前）
-
-### scale - 缩放
-- 参数：`{ modelId: string, vector3: { x, y, z } }`
-- 单位：倍数（1.0 = 原始大小）
-- 可以设置不同轴向的缩放比例

examples/app-global.js

@@ -35,7 +35,7 @@ const init = async (customConfig = {}) => {
     const defaultConfig = {
         container: document.querySelector('#renderDom'),
         modelUrlList: [],
-        env: { envPath: 'https://cdn.files.zguiy.com/zt/environment.env', intensity: 1.2, rotationY: 0.3, background: false },
+        env: { envPath: 'https://cdn.files.zguiy.com/zt/environment.env', intensity: 1.5, rotationY: 0.3, background: false },
         gizmo: {
             position: false,
             rotation: false,
@@ -53,6 +53,7 @@ const init = async (customConfig = {}) => {
     // 合并用户自定义配置
     const config = { ...defaultConfig, ...customConfig };
     kernel.init(config);
+    await getAutoLoadModelList()
 }
 
 //初始化加载模型
@@ -97,10 +98,12 @@ const getPlacementZone = async (sku) => {
     let division_include = []
     // 同时包含10和13
     const only10_13 = /(?=.*10)(?=.*13)/.test(pergolaSku)
-    // 只包含10 无13 无12
+    // 只包含10 无13 无12 无20
-    const only10 = /(?=.*10)(?!.*13)(?!.*12)/.test(pergolaSku)
+    const only10 = /(?=.*10)(?!.*13)(?!.*12)(?!.*20)/.test(pergolaSku)
     // 同时包含10和12
     const only10_12 = /(?=.*10)(?=.*12)/.test(pergolaSku)
+    // 同时包含10和20
+    const only10_20 = /(?=.*10)(?=.*20)/.test(pergolaSku)
 
     // 1. 只要字符串里包含 10，就返回 true
     const has10 = /10/.test(sku);
@@ -131,6 +134,25 @@ const getPlacementZone = async (sku) => {
     if (only10_12 && has10) {
         division_include.push('左', '右')
     }
+    //棚子同时包10和20的并且含配件是10
+    if (only10_20 && has10) {
+
+        if (pergolaSku === "SPF111S1020PILLAR4PCS") {
+            division_include.push('左', '右')
+        }
+        else {
+            division_include.push('前', '后', '左', '右', "前1", "后1", "前2", "后2")
+        }
+    }
+
+    //棚子同时包10和20的并且含配件是13 
+    if (only10_20 && has13) {
+
+        if (pergolaSku === "SPF111S1020PILLAR4PCS") {
+            division_include.push('前', '后')
+        }
+    }
+
 
     const response = await fetch(getApiUrl(`/api/product-configs/by-sku/${sku}`));
     const result = await response.json();
@@ -181,48 +203,48 @@ const getEvent = async (dropzone_data, sku) => {
 
 //点击放置区域执行事件 一般是换配件
 const executeEvent = async (dropzone_data, result, sku) => {
-   const kernel = getKernel();
+    const kernel = getKernel();
-  
-      const { wallName, index, transform } = dropzone_data;
-      const { position, rotation } = transform;
-  
-      let modelId = null;  // 在外部声明，用于在两个循环之间传递
-      let modelName = null;
-      let pergolaSku = null;  // 用于存储棚子的 SKU
-   
-      // 第一次循环：处理 change_model
-      for (const event of result.data.events) {
-          if (event.event_type === 'change_model') {
-              const { name, file_url, model_control_type, category } = event.target_data;
 
-              // 生成唯一的模型ID
+    const { wallName, index, transform } = dropzone_data;
-              modelId = Date.now();
+    const { position, rotation } = transform;
-              modelName = name;
+
-              kernel.dropZone.recordModelPlacement(wallName, index, name + '_' + modelId);
+    let modelId = null;  // 在外部声明，用于在两个循环之间传递
-  
+    let modelName = null;
-              await kernel.model.add({
+    let pergolaSku = null;  // 用于存储棚子的 SKU
-                  modelName: name,
+
-                  modelId: modelId,
+    // 第一次循环：处理 change_model
-                  modelUrl: file_url,
+    for (const event of result.data.events) {
-                  modelControlType: model_control_type,
+        if (event.event_type === 'change_model') {
-                  drag: {
+            const { name, file_url, model_control_type, category } = event.target_data;
-                      enable: true,
+
-                      axis: rotation.y === 0 || rotation.y === 180 ? 'x' : 'z',
+            // 生成唯一的模型ID
-                      step: 0.1,
+            modelId = Date.now();
-                      snapToZone: true,              // 拖拽吸附到最近的分割区域
+            modelName = name;
-                      returnWhenOutOfBounds: true,  // 拖拽到区域外时返回原位置
+            kernel.dropZone.recordModelPlacement(wallName, index, name + '_' + modelId);
-                      handleOccupiedZone: true,     // 处理已占用区域（false=允许重叠）
+
-                      occupiedZoneAction: 'replace'   // 当开关3=true时的行为：'return'=返回原位置，'replace'=替换
+            await kernel.model.add({
-                  },
+                modelName: name,
-                  transform: {
+                modelId: modelId,
-                      position: position,
+                modelUrl: file_url,
-                      rotation: rotation,
+                modelControlType: model_control_type,
-                  }
+                drag: {
-              });
+                    enable: true,
-  
+                    axis: rotation.y === 0 || rotation.y === 180 ? 'x' : 'z',
-              console.log(`百叶模型已放置为 ${name + '_' + modelId}`);
+                    step: 0.1,
-          }
+                    snapToZone: true,              // 拖拽吸附到最近的分割区域
-      }
+                    returnWhenOutOfBounds: true,  // 拖拽到区域外时返回原位置
+                    handleOccupiedZone: true,     // 处理已占用区域（false=允许重叠）
+                    occupiedZoneAction: 'replace'   // 当开关3=true时的行为：'return'=返回原位置，'replace'=替换
+                },
+                transform: {
+                    position: position,
+                    rotation: rotation,
+                }
+            });
+
+            console.log(`百叶模型已放置为 ${name + '_' + modelId}`);
+        }
+    }
 
     // 第二次循环：处理 change_color（此时模型已加载完成）
     for (const event of result.data.events) {
@@ -422,8 +444,8 @@ const getProductConfig = async (sku) => {
 }
 
 // API 配置
-//const API_BASE_URL = 'https://ztserver.zguiy.com';
+const API_BASE_URL = 'https://ztserver.zguiy.com';
-const API_BASE_URL = 'http://localhost:26517';
+//const API_BASE_URL = 'http://localhost:26517';
 const getApiUrl = (path) => {
     return `${API_BASE_URL}${path}`;
 };

examples/demo-global.html

@@ -366,7 +366,7 @@
                             <div class="option-group">
                                 <button class="option-btn" data-option="size-1">SPF111S1013W</button>
                                 <button class="option-btn" data-option="size-2">SPF111S1013TA</button>
-                                <button class="option-btn" data-option="size-3">SPF111S1013C</button>
+                                <button class="option-btn" data-option="size-3">SPF111SEM13</button>
                             </div>
                         </div>
                     </div>
@@ -410,13 +410,20 @@
                             <!-- 80 系列 -->
                             <div class="series-divider">----- 80 -----</div>
                             <div class="option-group">
-                                <button class="option-btn" data-option="size-4">SPF80S1020C</button>
+                                <button class="option-btn" data-option="size-4">SPF80S1020L</button>
                             </div>
                             <!-- 111 系列 -->
                             <div class="series-divider">----- 111 -----</div>
                             <div class="option-group">
                                 <button class="option-btn" data-option="size-7">SPF111S1020C</button>
                             </div>
+                            <!-- vs 系列 -->
+                            <div class="series-divider">----- vs -----</div>
+                            <div class="option-group">
+                                <button class="option-btn" data-option="size-7">SPF111S1020PILLAR4PCS</button>
+                            </div>
+
+
                         </div>
                     </div>
                 </div>
@@ -466,8 +473,8 @@
                     </div>
                     <div class="category-content expanded">
                         <div class="option-group">
-                            <button class="option-btn" data-option="color-3">SPFPDS10FTW</button>
+                            <button class="option-btn" data-option="color-3">SPFPCD10FTW</button>
-                            <button class="option-btn" data-option="color-4">SPFPDS10FTC</button>
+                            <button class="option-btn" data-option="color-4">SPFDPH10FTA</button>
                         </div>
                     </div>
                 </div>
@@ -870,7 +877,7 @@
 
         console.log(kernel);
 
-    
+
         // 存储当前选中的材质名和网格
         var currentMaterialName = '';
         var currentPickedMesh = null;

index.html

@@ -473,7 +473,7 @@
                     </div>
                     <div class="category-content expanded">
                         <div class="option-group">
-                            <button class="option-btn" data-option="color-3">SPFPDS10FTW</button>
+                            <button class="option-btn" data-option="color-3">SPFADSW10FTW</button>
                             <button class="option-btn" data-option="color-4">SPFPDS10FTC</button>
                         </div>
                     </div>

index.js

@@ -44,7 +44,10 @@ export const init = async (customConfig = {}) => {
         container: document.querySelector('#renderDom'),
         modelUrlList: [],
         env: { envPath: 'https://cdn.files.zguiy.com/zt/environment.env', intensity: 1.2, rotationY: 0.3, background: false },
-        camera:{},
+        camera: {
+            position: { x: 5, y: 2, z: 7 },    // 相机位置：x-左右，y-上下，z-前后
+            target: { x: 0, y: 1, z: 0 }       // 相机目标点：相机看向的位置
+        },
         gizmo: {
             position: false,
             rotation: false,
@@ -59,7 +62,6 @@ export const init = async (customConfig = {}) => {
         }
     };
 
-    // 合并用户自定义配置
     const config = { ...defaultConfig, ...customConfig };
     kernel.init(config);
 }
@@ -106,10 +108,12 @@ export const getPlacementZone = async (sku) => {
     let division_include = []
     // 同时包含10和13
     const only10_13 = /(?=.*10)(?=.*13)/.test(pergolaSku)
-    // 只包含10 无13 无12
+    // 只包含10 无13 无12 无20
-    const only10 = /(?=.*10)(?!.*13)(?!.*12)/.test(pergolaSku)
+    const only10 = /(?=.*10)(?!.*13)(?!.*12)(?!.*20)/.test(pergolaSku)
     // 同时包含10和12
     const only10_12 = /(?=.*10)(?=.*12)/.test(pergolaSku)
+    // 同时包含10和20
+    const only10_20 = /(?=.*10)(?=.*20)/.test(pergolaSku)
 
     // 1. 只要字符串里包含 10，就返回 true
     const has10 = /10/.test(sku);
@@ -140,7 +144,24 @@ export const getPlacementZone = async (sku) => {
     if (only10_12 && has10) {
         division_include.push('左', '右')
     }
+    //棚子同时包10和20的并且含配件是10
+    if (only10_20 && has10) {
 
+        if (pergolaSku === "SPF111S1020PILLAR4PCS") {
+            division_include.push('左', '右')
+        }
+        else {
+            division_include.push('前', '后', '左', '右', "前1", "后1", "前2", "后2")
+        }
+    }
+
+    //棚子同时包10和20的并且含配件是13 
+    if (only10_20 && has13) {
+
+        if (pergolaSku === "SPF111S1020PILLAR4PCS") {
+            division_include.push('前', '后')
+        }
+    }
     const response = await fetch(apiConfig.getApiUrl(`/api/product-configs/by-sku/${sku}`));
     const result = await response.json();
     if (result.code === 200) {
@@ -202,7 +223,7 @@ export const executeEvent = async (dropzone_data, result, sku) => {
     // 第一次循环：处理 change_model
     for (const event of result.data.events) {
         if (event.event_type === 'change_model') {
-        
+
             const { name, file_url, model_control_type, category } = event.target_data;
 
             // 生成唯一的模型ID
@@ -210,7 +231,7 @@ export const executeEvent = async (dropzone_data, result, sku) => {
             modelName = name;
             kernel.dropZone.recordModelPlacement(wallName, index, name + '_' + modelId);
 
-   
+
 
             await kernel.model.add({
                 modelName: name,

src/babylonjs/AppCamera.ts

@@ -21,18 +21,29 @@ export class AppCamera extends Monobehiver {
         const canvas = AppConfig.container;
         if (!scene || !canvas) return;
 
-        // 创建弧形旋转相机：水平角70度，垂直角85度（接近上帝视角），距离5，目标点(0,2,0)
+        // 从配置中获取相机参数
-        this.object = new ArcRotateCamera('Camera', Tools.ToRadians(70), Tools.ToRadians(85), 5, new Vector3(0, 2, 0), scene);
+        const { position, target } = AppConfig.camera;
+
+        // 创建弧形旋转相机：水平角70度，垂直角85度（接近上帝视角），距离5，目标点从配置读取
+        this.object = new ArcRotateCamera(
+            'Camera',
+            Tools.ToRadians(70),
+            Tools.ToRadians(85),
+            5,
+            new Vector3(target.x, target.y, target.z),
+            scene
+        );
         this.object.attachControl(canvas, true);
         this.object.minZ = 0.01;           // 近裁剪面
-        this.object.wheelPrecision =200;    // 滚轮缩放精度
+        this.object.wheelPrecision = 200;   // 滚轮缩放精度
         this.object.panningSensibility = 0;
-        
+
         // 限制垂直角范围，实现上帝视角
         this.object.upperBetaLimit = Tools.ToRadians(90);  // 最大垂直角（接近90度，避免万向锁）
-        
+
-        this.object.position = new Vector3(0,0, 10);
+        // 设置相机位置（从配置读取）
-        this.setTarget(0, 0.5, 0);
+        this.object.position = new Vector3(position.x, position.y, position.z);
+        this.setTarget(target.x, target.y, target.z);
     }
 
     /** 设置相机目标点 */

src/babylonjs/AppConfig.ts

@@ -14,6 +14,10 @@ export const AppConfig = {
         rotationY: 0,
         background: false,
     },
+    camera: {
+        position: { x: 0, y: 2, z: 5 },
+        target: { x: 0, y: 1, z: 0 },
+    },
     gizmo: {
         position: true,
         rotation: false,

src/babylonjs/GameManager.ts

@@ -839,16 +839,17 @@ export class GameManager extends Monobehiver {
       //     material.metallicTexture = null;
       //   }
       // }
+console.log(options);
 
       // 应用粗糙度值
-      // if (options.roughness !== undefined) {
+      if (options.roughness !== undefined) {
-      //   material.roughness = options.roughness;
+        material.roughness = options.roughness;
-      // }
+      }
 
       // // 应用金属度值
-      // if (options.metallic !== undefined) {
+      if (options.metallic !== undefined) {
-      //   material.metallic = options.metallic;
+        material.metallic = options.metallic;
-      // }
+      }
       // alert(typeof options.metallic + ' ' + typeof options.roughness);
    
       // 强制刷新材质

src/babylonjs/MainApp.ts

@@ -70,6 +70,7 @@ export class MainApp {
         AppConfig.container = config.container;
         AppConfig.modelUrlList = config.modelUrlList || [];
         AppConfig.env = { ...AppConfig.env, ...(config.env || {}) };
+        AppConfig.camera = { ...AppConfig.camera, ...(config.camera || {}) };
         AppConfig.gizmo = { ...AppConfig.gizmo, ...(config.gizmo || {}) };
         AppConfig.outline = { ...AppConfig.outline, ...(config.outline || {}) };
         this.appPositionGizmo.configure(AppConfig.gizmo);

src/kernel/Adapter.ts

@@ -113,6 +113,7 @@ export class KernelAdapter {
       roughness?: number;
       metallic?: number;
     }): void => {
+      console.log(options);
       this.mainApp.gameManager.applyMaterial(options);
     },
 

src/main.ts

@@ -23,6 +23,10 @@ type InitParams = {
         rotationY?: number;
         background?: boolean;
     };
+    camera?: {
+        position?: { x: number; y: number; z: number };
+        target?: { x: number; y: number; z: number };
+    };
     gizmo?: {
         position?: boolean;
         rotation?: boolean;
@@ -66,6 +70,7 @@ const kernel = {
             container,
             modelUrlList: params.modelUrlList || [],
             env: params.env,
+            camera: params.camera,
             gizmo: params.gizmo,
             outline: params.outline,
         });

设计

@@ -1,5 +0,0 @@
-1.右侧添加选装选配的ui，分类折叠，棚子尺寸棚子/类型/百叶/配色  ，每个折叠下面都有四个属性  ，百叶是多选，其他的都是单选
-2.页面布局也改下，分画布和UI两部分
-3.UI的事件预留好
-
-一共四个面，每个面都是一个对象  [wall1:{ },wall2:{ },wall3:{ },wall4:{ }] 这种，wall1:{ } 是一个对象，里面包含wall1的所有属性，从哪到哪的长度，