请使用3dweb技术，帮我创建制作一个高尔顿板模拟器，以便可以更直观地理解概率、统计、正态分布、大数法则、二项分布等抽象数学概念 注意： 1、所有代码都在index.html上 2、通过图表自动统计和显示模拟结果 3、页面需要进行移动端适配 4、确保移动端下控制面板和图表统计结果面板不会挡住模拟器的显示和相关操作 好的，下面是一个使用 Three.js（一个流行的 3D JavaScript 库）和 Cannon-es（一个物理引擎）来创建一个高尔顿板模拟器的 `index.html` 文件。这个模拟器将包含 3D 可视化、物理模拟、结果统计图表，并进行了移动端适配。 **核心技术:** 1. **Three.js:** 用于创建 3D 场景、物体（小球、钉子、隔板）、相机、光照和渲染。 2. **Cannon-es:** 用于处理 3D 物理模拟（重力、碰撞）。它是 Cannon.js 的一个维护分支。 3. **Chart.js:** 用于绘制柱状图，显示小球落入不同区间的统计结果。 4. **HTML/CSS:** 用于页面结构、布局和样式，包括响应式设计以适应移动端。 **`index.html` 文件内容:** ```html 高尔顿板 (Galton Board) 模拟器

控制面板

状态: 未开始

统计结果 (正态分布)

``` **代码说明:** 1. **HTML 结构:** * `simulation-container`: 用于显示 Three.js 的 3D 场景。 * `info-panels`: 包含控制面板和图表，使用 Flexbox 布局。 * `controls`: 包含滑块（小球数量、钉子行数、投放间隔）和开始按钮。 * `chart-container`: 包含 Chart.js 的 `` 元素。 * 引入了 Three.js, Cannon-es, 和 Chart.js 的 CDN 链接。 2. **CSS 样式:** * 基本的页面布局，确保模拟器区域和信息面板区域合理分配空间。 * **移动端适配 (`@media (max-width: 600px)`)**: * 当屏幕宽度小于 600px 时，将 `info-panels` 从横向排列改为纵向堆叠。 * 给模拟器区域 `simulation-container` 设置一个相对固定的视口高度 (`60vh`)，信息面板区域 (`info-panels`) 占据剩余高度 (`max-height: 40vh`) 并允许内部滚动 (`overflow-y: auto`)，这样它们就不会互相遮挡。 * 面板宽度调整为接近屏幕宽度。 * 确保 Chart.js 的画布正确显示和缩放。 3. **JavaScript 逻辑:** * **全局变量:** 存储场景、相机、渲染器、物理世界、物体数组、统计数据等。 * **`init()`:** 初始化 Three.js（场景、相机、光照、渲染器）、Cannon-es（物理世界、重力）、Chart.js（图表实例）和事件监听器，并调用 `setupBoard()` 创建初始的高尔顿板。 * **`setupBoard()`:** * 核心函数，用于创建高尔顿板的物理和视觉元素。 * **清理:** 先调用 `clearBoard()` 移除旧的物体。 * **创建钉子 (Pegs):** 循环创建指定行数的钉子。每个钉子包含一个 Three.js 的 `Mesh` (用于显示) 和一个 Cannon-es 的 `Body` (用于物理计算，设为静态 `mass: 0`)。钉子在物理引擎中用球体近似，计算更简单。 * **创建隔板 (Dividers):** 在底部创建一系列垂直的隔板，形成收集小球的槽。同样包含 `Mesh` 和静态 `Body`。还添加了左右边界墙。 * **初始化统计:** 创建 `binCounts` 数组（长度为 `行数 + 1`），全部初始化为 0。 * **更新图表:** 设置图表的标签和初始数据。 * **物理材质:** 定义球、钉子、隔板的物理材质及它们之间的接触属性（摩擦力 `friction`、恢复系数/弹性 `restitution`）。 * **`clearBoard()`:** 移除场景和物理世界中的所有钉子、隔板和小球。 * **`createBall()`:** 创建单个小球，包含随机颜色的 `Mesh` 和动态的 `Body` (有质量 `mass: 0.1`)。初始位置设置在顶部中央略上方，带有微小的随机水平偏移。 * **`animate()`:** 模拟的主循环，由 `requestAnimationFrame` 驱动。 * 更新物理世界 (`world.step()`)。 * 遍历所有小球，将 Three.js `Mesh` 的位置和旋转与 Cannon-es `Body` 同步。 * **统计:** 检查每个小球是否落入底部（低于某个 Y 阈值且速度很低）。如果落入，根据其 X 坐标计算所属的槽 (`binIndex`)，增加对应槽的计数 (`binCounts[binIndex]++`)，并将小球标记为 `settled`。可选地，可以将稳定的小球从物理模拟中移除或设为静态以提高性能。 * **移除越界球:** 检查并移除飞出边界太远的小球。 * **更新图表:** 如果有小球落入槽中，则调用 `updateChart()` 更新图表显示。 * 渲染 Three.js 场景 (`renderer.render()`)。 * 检查模拟是否结束（所有球已投放且已统计）。 * **`updateChart()`:** 更新 Chart.js 图表的数据和标签。 * **`startSimulation()`:** 由“开始/重置”按钮触发。 * 停止任何正在进行的模拟。 * 读取滑块的值更新配置。 * 如果行数改变，调用 `setupBoard()` 重建板子；否则只清理小球和计数。 * 重置计数器和状态。 * 使用 `setInterval` 按设定的 `dropDelay` 逐个创建和投放小球。 * 启动 `animate` 循环。 * **`stopSimulation()`:** 停止动画循环和投放小球的定时器。 * **`onWindowResize()`:** 响应浏览器窗口大小变化，调整相机宽高比和渲染器尺寸。 * **事件监听:** 为按钮和滑块添加事件监听器。 * **初始化调用:** 页面加载完成后调用 `init()`。 **如何使用:** 1. 将以上所有代码复制并粘贴到一个名为 `index.html` 的文本文件中。 2. 用现代的网页浏览器（如 Chrome, Firefox, Edge, Safari）打开这个 `index.html` 文件。 3. 你应该能看到一个 3D 的高尔顿板。 4. 调整滑块来设置小球数量、钉子行数和投放速度。 5. 点击“开始/重置模拟”按钮，小球将开始下落。 6. 底部的柱状图会实时更新，显示落入每个槽的小球数量，最终形成近似正态分布的形状。 7. 尝试在桌面浏览器和手机浏览器上访问，观察响应式布局的效果。控制面板和图表在小屏幕上会堆叠在模拟区域下方，并且可以滚动查看。 这个模拟器可以帮助你直观地理解： * **概率与随机性:** 每个小球碰到钉子都有近似 50% 的概率向左或向右。 * **二项分布:** 每层的结果可以看作一次伯努利试验，多次试验（多行钉子）后，小球最终位置的分布趋向于二项分布。 * **正态分布 (中心极限定理):** 当行数足够多时，二项分布近似于正态分布，你会看到中间槽的小球最多，两边逐渐减少，形成钟形曲线。 * **大数法则:** 模拟的小球数量越多，最终得到的分布形状越接近理论上的正态分布曲线。