文章参考https://mp.weixin.qq.com/s/dXXNSgp-RcrAC4Ly8cBP9g功能清单方块生成功能描述2D拖拽生成从左侧素材库拖拽方块图标到3D画布自动在鼠标位置生成正方体面吸附生成拖拽到已有方块表面时自动在相邻面生成新方块地面生成拖拽到地面时自动对齐网格已有方块则向上摞高生长动画新方块从 scale(0) 平滑过渡到 scale(1)带缓动效果方块操作功能描述点击选中单击方块选中边缘线变白方块发光Shift多选按住Shift点击可追加/取消选中3D拖拽移动拖拽选中方块在水平面上平移自动对齐0.5精度网格堆叠吸附拖拽到其他方块上方时自动提升至其顶部Delete删除键盘Delete键删除选中方块需确认属性编辑属性范围说明位置 X-10 ~ 10水平横轴坐标位置 Y0 ~ 20垂直高度位置 Z-10 ~ 10水平纵轴坐标缩放0.3 ~ 5.0方块整体缩放比例颜色任意颜色选择器自由选色输入时实时验证超出范围标红提示失去焦点自动修正为合法值应用时硬性钳制边界分组管理功能描述组合将多个选中方块编组点击组内任一方块全选整组拆分解除选中方块的组合关系历史记录功能描述撤销 (Undo)CtrlZ 或按钮最多20步重做 (Redo)CtrlY 或按钮自动记录每次方块生成、移动、属性修改后自动存档视图控制功能描述正视相机移至 (0, 0, 10)俯视相机移至 (0, 10, 0)左视相机移至 (-10, 0, 0)右视相机移至 (10, 0, 0)复位相机回到初始位置 (10, 10, 10)OrbitControls左键旋转、中键缩放、右键平移带阻尼边界系统X/Z轴范围-10 到 10Y轴范围0 到 20红色半透明边界框可视化所有操作自动钳制在边界内 复现提示词以下提示词可直接用于 AI 助手生成与当前版本一致的项目**角色与任务** 你是一个资深前端工程师兼 3D 交互专家。请帮我编写一个单文件 HTML包含内部 CSS 和 JS使用 ES Module 引入 Three.js v0.160.0 和 OrbitControls。实现一个名为3D正方体几何拼搭实验的交互页面。 **一、页面布局** 1. 全屏 Flex 布局去除边距溢出隐藏。 2. 左侧边栏 240px 宽灰白色背景包含 - 标题 素材库和副标题 - 属性编辑面板坐标X/Y/Z输入框使用CSS Grid三列等宽布局确保不溢出尺寸0.3-5.0颜色选择器 - 正方体拖拽源图标蓝色方块 - 操作指南 3. 右侧画布占据剩余空间包含 - 顶部工具栏组合/拆分/删除选中/清空全部/撤销/重做/正视图/俯视图/左视图/右视图/复位 - 底部半透明提示栏 - 2D拖拽幽灵元素 **二、3D场景** 1. 背景色 0xf0f0f0PCFSoftShadowMap 阴影 2. 透视相机初始位置 (10,10,10)OrbitControls 带阻尼 3. 光照环境光 带阴影平行光 4. GridHelper 20x20红色半透明边界框(X/Z:-10~10, Y:0~20)隐形地面Plane用于射线检测 **三、方块系统** 1. 1x1x1 BoxGeometryMeshLambertMaterial蓝色0x448aff 2. 黑色边缘线 EdgesGeometry LineSegments边缘线设置raycast(){}不参与射线检测 3. 生成时从scale(0)到scale(1)的生长动画(easeOutCubic) **四、核心交互** 1. 2D到3D拖拽生成侧边栏mousedown显示幽灵画布mouseup时发射射线击中方块则在相邻面生成击中地面则对齐网格并向上摞高 2. 3D选中点击方块选中发光白边Shift多选/取消多选点击空白取消选中 3. 3D拖拽固定Y轴高度的水平拖拽平面位移量0.5精度对齐悬停其他方块自动提升堆叠 4. 属性面板选中方块后同步显示属性输入时实时验证边界并标红超出范围失去焦点自动修正应用时硬性钳制clampPosition 5. 组合/拆分分配groupId点击组内任一方块全选整组 6. 历史记录最多20步每次有效操作后自动保存 7. 视图切换800ms平滑动画lerp位置slerp目标 **五、技术要求** - 射线检测只针对方块Mesh本体使用renderer.domElement.getBoundingClientRect()做坐标转换 - 拖拽通过DRAG_THRESHOLD2px区分点击与拖拽 - 输入框事件阻止冒泡防止触发3D场景操作 - 边界常量X/Z:[-10,10], Y:[0,20], SCALE:[0.3,5.0] - 网格对齐精度0.5