【web】基于HTML/CSS，JavaScript + Three.js做3D流程图

效果图如下：

我用夸克网盘给你分享了「3D流程图代码」，点击链接或复制整段内容，打开「夸克APP」即可获取。

/_5f533bUIed😕

链接：https://pan.quark.cn/s/efd6e8231cf2

一、代码实现方式

就三样东西，全在一个文件里（3d_flowchart.html）：

1. HTML ------ 页面骨架：工具栏、画布容器、提示气泡、文字输入框。
2. CSS ------ 样式与版式：配色变量、毛玻璃、圆角、阴影、Flex 布局。
3. JavaScript ------ 全部逻辑，写在 <script type="module"> 里，负责建 3D 场景、画方块、处理鼠标交互。

再加上两个本地库：lib/three.module.js（3D 引擎）和 lib/OrbitControls.js（相机控制）。

HTML/CSS 做界面，JavaScript + Three.js 做 3D。

二、功能清单

• 视角：左键旋转、滚轮缩放、右键平移、自动旋转、重置视角

• 拖动：移动方块，连线实时跟随，松手吸附网格

• 新建：空白处点击生成新方块

• 连线：依次点击两个方块建立带箭头的有向连线

• 删除 ：点击方块移除它及其所有连线

  

• 编辑文字 ：双击方块改名，文字以广告牌形式任意角度可读

  

• 悬浮反馈 ：描边高亮 + 提示气泡

  

三、代码如何运行

纯前端、离线，无需构建 。但用了 ES Module + importmap，浏览器对 file:// 的模块加载有 CORS 限制，所以要起一个静态服务器：

可以在目录 D:\code\3d流程图 下执行

npx serve D:\code\3d流程图
# 然后浏览器打开 http://localhost:3000