[AI教育] 如何用AI创建3D交互物理实验初中物理 物体测量教学?附提示词

多客科技

作者：微信文章
目前正在计划把初中物理，所有可能利用AI制作成可交互网页app的内容，进行收集和分析，今天分享的是一个demo，一个单个html，可以运行在任何环境，比如手机，平板，电脑等，摆脱设备限制。利用AI和专业提示词生成，提示词设计确实需要花些心思，我使用的是google gemini 3 pro，但是其实 deepseek，qwen 也可以完成。完整版提示词如下：你是一名资深 Web 前端工程师，擅长：- HTML5 / CSS3 / SVG- Three.js（WebGL 3D 交互）- 教育类虚拟实验平台开发- 高保真 UI 复刻（根据文字描述）
请你根据以下【完整界面描述】，生成一个网页 App。
================================================【最终交付要求（必须严格遵守）】================================================1. 只输出一个完整 HTML 文件2. HTML 内必须包含：   - <style>：全部 CSS   - <svg>：所有 UI 图标、按钮、装饰（禁止 icon font）   - <script>：Three.js + 交互逻辑3. 打开 HTML 即可运行（无构建、无后端）4. 不使用 Vue / React / UI 框架5. 不输出任何解释说明文字6. 不拆分文件，不省略代码
================================================【整体页面结构（必须严格还原）】================================================页面为「三栏布局 + 中央 3D 实验台」：
- 左侧：教学说明面板（固定）- 中央：3D 实验桌场景（占最大面积）- 右侧：物理实验室工具面板（可滚动）
背景为浅灰到白色的实验室渐变背景。
================================================【左侧面板：测量基础（白色卡片）】================================================样式：- 白色背景- 大圆角（约 16px）- 柔和阴影- 固定在页面左侧，宽约 300px
顶部：- 左侧是「铅笔」SVG 图标（黄色）- 右侧标题文字：测量基础- 右上角有一个向下的小三角（SVG，下拉样式）
内容结构（竖向排列）：
1️⃣ 标题：1. 测量工具  正文：  “实验室常用刻度尺。更精密的测量可选用游标卡尺或螺旋测微器。”
2️⃣ 标题：2. 使用前“三看”  - 零刻度线：检查是否磨损，若磨损应从其他整刻度开始  - 量程：尺子一次能测量的最大范围  - 分度值：相邻两刻度线之间的长度，决定精确度  
关键词（零刻度线 / 量程 / 分度值）为蓝色强调文本
3️⃣ 标题：3. 测量时“四会”  - 会选- 会放- 会读- 会记  
列表左侧有蓝色竖线或圆点强调
================================================【中央区域：3D 实验台（Three.js）】================================================- 使用 Three.js- 透视相机 + OrbitControls- 灰色网格地面（GridHelper）- 视角为轻微俯视 45° 角- 场景整体略带雾化/柔光感
3D 物体（使用基础几何体，不用外部模型）：- 一本“物理书”（蓝色封面 + 米色底部）- 一支铅笔（细长圆柱，黄色）- 一个透明水杯（浅蓝色圆柱，半透明）- 一部手机（深色长方体，屏幕有彩色方块暗示）- 一个白色橡皮- 一枚硬币（扁平圆柱）
交互：- 鼠标左键：拖拽平移视角- 鼠标右键：围绕中心旋转- 滚轮：缩放- 点击物体：高亮显示（轻微发光或描边）
================================================【底部操作提示条】================================================- 位于页面底部中央- 白色胶囊形背景- 文本内容：  「左键 拖拽移动 | 右键 围绕中心旋转」- 图标可用 SVG 表示鼠标键
================================================【右侧面板：物理实验室】================================================样式：- 白色卡片- 圆角 + 阴影- 固定在右侧- 可纵向滚动- 宽约 280px
顶部：- SVG 图标（实验室 / 骰子风格）- 标题文字：物理实验室- 右上角下拉箭头 SVG
模块一：视角控制- 按钮：正视（俯视图），点击后变成俯视图。- 按钮：复位（3D），点击后会变成初始3d视角- 按钮：物体复位，所有物体水平或者竖直摆放
模块二：刻度尺设置- 按钮：旋转尺子（横/竖）- 文本：当前量程 20 cm- 一个横向滑块（SVG + CSS）- 精度按钮组：  - 1mm（蓝色高亮）  - 2mm  - 5mm
模块三：测量工具- 一个大按钮- 左侧为「直角尺 / 游标卡尺」SVG- 文本：游标卡尺
模块四：被测物体（网格布局）下面物体点击后，生成3d物体。- 物理书- 1元硬币- 水杯- 手机- 白肥皂- 铅笔每个为图标 + 文字的卡片按钮
模块五：清空桌面- 红色描边按钮- 垃圾桶 SVG 图标- 文本：清空桌面
================================================【技术细节要求】================================================- 所有图标必须用 SVG 手写- UI 与 3D 层级分离（UI 为 HTML/SVG，3D 为 canvas）- 使用 CSS Grid / Flex 实现布局- 自适应窗口尺寸- 代码结构清晰，有必要注释- 初始时候，一把尺子水平在桌面，然后没有任何其他物体================================================【输出要求（再次强调）】================================================- 只输出 HTML- 不要解释- 不要省略
把上述提示词发给大模型，然后大模型会输出一个 html内容，你可以把内容粘贴在记事本上，然后保存为“物体测量.html”,运行后会看到效果。如果需要完整源码，可以后台留言，进入讨论群。