在线 3D 图形计算器：在浏览器里"转一转"数学对象
一款由 WebGL（three.js）驱动的交互式 3D 绘图仪。可渲染精度可调的 z=f(x,y) 曲面、参数空间曲线或 3D 散点点云——支持逐个添加或批量粘贴点。通过 OrbitControls 旋转、缩放与平移，可重置视图并复制散点，全部在浏览器本地运行。
三维图形计算器使用说明
WebGL 中的曲面、参数曲线和点云
三维图形计算器在交互式 WebGL 视口中渲染曲面 z = f(x, y)、参数空间曲线 (x(t), y(t), z(t)) 与散点点云。切换模式、输入表达式或点，然后用鼠标或触摸环绕场景，从任意角度检视形状。所有计算在浏览器本地完成。
01 选择模式
在 Surface 模式下，输入 z 作为 x 和 y 的函数（例如 sin(sqrt(x^2 + y^2))）并设置 x 和 y 的范围；resolution 控制网格密度。在 Parametric 模式下，在 [tmin, tmax] 上输入 x(t)、y(t) 和 z(t) 作为参数 t 的函数；samples 控制定义曲线的点数。在 Scatter 模式下，通过输入坐标并点击 + 添加单个 (x, y, z) 点；使用 Clear 移除所有点，使用 × 移除一个点。
点击并拖拽可旋转相机，滚动可缩放，右键拖拽（或双指拖拽）可平移。视图通过 WebGL 在浏览器中渲染，并包裹在 ClientOnly 中，因此不影响服务端渲染。
三种模式可以叠加显示。例如同时显示一个曲面和一条穿过它的参数曲线，观察曲线与曲面的交点。这种叠加能力是理解"曲线在曲面上"这类抽象概念的有力工具。
所有表达式求值、网格生成、渲染都在浏览器本地完成。函数表达式与点数据从未离开你的设备，断网后只要页面已加载仍可使用。
- Surface：z = f(x,y)，在矩形网格上采样
- Parametric：当 t 在 [tmin, tmax] 内变化时描绘的曲线
- Scatter：离散的 (x, y, z) 点云
- 更高的 resolution/samples 会得到更平滑的结果，但代价是性能
- 所有计算在浏览器本地完成，不上传数据
02 从二元函数到空间曲面
一元函数 y = f(x) 的图像是一条平面曲线；二元函数 z = f(x, y) 的图像则是悬浮在 xy 平面上方的一张曲面——每个 (x, y) 对应一个高度 z。把平面曲线"吹"成空间曲面，让我们可以讨论地形、温度场、电势分布这类"两个自变量"的现象。这是从单变量微积分跨入多元微积分的第一道门槛。
计算机画不出真正连续的曲面，只能把定义域划分成 N×N 的网格，在每个格点上算出 z，再把相邻四个格点连成两个三角形。N 越大三角形越多、曲面越光滑，但渲染开销也越大。分辨率 24 适合快速浏览，48-64 适合最终展示。理解这一点，你就明白了为什么"降低分辨率可以提速"。
透视投影模拟人眼"近大远小"的视觉效果。每个 3D 点先经模型矩阵、视图矩阵、投影矩阵三次变换，再映射到屏幕坐标，最后由 GPU 把三角形逐个光栅化成像素。这一整套流程由 WebGL 在显卡上完成，因此可以流畅处理几十万个顶点。
03 参数方程与空间曲线
有些曲线没法写成 y = f(x) 或 z = f(x, y)，比如一个圆、一个纽结、一段行星轨道——它们往往自相交或回溯。参数方程的解法是引入第三个变量 t，把 x、y、z 都写成 t 的函数。t 像时间一样从 tmin 流向 tmax，动点 (x(t), y(t), z(t)) 就在空间中"走"出一条轨迹。
圆柱螺旋 (cos t, sin t, t) 是最经典的例子：当 t 从 0 增加到 6π，动点绕 z 轴旋转三圈，同时匀速上升。DNA 双螺旋、弹簧、楼梯扶手都是螺旋的变体。通过调整 x(t)、y(t)、z(t) 的表达式，你可以构造出纽结、利萨茹图形、甚至模拟行星轨道。
样本数（samples）决定曲线的光滑程度。光滑简单的曲线（圆、椭圆）100 个点足够；扭曲复杂的（纽结、高频振荡）建议 500–2000。如果曲线出现"折线感"，把样本数加倍再看。注意样本越多渲染越慢。
模式切换
- Surface在网格上绘制 z = f(x, y)。
- Parametric绘制参数曲线 x(t)、y(t)、z(t)。
- Scatter绘制单个 3D 点。
曲面控件
- z = f(x, y)用 x 和 y 表示高度的表达式。
- x / y 范围设置为曲面采样的矩形定义域。
- resolution网格密度（24–64）；越高越平滑但越慢。
参数控件
- x(t) / y(t) / z(t)在参数 t 上定义曲线的三个表达式。
- tmin / tmax参数 t 的范围。
- samples曲线上的点数（100–2000）。
散点控件
- x / y / z fields新点的坐标。
- +将输入的点添加到点云。
- Clear清除所有散点（同时清空批量文本框）。
- × (on a point)移除该单个点。
- bulk text box一次粘贴或输入多个点，每行一个点，用逗号或空格分隔 x、y、z。
- Apply解析批量文本框，并用其中的点替换当前点云。
- Copy将当前所有点复制为每行 x, y, z 的文本，便于粘贴到别处。
视口
- drag环绕/旋转 3D 场景。
- scroll放大和缩小相机。
- right-drag平移相机。
- reset view画布上的按钮，在鼠标平移/缩放后恢复默认视角。
- 试验时降低 resolution，最终渲染时再提高。
- 参数曲线非常适合螺旋线、轨道和轨迹。
- 如果曲面看起来锯齿状，提高 resolution 或缩小 x/y 范围。
- 必须在浏览器中启用 WebGL 才能显示 3D 视图。
- 曲面 z=f(x,y) 无法直接画球面等隐式曲面，需拆成两半或用参数式。
- 样本数决定参数曲线光滑度：简单曲线 100 点，复杂曲线 500–2000。
- 从正上方看曲面得到"等高线视角"，从侧面看能辨认驻点与鞍点。
- 所有计算在本地完成，断网后页面已加载仍可使用。
免费的在线 3D 绘图工具，使用 WebGL 在你的浏览器里实时渲染曲面 z=f(x,y)、参数曲线 (x(t),y(t),z(t)) 与三维点云。可用鼠标旋转、缩放、平移视角，从任意角度观察数学对象。无需插件、无需注册，数据不出本机。
这个工具能做什么
你输入表达式或一组点，它在三维空间里把对应的几何对象画出来。曲面模式画 z=f(x,y) 这样的"地形图"；参数曲线模式画螺旋线、圆环结等空间轨迹；散点模式把一组 (x,y,z) 点画成点云。所有对象都可以用鼠标从任何角度查看。
从二维到三维：多一个变量，多一个世界
一元函数 y=f(x) 的图像是一条平面曲线；二元函数 z=f(x,y) 的图像则是悬浮在 xy 平面上方的一张曲面——每个 (x,y) 对应一个高度 z。把平面曲线"吹"成空间曲面，让我们可以讨论地形、温度场、电势分布这类"两个自变量"的现象。这是从单变量微积分跨入多元微积分的第一道门槛。
3D 投影：怎么把立体"压扁"到屏幕上
你的屏幕是二维的，但场景是三维的，所以引擎必须做一次"投影"。最常用的透视投影模拟人眼：近大远小。每个 3D 点先经模型矩阵、视图矩阵、投影矩阵三次变换，再映射到屏幕坐标，最后由 GPU 把三角形逐个光栅化成像素。这一整套流程由 WebGL 在显卡上完成，因此可以流畅处理几十万个顶点。
参数方程：用一根线穿起整个形状
有些曲线没法写成 y=f(x) 或 z=f(x,y)，比如一个圆、一个纽结、一段行星轨道——它们往往自相交或回溯。参数方程的解法是引入第三个变量 t，把 x、y、z 都写成 t 的函数。t 像时间一样从 tmin 流向 tmax，动点 (x(t),y(t),z(t)) 就在空间中"走"出一条轨迹。圆柱螺旋 (cos t, sin t, t) 是最经典的例子。
历史背景：从解析几何到计算机图形学
17 世纪笛卡尔与费马创立解析几何，第一次把"曲线"翻译成"方程"。19 世纪蒙日发展画法几何，让工程师能用二维图纸精确描述三维物体。20 世纪下半叶，随着计算机与 GPU 出现，苏泽兰、卡特穆尔、佩林等人开创了计算机图形学，让实时旋转的 3D 图形成为日常。今天你手中的这个工具，站在三百多年数学与工程的积累之上。
表达式语法
曲面：用 x、y 表示 z，例如 sin(sqrt(x^2+y^2)) 是同心涟漪，x^2-y^2 是马鞍面，exp(-(x^2+y^2)/4) 是二维高斯钟。参数曲线：用 t 表示 x、y、z，例如 x=cos(t)、y=sin(t)、z=t 是螺旋。所有 2D 模式可用的函数（sin、cos、exp、log、sqrt、pow 等）与常数 pi 在这里都可用。
如何使用：三步上手
第一步，选 Surface 模式，输入 sin(sqrt(x^2+y^2))，把 x、y 范围都设为 −10 到 10，分辨率 48，你会看到一圈圈的同心波纹。第二步，切到 Parametric，输入 cos(t)、sin(t)、t，t 范围 0 到 6*pi，观察一条螺旋从地面盘旋而上。第三步，切到 Scatter，输入几个 (x,y,z) 点或粘贴一组数据。三种模式可以叠加显示。
现实中的应用
气象学用等值面可视化气压与温度；医学影像用 CT/MRI 重建器官三维模型；机械工程用 CAD 描述零件表面；机器学习里，损失函数 L(w,b) 是一张高维曲面，梯度下降就是在它上面"滚下山"。就连电子游戏里的角色与场景，本质也是数百万个三角形的拼接——和这个工具渲染曲面的方式一模一样。
数值方法：网格采样
计算机无法画出"连续"的曲面，只能把定义域划分成 N×N 的网格，在每个格点上算出 z，再把相邻四个格点连成两个三角形。N 越大三角形越多、曲面越光滑，但渲染开销也越大。分辨率 24 适合快速浏览，48-64 适合最终展示。理解这一点，你就明白了为什么"降低分辨率可以提速"。
获得漂亮图形的小技巧
曲面有剧烈振荡时（例如 sin(x*y) 在大范围），先缩小区间看清结构再放大。参数曲线的样本数应与曲线复杂度匹配——光滑的圆 100 点足够，纽结可能要 1000 以上。点云若过于密集导致卡顿，可以先抽样一部分观察分布。最后，多用鼠标旋转：从正上方看曲面得到"等高线视角"，从侧面看能辨认驻点与鞍点。
局限性
本工具是数值可视化，不做符号计算。曲面必须有显式表达式 z=f(x,y)，无法直接画隐式曲面（如球面 x²+y²+z²=1 需要拆成两半或用参数式）。极端分辨率下可能超出 GPU 内存；远离原点的大幅值会因浮点精度损失出现抖动。这些是所有实时 3D 渲染器共有的边界，理解它们比避开它们更重要。
常见问题
Q可以画哪些 3D 对象？
三类：曲面 z=f(x,y)（例如马鞍面、波纹面）、参数曲线 (x(t),y(t),z(t))（例如螺旋线、纽结）、散点点云 (x,y,z)。三种模式可以叠加，构成更丰富的场景。
Q为什么我画的球只显示了上半部分？
因为 z=f(x,y) 这种形式对每个 (x,y) 只能给出一个 z 值，无法表达"上下两个面"。球面 x²+y²+z²=1 是隐式曲面，要么拆成 z=±sqrt(1−x²−y²) 两张曲面，要么改用参数式 (sin u·cos v, sin u·sin v, cos u)。
Q什么是参数方程？为什么要用它？
参数方程把 x、y、z 都表示成第三个变量 t 的函数。它的好处是可以描述"自相交"或"回溯"的曲线，比如圆、纽结、行星轨道，而 y=f(x) 无法表达这些。直观理解：t 像时间，曲线是动点的轨迹。
Q曲面为什么会有"三角形"的颗粒感？
计算机画不出真正连续的曲面，只能在 N×N 个格点上采样高度，然后把相邻四点连成两个三角形拼成网格。分辨率越高三角形越多、视觉越光滑，但 GPU 负担也越重。理解这一点，就知道"颗粒感"不是错误，而是数值离散化的本质。
Q如何让曲面更光滑？
把 resolution 提高到 48 或 64；或者缩小 x/y 范围让同样的采样点更密集。如果曲面有尖锐特征（如锥顶、自相交），可以局部放大并使用更高分辨率。注意：分辨率翻倍，渲染负载大约变为 4 倍。
Q可以旋转视角吗？
可以。左键拖拽旋转，滚轮缩放，右键拖拽（或双指拖拽）平移。点 reset view 可以回到默认相机。多角度观察是 3D 可视化的核心价值——很多在正面看不见的驻点、鞍点、对称性，从侧面一眼就能看出。
Q为什么 sin(x*y) 在大范围下看起来很乱？
sin(x*y) 的"频率"随 |x·y| 增大而变快，在远离原点时几乎是剧烈振荡。有限网格无法跟上这种变化，就会出现"摩尔纹"或随机噪点——这在数值计算里称为"走样"（aliasing）。把范围缩到 [−3,3] 就能看清结构。
Q参数曲线的样本数该怎么选？
光滑简单的曲线（圆、椭圆）100 个点足够；扭曲复杂的（纽结、利萨茹图形）建议 500–2000。一个判断方法：如果曲线出现"折线感"，把样本数加倍再看。注意样本越多渲染越慢。
Q需要什么浏览器或插件？
任何支持 WebGL 的现代浏览器都可以，包括 Chrome、Edge、Firefox、Safari。无需安装任何插件或扩展，three.js 渲染器已随站点打包。如果你的浏览器禁用了 WebGL，3D 视图将无法显示。
Q数据会被上传吗？
不会。所有表达式求值、网格生成、渲染都在你的浏览器中完成，函数与点数据从未离开本机。断网后只要页面已加载，工具仍然可用。