DeepSeek V3.2 AI辅助-构建可视化多维知识立方体展示知识体系

人月聊IT

发布于 2025-11-24 18:00:56

4730

Hello，大家好，我是人月聊IT。今天接着聊知识体系构建方面的话题。如果看过我前面知识体系相关文章可能知道，我常用的知识体系构建一般就是思维导图和知识矩阵图。思维导图单维度，而知识体系双维度。

但是实际随着研究和应用的深入，可以看到知识体系往往二个维度并不够用，一个复杂领域的知识体系应该是一个多维的知识立方体，这个和BI应用里面我们经常谈到的Cube立方体概念很类似。具体的知识点应该存储在这个复杂的知识立方体中，当然我们可以对立方体进行降维或切片，让其又演变为一个二维的知识体系图。

所以今天我就在想，是否可以通过AI编程的方式，更好的来呈现这种多维知识立方体结构呢?但是这个提示词会比较复杂。当然这个也难不倒我们，AI辅助下我们更多的是理清需求和问题，提示词就让AI自己输出。

所以我的第一步是先让AI输出完整编程用的需求，具体提示词为：

我需要你详细阅读当前项目下markdown目录下和知识体系，知识框架，知识结构相关的文章，了解我原来做过的关于知识体系构建的经验。从这些文章里面你可以看到，对于知识体系的可视化构图呈现。我经历了如下过程：

1. 用简单的思维导图来呈现知识体系结构：类似软件工程，项目管理等知识体系图

2. 用二维矩阵来构建知识体系，类似我整理过的数字化能力体系，SOA治理管控体系等。这类一般横向为静态分层，纵向为动态生命周期

但是我最近在知识体系构建中感觉，一个知识体系应该支持超越二维的多维知识立方体结构。类似数字化知识体系，原来纵向是规划建设实施管控动态生命周期，横向是资源，技术，平台，应用的分层。但是可能就确实业务域这个重要维度。所以我的理解知识体系可以进一步演化为类似BI多维立方体的呈现结构。我可以自己选择知识呈现的x,y,z三个维度。然后通过切片或钻取找到相应的知识。

因此我希望后面通过编程来实现一个动态的html页面，能够实现我上面的多维知识体系展示效果。基于以上目标，我需要你详细的帮我整理要实现上面需求的提示语，方便让AI帮我实现该html应用展示。

有了这个需求，AI最终输出完整需求如下：

请参考下面的提示语，帮我生产一个动态html页面，可以展示多维知识体系的立方体结构。
# 多维知识体系可视化HTML应用实现提示语
## 项目背景和目标
基于我对知识体系构建的多年经验，从简单的思维导图到二维矩阵，现在希望构建一个支持多维知识体系展示的HTML应用。该应用应该能够支持类似BI多维立方体的知识展示效果，允许用户自定义X、Y、Z三个维度，并通过切片、钻取等操作来探索知识体系。
## 核心需求
### 1. 多维知识立方体展示
- **三维坐标轴定义**：用户可自定义X、Y、Z三个维度的名称和层级结构
- **动态维度配置**：支持不同知识体系使用不同的维度组合
- **知识节点定位**：每个知识节点在三维空间中的精确定位
### 2. 交互操作功能
- **维度切换**：允许用户在不同维度间切换视图
- **切片操作**：固定某个维度的值，查看特定切面的知识分布
- **钻取操作**：深入查看某个知识领域的细节内容
- **旋转视角**：支持3D视角旋转，从不同角度观察知识体系
### 3. 知识内容管理
- **知识节点定义**：每个节点包含标题、描述、标签、关联链接等信息
- **知识关系**：支持节点间的关联关系展示
- **内容层级**：支持多级知识分类和层级结构
## 技术实现要求
### 1. 前端技术栈
- **3D可视化**：使用Three.js或D3.js等库实现3D立方体展示
- **响应式设计**：支持不同设备和屏幕尺寸
- **现代框架**：使用React或Vue.js构建组件化界面
### 2. 数据结构设计
```javascript
// 知识体系配置
const knowledgeSystem = {
  dimensions: {
    x: { name: '生命周期阶段', levels: ['规划', '设计', '实施', '运维'] },
    y: { name: '架构层次', levels: ['资源层', '平台层', '服务层', '应用层'] },
    z: { name: '业务领域', levels: ['业务架构', '数据架构', '应用架构', '技术架构'] }
  },
  nodes: [
    {
      id: 'node1',
      title: '微服务架构设计',
      position: { x: 1, y: 2, z: 3 }, // 在三维空间中的位置
      description: '微服务架构的核心设计原则和实施要点',
      tags: ['架构', '微服务', '设计'],
      links: ['node2', 'node3']
    }
    // 更多节点...
  ]
}
```
### 3. 核心交互功能
- **维度配置器**：允许用户动态修改三个维度的名称和层级
- **知识节点编辑器**：支持添加、编辑、删除知识节点
- **视图控制器**：提供切片、钻取、旋转等交互控制
- **搜索和筛选**：基于关键词或标签快速定位知识节点
## 界面设计要点
### 1. 主界面布局
- **3D可视化区域**：占据主要空间，展示知识立方体
- **维度控制器**：位于左侧或顶部，控制维度配置
- **节点信息面板**：右侧显示选中节点的详细信息
- **工具栏**：提供视图切换、搜索、导出等功能
### 2. 视觉设计
- **色彩编码**：不同维度使用不同颜色区分
- **节点样式**：根据节点类型、重要性设置不同样式
- **动画效果**：平滑的视角切换和节点展开动画
- **层次感**：通过大小、透明度等体现知识层次
## 应用场景示例
### 数字化能力知识体系
```javascript
const digitalKnowledgeSystem = {
  dimensions: {
    x: { 
      name: '生命周期', 
      levels: ['规划', '设计', '实施', '运维', '治理'] 
    },
    y: { 
      name: '架构层次', 
      levels: ['基础资源', '平台能力', '技术服务', '业务应用'] 
    },
    z: { 
      name: '业务领域', 
      levels: ['数字化战略', '业务架构', '数据架构', '技术架构'] 
    }
  },
  // 具体的知识节点...
}
```
### SOA治理管控体系
```javascript
const soaGovernanceSystem = {
  dimensions: {
    x: { 
      name: '治理阶段', 
      levels: ['规划', '设计', '实施', '运营'] 
    },
    y: { 
      name: '治理层次', 
      levels: ['战略层', '战术层', '执行层'] 
    },
    z: { 
      name: '治理领域', 
      levels: ['服务治理', '数据治理', '安全治理', '运维治理'] 
    }
  },
  // 具体的治理知识节点...
}
```
## 实现步骤建议
### 第一阶段：基础框架
1. 搭建基础的HTML页面结构
2. 集成Three.js或D3.js实现3D场景
3. 实现基础的立方体网格和坐标轴
### 第二阶段：数据管理
1. 设计JSON格式的知识体系数据结构
2. 实现知识节点的渲染和定位
3. 添加基础的交互功能（点击、悬停）
### 第三阶段：高级交互
1. 实现维度配置器
2. 添加切片和钻取功能
3. 实现视角旋转和缩放
### 第四阶段：完善功能
1. 添加搜索和筛选功能
2. 实现数据导入导出
3. 优化性能和用户体验
## 技术细节考虑
### 性能优化
- **虚拟化渲染**：大量节点时使用虚拟化技术
- **LOD机制**：根据距离调整节点细节级别
- **缓存策略**：缓存计算密集的操作结果
### 可扩展性
- **插件系统**：支持自定义渲染器和交互器
- **数据适配器**：支持不同格式的知识体系数据
- **主题系统**：支持不同的视觉主题
## 预期效果
通过这个多维知识体系可视化应用，希望能够实现：
1. **直观的3D展示**：将复杂的知识体系以立体方式呈现
2. **灵活的维度配置**：适应不同知识体系的展示需求
3. **深入的探索体验**：通过交互操作发现知识间的内在联系
4. **知识管理工具**：成为个人或团队知识管理的有效工具
这个应用将超越传统的二维思维导图和矩阵图，提供更加灵活和深入的知识探索体验，真正实现"知识立方体"的构想。

在有了提示词后，我们接着AI编程，在这里使用iflow cli+DeepSeek V3.2大模型进行AI编程，让AI输出完整的Html动态展示页面。

最终我们看下效果如下：

立方体中每个圆点都是一个知识点，点击该小圆点可以在右边看到详细的知识点说明信息介绍。左边则是三个知识维度和具体的知识分类名称。注意在左边我们可以关闭某一个知识维度，那么知识立方体就会变成了一个二维的知识矩阵，具体如下：

所以从上面可以看到基本满足了我们多维知识立方体的展示模式。

我原来还写过一篇文章，就是借助DeepSeek来构建某个知识领域的知识图谱和知识网络，参考如下：

那么上面的可视化展现还可以进一步优化，即增加知识点之间的关联和依赖，有了知识关联和双向知识链接，我们就更加容易基于知识立方体构建基于某个目标的知识地图和学习路径。

下面是DeepSeek V3.2输出的源代码，参考如下：

具体源代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字化知识立方体 - 多维知识体系可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            overflow: hidden;
        }

        .container {
            display: flex;
            height: 100vh;
            padding: 20px;
            gap: 20px;
        }

        .control-panel {
            width: 300px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        .visualization-area {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            position: relative;
            overflow: hidden;
        }

        .info-panel {
            width: 350px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            overflow-y: auto;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
            font-size: 24px;
        }

        .dimension-control {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 4px solid #3498db;
        }

        .dimension-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .toggle-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }

        .toggle-btn.active {
            background: #27ae60;
        }

        .levels {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .level {
            padding: 8px 12px;
            background: white;
            border-radius: 6px;
            border: 1px solid #e1e8ed;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .level:hover {
            background: #3498db;
            color: white;
            transform: translateX(5px);
        }

        .level.active {
            background: #2980b9;
            color: white;
            border-color: #2980b9;
        }

        #canvas-container {
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .node-info {
            background: white;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            border-left: 4px solid #9b59b6;
        }

        .node-info h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .node-info p {
            color: #7f8c8d;
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .position-info {
            background: #ecf0f1;
            padding: 8px 12px;
            border-radius: 6px;
            margin-bottom: 10px;
            font-size: 14px;
        }

        .position-info strong {
            color: #2c3e50;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 10px;
        }

        .tag {
            background: #ecf0f1;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: #34495e;
        }

        .matrix-view {
            display: none;
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 10px;
            padding: 20px;
            overflow: auto;
        }

        .matrix-grid {
            display: grid;
            gap: 10px;
            margin-top: 20px;
        }

        .matrix-cell {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .matrix-cell:hover {
            background: #3498db;
            color: white;
            transform: scale(1.05);
        }

        .matrix-cell h4 {
            margin-bottom: 5px;
            font-size: 14px;
        }

        .matrix-cell p {
            font-size: 12px;
            color: #6c757d;
        }

        .view-toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 10px 15px;
            border-radius: 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

        .view-toggle button {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            margin: 0 5px;
            transition: all 0.3s ease;
        }

        .view-toggle button.active {
            background: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 左侧控制面板 -->
        <div class="control-panel">
            <h1>数字化知识立方体</h1>

            <!-- X轴维度：生命周期 -->
            <div class="dimension-control">
                <div class="dimension-title">
                    <span>X轴：生命周期阶段</span>
                    <button class="toggle-btn active" onclick="toggleDimension('x')">开启</button>
                </div>
                <div class="levels" id="x-levels">
                    <div class="level active" onclick="selectLevel('x', 0)">战略规划</div>
                    <div class="level" onclick="selectLevel('x', 1)">架构设计</div>
                    <div class="level" onclick="selectLevel('x', 2)">实施交付</div>
                    <div class="level" onclick="selectLevel('x', 3)">运营治理</div>
                </div>
            </div>

            <!-- Y轴维度：架构层次 -->
            <div class="dimension-control">
                <div class="dimension-title">
                    <span>Y轴：架构层次</span>
                    <button class="toggle-btn active" onclick="toggleDimension('y')">开启</button>
                </div>
                <div class="levels" id="y-levels">
                    <div class="level active" onclick="selectLevel('y', 0)">基础资源</div>
                    <div class="level" onclick="selectLevel('y', 1)">平台能力</div>
                    <div class="level" onclick="selectLevel('y', 2)">技术服务</div>
                    <div class="level" onclick="selectLevel('y', 3)">业务应用</div>
                </div>
            </div>

            <!-- Z轴维度：业务领域 -->
            <div class="dimension-control">
                <div class="dimension-title">
                    <span>Z轴：业务领域</span>
                    <button class="toggle-btn active" onclick="toggleDimension('z')">开启</button>
                </div>
                <div class="levels" id="z-levels">
                    <div class="level active" onclick="selectLevel('z', 0)">数字化战略</div>
                    <div class="level" onclick="selectLevel('z', 1)">业务架构</div>
                    <div class="level" onclick="selectLevel('z', 2)">数据架构</div>
                    <div class="level" onclick="selectLevel('z', 3)">技术架构</div>
                </div>
            </div>
        </div>

        <!-- 中间可视化区域 -->
        <div class="visualization-area">
            <div class="view-toggle">
                <button id="cube-view-btn" class="active" onclick="switchView('cube')">3D立方体</button>
                <button id="matrix-view-btn" onclick="switchView('matrix')">2D矩阵</button>
            </div>

            <div id="canvas-container"></div>
            <div id="matrix-view" class="matrix-view">
                <h3>知识矩阵视图</h3>
                <div id="matrix-grid" class="matrix-grid"></div>
            </div>
        </div>

        <!-- 右侧信息面板 -->
        <div class="info-panel">
            <h2>知识节点详情</h2>
            <div id="node-details">
                <div class="node-info">
                    <p>点击立方体中的节点查看详情</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 数字化知识体系数据
        const knowledgeSystem = {
            dimensions: {
                x: { 
                    name: '生命周期阶段', 
                    levels: ['战略规划', '架构设计', '实施交付', '运营治理'] 
                },
                y: { 
                    name: '架构层次', 
                    levels: ['基础资源', '平台能力', '技术服务', '业务应用'] 
                },
                z: { 
                    name: '业务领域', 
                    levels: ['数字化战略', '业务架构', '数据架构', '技术架构'] 
                }
            },
            nodes: [
                // X=0 战略规划层
                { id: 'strategy-1', title: '数字化转型战略', position: { x: 0, y: 0, z: 0 }, 
                  description: '制定企业数字化转型的总体战略和规划，包括技术路线、组织变革、业务创新等', 
                  tags: ['战略', '规划', '转型'] },
                { id: 'strategy-2', title: '云原生技术选型', position: { x: 0, y: 1, z: 0 }, 
                  description: '评估和选择适合企业需求的云原生技术栈，包括容器、微服务、DevOps等', 
                  tags: ['技术选型', '云原生', '评估'] },
                { id: 'strategy-3', title: '企业架构规划', position: { x: 0, y: 2, z: 0 }, 
                  description: '基于TOGAF等框架进行企业架构规划设计，涵盖业务、数据、应用、技术架构', 
                  tags: ['企业架构', 'TOGAF', '规划'] },
                { id: 'strategy-4', title: '数据治理策略', position: { x: 0, y: 3, z: 0 }, 
                  description: '制定数据治理框架和策略，确保数据质量、安全性和合规性', 
                  tags: ['数据治理', '策略', '合规'] },

                // X=1 架构设计层
                { id: 'arch-1', title: '微服务架构设计', position: { x: 1, y: 2, z: 3 }, 
                  description: '设计微服务拆分策略、服务治理、API设计等架构要素', 
                  tags: ['微服务', '架构', '设计'] },
                { id: 'arch-2', title: '数据中台架构', position: { x: 1, y: 2, z: 2 }, 
                  description: '构建企业级数据中台，实现数据资产化和数据服务化', 
                  tags: ['数据中台', '数据架构', '数据治理'] },
                { id: 'arch-3', title: '业务中台设计', position: { x: 1, y: 3, z: 1 }, 
                  description: '设计业务中台架构，实现业务能力的复用和沉淀', 
                  tags: ['业务中台', '能力复用', '架构'] },
                { id: 'arch-4', title: 'API网关设计', position: { x: 1, y: 2, z: 3 }, 
                  description: '设计API网关架构，实现API的统一管理和安全控制', 
                  tags: ['API网关', '安全', '管理'] },
                { id: 'arch-5', title: '云原生架构', position: { x: 1, y: 1, z: 3 }, 
                  description: '设计云原生技术架构，包括容器编排、服务网格等', 
                  tags: ['云原生', '架构', '容器'] },

                // X=2 实施交付层
                { id: 'impl-1', title: 'DevOps流水线', position: { x: 2, y: 1, z: 3 }, 
                  description: '建立持续集成、持续交付的DevOps自动化流水线', 
                  tags: ['DevOps', 'CI/CD', '自动化'] },
                { id: 'impl-2', title: '容器化部署', position: { x: 2, y: 0, z: 3 }, 
                  description: '应用容器化改造和Kubernetes集群部署实施', 
                  tags: ['容器', 'K8s', '部署'] },
                { id: 'impl-3', title: '微服务开发', position: { x: 2, y: 2, z: 3 }, 
                  description: '基于Spring Cloud等框架进行微服务应用开发', 
                  tags: ['微服务', '开发', 'Spring Cloud'] },
                { id: 'impl-4', title: '数据平台实施', position: { x: 2, y: 2, z: 2 }, 
                  description: '数据中台和数据平台的具体实施和部署', 
                  tags: ['数据平台', '实施', '部署'] },
                { id: 'impl-5', title: '安全体系建设', position: { x: 2, y: 1, z: 0 }, 
                  description: '构建全方位的信息安全防护体系', 
                  tags: ['安全', '防护', '体系'] },

                // X=3 运营治理层
                { id: 'ops-1', title: '微服务治理', position: { x: 3, y: 2, z: 3 }, 
                  description: '建立微服务运行监控、限流熔断、服务发现等治理机制', 
                  tags: ['治理', '监控', '微服务'] },
                { id: 'ops-2', title: '数据质量管理', position: { x: 3, y: 2, z: 2 }, 
                  description: '建立数据质量监控、数据血缘、数据标准等管理机制', 
                  tags: ['数据质量', '数据治理', '监控'] },
                { id: 'ops-3', title: '性能监控', position: { x: 3, y: 0, z: 3 }, 
                  description: '构建应用性能监控体系，确保系统稳定运行', 
                  tags: ['监控', '性能', '运维'] },
                { id: 'ops-4', title: '成本优化', position: { x: 3, y: 0, z: 0 }, 
                  description: '云资源成本监控和优化策略实施', 
                  tags: ['成本', '优化', '云资源'] },
                { id: 'ops-5', title: '业务连续性', position: { x: 3, y: 3, z: 0 }, 
                  description: '建立业务连续性和灾备恢复机制', 
                  tags: ['连续性', '灾备', '业务'] },

                // 补充更多知识点
                { id: 'platform-1', title: '云原生平台建设', position: { x: 1, y: 1, z: 3 }, 
                  description: '构建企业级云原生技术平台，提供容器、微服务、DevOps等基础能力', 
                  tags: ['云原生', '平台', '基础设施'] },
                { id: 'platform-2', title: '低代码平台', position: { x: 1, y: 1, z: 1 }, 
                  description: '构建企业级低代码开发平台，提升开发效率', 
                  tags: ['低代码', '平台', '开发'] },
                { id: 'service-1', title: '服务网格', position: { x: 2, y: 2, z: 3 }, 
                  description: '基于Istio等服务网格技术实现微服务治理', 
                  tags: ['服务网格', 'Istio', '治理'] },
                { id: 'service-2', title: 'API管理', position: { x: 3, y: 2, z: 1 }, 
                  description: '建立API全生命周期管理和监控体系', 
                  tags: ['API', '管理', '生命周期'] },
                { id: 'data-1', title: '数据湖建设', position: { x: 1, y: 0, z: 2 }, 
                  description: '构建企业数据湖，实现数据集中存储和管理', 
                  tags: ['数据湖', '存储', '管理'] },
                { id: 'data-2', title: '数据安全', position: { x: 3, y: 0, z: 2 }, 
                  description: '数据安全防护和隐私保护机制', 
                  tags: ['数据安全', '隐私', '防护'] }
            ]
        };

        // Three.js相关变量
        let scene, camera, renderer, controls;
        let cube, nodes = [];
        let activeDimensions = { x: true, y: true, z: true };
        let selectedLevels = { x: 0, y: 0, z: 0 };
        let currentView = 'cube';

        // 初始化Three.js场景
        function initThreeJS() {
            const container = document.getElementById('canvas-container');

            // 创建场景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xf0f0f0);

            // 创建相机
            camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
            camera.position.set(5, 5, 5);

            // 创建渲染器
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(container.clientWidth, container.clientHeight);
            container.appendChild(renderer.domElement);

            // 添加轨道控制器
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;

            // 添加灯光
            const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
            scene.add(ambientLight);

            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(1, 1, 1);
            scene.add(directionalLight);

            // 创建立方体框架
            createCubeFrame();

            // 创建知识节点
            createKnowledgeNodes();

            // 开始动画循环
            animate();

            // 窗口大小调整
            window.addEventListener('resize', onWindowResize);
        }

        // 创建立方体框架
        function createCubeFrame() {
            // 创建外部大立方体框架
            const geometry = new THREE.BoxGeometry(4, 4, 4);
            const edges = new THREE.EdgesGeometry(geometry);
            const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 2 }));
            scene.add(line);

            // 创建内部网格线 - 4x4x4的小立方体
            const gridMaterial = new THREE.LineBasicMaterial({ color: 0xcccccc, linewidth: 1 });

            // X轴方向的网格线
            for (let i = 1; i < 4; i++) {
                const x = (i / 4) * 4 - 2;

                // YZ平面
                const yzGeometry = new THREE.BufferGeometry().setFromPoints([
                    new THREE.Vector3(x, -2, -2),
                    new THREE.Vector3(x, -2, 2),
                    new THREE.Vector3(x, 2, 2),
                    new THREE.Vector3(x, 2, -2),
                    new THREE.Vector3(x, -2, -2)
                ]);
                scene.add(new THREE.Line(yzGeometry, gridMaterial));
            }

            // Y轴方向的网格线
            for (let i = 1; i < 4; i++) {
                const y = (i / 4) * 4 - 2;

                // XZ平面
                const xzGeometry = new THREE.BufferGeometry().setFromPoints([
                    new THREE.Vector3(-2, y, -2),
                    new THREE.Vector3(-2, y, 2),
                    new THREE.Vector3(2, y, 2),
                    new THREE.Vector3(2, y, -2),
                    new THREE.Vector3(-2, y, -2)
                ]);
                scene.add(new THREE.Line(xzGeometry, gridMaterial));
            }

            // Z轴方向的网格线
            for (let i = 1; i < 4; i++) {
                const z = (i / 4) * 4 - 2;

                // XY平面
                const xyGeometry = new THREE.BufferGeometry().setFromPoints([
                    new THREE.Vector3(-2, -2, z),
                    new THREE.Vector3(-2, 2, z),
                    new THREE.Vector3(2, 2, z),
                    new THREE.Vector3(2, -2, z),
                    new THREE.Vector3(-2, -2, z)
                ]);
                scene.add(new THREE.Line(xyGeometry, gridMaterial));
            }

            // 添加坐标轴标签
            addAxisLabels();
        }

        // 添加坐标轴标签
        function addAxisLabels() {
            // 这里可以添加X、Y、Z轴的文本标签
            // 简化实现，实际项目中可以使用CSS3DRenderer
        }

        // 创建知识节点
        function createKnowledgeNodes() {
            knowledgeSystem.nodes.forEach(node => {
                const geometry = new THREE.SphereGeometry(0.15, 16, 16);
                const material = new THREE.MeshPhongMaterial({ 
                    color: getNodeColor(node),
                    emissive: 0x072534,
                    shininess: 100
                });

                const sphere = new THREE.Mesh(geometry, material);
                sphere.position.set(
                    node.position.x - 1.5,
                    node.position.y - 1.5, 
                    node.position.z - 1.5
                );
                sphere.userData = node;

                scene.add(sphere);
                nodes.push(sphere);

                // 添加点击事件
                sphere.userData.onClick = () => showNodeInfo(node);
            });
        }

        // 根据节点位置获取颜色
        function getNodeColor(node) {
            const colors = [
                0xff6b6b, // 红色 - 战略规划
                0x4ecdc4, // 青色 - 架构设计  
                0x45b7d1, // 蓝色 - 实施交付
                0x96ceb4  // 绿色 - 运营治理
            ];
            return colors[node.position.x] || 0xaaaaaa;
        }

        // 显示节点信息
        function showNodeInfo(node) {
            const detailsContainer = document.getElementById('node-details');
            const xLevel = knowledgeSystem.dimensions.x.levels[node.position.x];
            const yLevel = knowledgeSystem.dimensions.y.levels[node.position.y];
            const zLevel = knowledgeSystem.dimensions.z.levels[node.position.z];

            detailsContainer.innerHTML = `
                <div class="node-info">
                    <h3>${node.title}</h3>
                    <div class="position-info">
                        <strong>位置信息：</strong><br>
                        X轴（${knowledgeSystem.dimensions.x.name}）：${xLevel}<br>
                        Y轴（${knowledgeSystem.dimensions.y.name}）：${yLevel}<br>
                        Z轴（${knowledgeSystem.dimensions.z.name}）：${zLevel}
                    </div>
                    <p><strong>描述：</strong>${node.description}</p>
                    <div class="tags">
                        ${node.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                    </div>
                </div>
            `;
        }

        // 切换维度显示
        function toggleDimension(dimension) {
            const btn = event.target;
            activeDimensions[dimension] = !activeDimensions[dimension];
            btn.textContent = activeDimensions[dimension] ? '开启' : '关闭';
            btn.classList.toggle('active', activeDimensions[dimension]);

            updateView();
        }

        // 选择维度层级
        function selectLevel(dimension, level) {
            selectedLevels[dimension] = level;

            // 更新UI
            const levels = document.getElementById(`${dimension}-levels`).children;
            for (let i = 0; i < levels.length; i++) {
                levels[i].classList.toggle('active', i === level);
            }

            updateView();
        }

        // 更新视图
        function updateView() {
            const activeCount = Object.values(activeDimensions).filter(v => v).length;

            if (activeCount === 3) {
                // 3D立方体视图
                switchView('cube');
            } else {
                // 2D矩阵视图
                switchView('matrix');
                updateMatrixView();
            }
        }

        // 切换视图
        function switchView(view) {
            currentView = view;

            const cubeBtn = document.getElementById('cube-view-btn');
            const matrixBtn = document.getElementById('matrix-view-btn');
            const canvasContainer = document.getElementById('canvas-container');
            const matrixView = document.getElementById('matrix-view');

            if (view === 'cube') {
                cubeBtn.classList.add('active');
                matrixBtn.classList.remove('active');
                canvasContainer.style.display = 'block';
                matrixView.style.display = 'none';
            } else {
                cubeBtn.classList.remove('active');
                matrixBtn.classList.add('active');
                canvasContainer.style.display = 'none';
                matrixView.style.display = 'block';
            }
        }

        // 更新矩阵视图
        function updateMatrixView() {
            const matrixGrid = document.getElementById('matrix-grid');
            matrixGrid.innerHTML = '';

            // 确定当前活跃的维度
            const activeDims = Object.entries(activeDimensions)
                .filter(([_, isActive]) => isActive)
                .map(([dim]) => dim);

            if (activeDims.length !== 2) return;

            const [dim1, dim2] = activeDims;
            const dim1Levels = knowledgeSystem.dimensions[dim1].levels;
            const dim2Levels = knowledgeSystem.dimensions[dim2].levels;

            // 更新矩阵视图标题
            const matrixTitle = document.querySelector('#matrix-view h3');
            matrixTitle.textContent = `知识矩阵视图 - ${knowledgeSystem.dimensions[dim1].name} × ${knowledgeSystem.dimensions[dim2].name}`;

            // 设置网格布局
            matrixGrid.style.gridTemplateColumns = `repeat(${dim1Levels.length}, 1fr)`;
            matrixGrid.style.gridTemplateRows = `repeat(${dim2Levels.length}, 1fr)`;

            // 创建矩阵单元格
            for (let i = 0; i < dim1Levels.length; i++) {
                for (let j = 0; j < dim2Levels.length; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'matrix-cell';

                    // 查找该单元格中的节点
                    const nodesInCell = knowledgeSystem.nodes.filter(node => {
                        const pos = {};
                        pos[dim1] = i;
                        pos[dim2] = j;

                        // 检查第三个维度的选择
                        const inactiveDim = Object.keys(activeDimensions).find(dim => !activeDimensions[dim]);
                        if (inactiveDim) {
                            pos[inactiveDim] = selectedLevels[inactiveDim];
                        }

                        return node.position.x === pos.x && node.position.y === pos.y && node.position.z === pos.z;
                    });

                    if (nodesInCell.length > 0) {
                        cell.innerHTML = `
                            <h4>${nodesInCell[0].title}</h4>
                            <p>${nodesInCell.length} 个知识点</p>
                        `;
                        cell.onclick = () => showNodeInfo(nodesInCell[0]);
                    } else {
                        cell.innerHTML = '<p>无内容</p>';
                        cell.style.background = '#f8f9fa';
                        cell.style.color = '#6c757d';
                    }

                    matrixGrid.appendChild(cell);
                }
            }
        }

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }

        // 窗口大小调整
        function onWindowResize() {
            const container = document.getElementById('canvas-container');
            camera.aspect = container.clientWidth / container.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(container.clientWidth, container.clientHeight);
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            initThreeJS();

            // 添加点击事件监听
            renderer.domElement.addEventListener('click', onCanvasClick);
        });

        // 画布点击事件
        function onCanvasClick(event) {
            const mouse = new THREE.Vector2();
            const rect = renderer.domElement.getBoundingClientRect();

            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

            const raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);

            const intersects = raycaster.intersectObjects(nodes);

            if (intersects.length > 0) {
                const node = intersects[0].object.userData;
                if (node.onClick) {
                    node.onClick();
                }
            }
        }
    </script>
</body>
</html>

下面是Qwen2进一步优化后的界面效果。

进一步优化后的提示语如下：

# 多维知识体系可视化HTML应用实现提示语

## 项目背景和目标

基于我对知识体系构建的多年经验，从简单的思维导图到二维矩阵，现在希望构建一个支持多维知识体系展示的HTML应用。该应用应该能够支持类似BI多维立方体的知识展示效果，允许用户自定义X、Y、Z三个维度，并通过切片、钻取等操作来探索知识体系。

## 核心需求

### 1. 多维知识立方体展示

- **4×4×4立方体结构**：构建精确的4×4×4三维立方体网格，每个小立方体代表一个知识单元位置

- **透明立方体框架**：三维知识立方体采用透明材质，但保留边框，便于查看知识节点的位置分布

- **知识节点可视化**：在三维模式下，知识节点使用圆球表示，可以设置不同的颜色和样式来区分不同类型

- **维度配置**：用户可以独立开启/关闭X、Y、Z三个维度，当关闭某个维度时自动转换为二维矩阵视图

- **坐标轴和维度标签**：清晰显示三个维度的坐标轴，标注维度名称和层级信息

### 2. 交互操作功能

- **维度切换**：允许用户在不同维度间切换视图，支持3D到2D的无缝转换

- **旋转视角**：支持3D视角的自由旋转，从不同角度观察知识体系

- **缩放控制**：支持视图的缩放操作，便于查看细节

- **节点交互**：点击知识节点显示详细信息，包括所属维度、知识分类和详细说明

### 3. 知识内容管理

- **知识节点定义**：每个节点包含标题、描述、标签、颜色标记等信息

- **二维矩阵展示**：在二维模式下，知识节点以条目化方式显示在对应单元格中

- **丰富的测试数据**：提供充足的测试知识点，覆盖立方体的多个位置，展示散落效果

## 技术实现要求

### 1. 前端技术栈

- **3D可视化**：使用Three.js实现3D立方体展示和交互

- **响应式设计**：支持不同设备和屏幕尺寸

- **现代Web技术**：使用原生JavaScript和CSS实现，确保兼容性和性能

### 2. 数据结构设计

```javascript
// 数字化知识体系配置示例
const digitalKnowledgeSystem = {
  dimensions: {
    x: { 
      name: '生命周期阶段', 
      levels: ['规划', '设计', '实施', '运维'] 
    },
    y: { 
      name: '架构层次', 
      levels: ['资源层', '平台层', '服务层', '应用层'] 
    },
    z: { 
      name: '业务领域', 
      levels: ['业务架构', '数据架构', '应用架构', '技术架构'] 
    }
  },
  nodes: [
    {
      id: 'node1',
      title: '微服务架构设计',
      position: { x: 1, y: 2, z: 3 },
      description: '微服务架构的核心设计原则和实施要点，包括服务拆分、通信机制、数据管理等关键概念。',
      tags: ['架构', '微服务', '设计'],
      color: 0xff6b6b
    },
    {
      id: 'node2',
      title: '数据中台建设',
      position: { x: 2, y: 1, z: 2 },
      description: '企业数据中台的规划、建设和运营，包括数据采集、处理、分析和服务的全流程。',
      tags: ['数据', '中台', '治理'],
      color: 0x4ecdc4
    },
    {
      id: 'node3',
      title: '云原生架构',
      position: { x: 3, y: 3, z: 1 },
      description: '基于容器、微服务、DevOps等技术的云原生架构设计和实施。',
      tags: ['云原生', '容器', 'DevOps'],
      color: 0x45b7d1
    },
    {
      id: 'node4',
      title: 'API网关设计',
      position: { x: 1, y: 3, z: 2 },
      description: 'API网关的架构设计、功能实现和运维管理，包括路由、认证、限流等核心功能。',
      tags: ['API', '网关', '微服务'],
      color: 0xf9ca24
    },
    {
      id: 'node5',
      title: 'DevOps实践',
      position: { x: 2, y: 2, z: 1 },
      description: 'DevOps文化、工具和最佳实践，实现持续集成、持续交付和持续部署。',
      tags: ['DevOps', 'CI/CD', '自动化'],
      color: 0x6c5ce7
    },
    {
      id: 'node6',
      title: '服务治理',
      position: { x: 3, y: 1, z: 3 },
      description: '微服务架构下的服务注册发现、负载均衡、熔断降级等治理机制。',
      tags: ['治理', '微服务', '注册发现'],
      color: 0xa29bfe
    },
    {
      id: 'node7',
      title: '容器编排平台',
      position: { x: 0, y: 2, z: 0 },
      description: 'Kubernetes等容器编排平台的部署、配置和管理。',
      tags: ['容器', 'K8S', '编排'],
      color: 0xfd79a8
    },
    {
      id: 'node8',
      title: '监控告警体系',
      position: { x: 2, y: 0, z: 3 },
      description: '建立完整的监控告警体系，包括指标收集、告警规则、可视化展示。',
      tags: ['监控', '告警', '运维'],
      color: 0x55efc4
    },
    {
      id: 'node9',
      title: '安全防护体系',
      position: { x: 3, y: 0, z: 0 },
      description: '构建多层次的安全防护体系，包括网络安全、数据安全、应用安全。',
      tags: ['安全', '防护', '合规'],
      color: 0xe17055
    },
    {
      id: 'node10',
      title: '敏捷开发流程',
      position: { x: 0, y: 1, z: 1 },
      description: '敏捷开发方法和实践，包括Scrum、Kanban等敏捷框架。',
      tags: ['敏捷', '开发', '流程'],
      color: 0x74b9ff
    },
    {
      id: 'node11',
      title: '数据库设计',
      position: { x: 1, y: 0, z: 2 },
      description: '数据库架构设计、性能优化、备份恢复等数据库管理知识。',
      tags: ['数据库', '设计', '优化'],
      color: 0xa29bfe
    },
    {
      id: 'node12',
      title: '前端架构设计',
      position: { x: 0, y: 3, z: 3 },
      description: '现代前端架构设计，包括组件化、状态管理、性能优化等。',
      tags: ['前端', '架构', '性能'],
      color: 0xfdcb6e
    }
  ]
}
```

### 3. 核心交互功能

- **维度配置器**：允许用户动态修改三个维度的名称和层级，实时切换维度状态

- **视图控制器**：提供视角重置、自动旋转、网格显示等控制功能

- **节点信息面板**：点击节点时显示详细信息，包括位置坐标、维度分类、描述和标签

- **二维矩阵渲染**：当维度关闭时，自动转换为二维矩阵视图，知识节点以列表形式显示在单元格中

## 界面设计要点

### 1. 主界面布局

- **3D可视化区域**：占据主要空间，展示4×4×4透明立方体框架

- **维度控制器**：位于左侧面板，控制三个维度的启用状态和名称配置

- **节点信息面板**：右侧显示选中节点的详细信息

- **工具栏**：提供重置视角、自动旋转、网格切换等功能

- **坐标轴标签**：底部显示当前维度的坐标轴信息和颜色编码

### 2. 视觉设计

- **透明立方体**：三维立方体采用半透明材质，显示边框但不遮挡内部节点

- **圆球节点**：知识节点使用彩色圆球表示，不同颜色区分不同类型，带发光效果

- **二维矩阵**：在二维模式下，单元格内以列表形式显示知识点，支持滚动查看

- **色彩编码**：不同维度使用不同颜色标识（X-红色，Y-青色，Z-蓝色）

- **悬停效果**：鼠标悬停时节点高亮显示，提供良好的交互反馈

## 应用场景示例

### 数字化知识体系（主要示例）

使用数字化知识体系作为主要示例，涵盖IT架构、开发、运维、安全等各个领域，知识点分布在整个4×4×4立方体中，展示丰富的散落效果。

## 实现步骤建议

### 第一阶段：基础框架
1. 搭建HTML页面结构和CSS样式
2. 集成Three.js库实现3D场景
3. 创建4×4×4透明立方体网格框架

### 第二阶段：知识节点渲染
1. 实现三维圆球节点的创建和定位
2. 添加节点颜色和发光效果
3. 实现二维矩阵视图的节点渲染

### 第三阶段：交互功能
1. 实现维度配置和切换功能
2. 添加点击节点显示详细信息功能
3. 实现旋转、缩放、自动旋转等视图控制

### 第四阶段：数据集成
1. 集成丰富的测试数据，确保节点分布均匀
2. 优化二维矩阵的节点显示方式
3. 完善节点信息面板的内容展示

## 技术细节考虑

### 性能优化

- **轻量化渲染**：使用适当的几何体和材质，确保3D渲染性能
- **事件优化**：合理处理鼠标事件，避免性能瓶颈
- **响应式设计**：适配不同屏幕尺寸和设备类型

### 用户体验

- **平滑过渡**：维度切换时提供平滑的动画过渡
- **直观交互**：确保所有交互操作直观易懂
- **信息清晰**：节点信息和维度标签显示清晰易懂

## 预期效果

通过这个多维知识体系可视化应用，希望能够实现：

1. **直观的3D展示**：通过透明立方体和彩色圆球节点，清晰展示知识体系的立体结构

2. **灵活的维度切换**：支持3D到2D的无缝切换，满足不同分析需求

3. **丰富的交互体验**：点击节点查看详细信息，旋转缩放探索知识关系

4. **实用的知识管理**：成为个人或团队知识管理的有效工具

这个应用将超越传统的二维思维导图和矩阵图，提供更加灵活和深入的知识探索体验，真正实现"知识立方体"的构想。

最终可视化界面效果如下：