three.js NURBSSurface 指南：用 NURBS 曲面构建参数化三维几何

three.js NURBSSurface 指南用 NURBS 曲面构建参数化三维几何【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsNURBSSurface 是 three.js 官方 addonexamples/jsm/curves/NURBSSurface.js中用于表示 NURBS非均匀有理 B 样条曲面的核心类。本篇以 docs/pages/NURBSSurface.html.md 为主线结合其源码实现与官方示例webgl_geometry_nurbs讲解如何在三维场景中构造 NURBS 曲面、理解其双参数求值原理并把曲面渲染成可交互的网格对象。读完本文你将能独立完成一个 NURBS 曲面从控制点网格、节点向量到ParametricGeometry网格化的完整落地流程。NURBS 曲面与 NURBSSurface 的定位NURBSNon-Uniform Rational B-Spline非均匀有理 B 样条是 CAD、工业建模与动画行业中描述曲线/曲面/曲体的标准数学表示。其核心思想是用一组控制点control points、节点向量knots与次数degree去定义一条光滑的几何对象并且每个控制点还可以携带权重wweight从而精确表示圆锥曲线、球面等有理几何体。在 three.js 中NURBS 家族由三个 addon 类与一个工具模块构成全部位于examples/jsm/curves/目录文件内容NURBSCurve.js一维 NURBS 曲线继承自CurveNURBSSurface.js二维 NURBS 曲面本文主题NURBSVolume.js三维 NURBS 体NURBSUtils.js底层求值算法工具集从源码结构看NURBSSurface.js 是一个普通类而非Curve子类它不像NURBSCurve那样继承 three.js 的Curve因此不提供getPoints、getSpacedPoints等曲线方法也不具备toJSON/fromJSON序列化能力对外只暴露一个核心求值方法getPoint( t1, t2, target )。这意味着它通常不直接作为网格几何体使用而是作为一个**采样函数**被 ParametricGeometry 等双参数几何类消费。文档中对类本身的说明NURBSSurface.html.md也非常简洁实现基于形如(x, y [, z0 [, w1]])的控制点其中w代表权重。导入 NURBSSurfaceNURBSSurface属于 three.js 的 addon附加组件不在核心构建中必须显式导入import { NURBSSurface } from three/addons/curves/NURBSSurface.js;在仓库中该模块同时通过 examples/jsm/Addons.js 的export * from ./curves/NURBSSurface.js统一导出因此如果你的构建入口引用的是整合后的 addons 模块也可以从中获得同名导出。与之配套求值引擎 NURBSUtils.js 建议以命名空间方式导入import * as NURBSUtils from three/addons/curves/NURBSUtils.js;需要手动引入 addon 的机制与官方Installation章节一致通过three/addons/这类 import map 或打包器别名指向仓库的examples/jsm/目录即可参见示例页 webgl_geometry_nurbs.html 的 import map 写法。构造函数与参数详解new NURBSSurface( degree1, degree2, knots1, knots2, controlPoints )对照 NURBSSurface.js 的构造实现与官方文档五个参数含义如下参数类型说明degree1number曲面沿u方向第一参数方向的 NURBS 次数例如 2 表示二次、3 表示三次degree2number曲面沿v方向第二参数方向的 NURBS 次数knots1Arraynumber第一方向u的节点向量扁平的数值数组knots2Arraynumber第二方向v的节点向量扁平的数值数组controlPointsArrayArray(Vector2|Vector3|Vector4)二维控制点阵列即数组的数组节点向量与控制点阵列的尺寸约束构造函数中隐含了一组必须满足的几何尺寸关系NURBSSurface.jsconst len1 knots1.length - degree1 - 1; // 第一方向应提供的控制点行数 const len2 knots2.length - degree2 - 1; // 第二方向应提供的控制点列数也就是说knots1.length必须等于degree1 len1 1knots2.length必须等于degree2 len2 1而controlPoints应是一个len1 × len2的二维阵列。若二者不匹配遍历到数组越界处会得到undefined最终产生NaN。官方示例 webgl_geometry_nurbs.html 给出了一组典型数据degree1 2、degree2 3knots1 [0, 0, 0, 1, 1, 1]长度 6故len1 3、knots2 [0, 0, 0, 0, 1, 1, 1, 1]长度 8故len2 4控制点阵为3 × 4共 12 个控制点。控制点会被统一归一化为 Vector4构造函数会把传入的每个控制点读取x/y/z/w分量并拷贝为一个新的Vector4存入实例NURBSSurface.jsthis.controlPoints[ i ][ j ] new Vector4( point.x, point.y, point.z, point.w );因此曲面内部始终在齐次坐标空间homogeneous space(wx, wy, wz, w)中工作权重w参与全部求值。文档把控制点记作(x, y [, z0 [, w1]])需要留意的是由于构造逻辑直接读取point.w若传入不带w的二维/三维向量会引入undefined。从实现角度看实践中推荐直接以Vector4(x, y, z, w)提供控制点w 1表示非有理权重即普通 B 样条w越大控制点对曲面的牵引力越强见 webgl_geometry_nurbs.html 中的注释 higher means stronger attraction。公开属性Properties构造函数仅把输入原样存入同名属性NURBSSurface.js.degree1 : number— 第一 NURBS 次数u方向.degree2 : number— 第二 NURBS 次数v方向.knots1 : Array.number— 第一方向节点向量.knots2 : Array.number— 第二方向节点向量.controlPoints : Array.Array.Vector4— 内部保存的二维控制点阵列注意与传入参数不同实例属性中所有点都已是Vector4。这些属性均可读写。若你的业务需要在创建后动态修改控制点或节点直接改写对应数组即可后续getPoint调用会读取最新值。getPoint( t1, t2, target )曲面的双参数求值getPoint是NURBSSurface唯一的对外方法getPoint( t1 : number, t2 : number, target : Vector3 ) : void参数范围说明t1[0, 1]第一个插值因子代表曲面上的u位置t2[0, 1]第二个插值因子代表曲面上的v位置target—结果写入的目标Vector3必传方法不返回新对象从实现看NURBSSurface.jst1/t2并不会直接进入 NURBS 算法而是先被线性映射到节点向量定义域上const u this.knots1[ 0 ] t1 * ( this.knots1[ this.knots1.length - 1 ] - this.knots1[ 0 ] ); const v this.knots2[ 0 ] t2 * ( this.knots2[ this.knots2.length - 1 ] - this.knots2[ 0 ] ); NURBSUtils.calcSurfacePoint( this.degree1, this.degree2, this.knots1, this.knots2, this.controlPoints, u, v, target );即对于任意t1, t2 ∈ [0, 1]得到的u落在[knots1[0], knots1[knots1.length-1]]v落在[knots2[0], knots2[knots2.length-1]]。示例中节点向量两端均为 0 和 1clamped/夹紧型节点因此u t1、v t2。注意若你的节点向量不以0起始或以非1结束采样时仍然传[0,1]范围的归一化因子即可映射会自动完成——但实际使用的u/v只覆盖节点向量两端之间超出曲线实际定义区间的区域不会被求值。该方法把结果写入调用者传入的target返回void复用对象、避免每帧分配内存的设计取向与 three.js 惯例一致。底层算法NURBSUtils.calcSurfacePoint 的求值链条getPoint的全部数学工作由 NURBSUtils.js 的calcSurfacePoint完成。读懂这条调用链就理解了 NURBS 曲面求值的本质findSpan(p, u, U)NURBSUtils.js用二分查找确定参数u落在节点向量中的哪个区间knot span边界情况直接返回p或n - 1calcBasisFunctions(span, u, p, U)NURBSUtils.js按《The NURBS Book》第 70 页算法 A2.2 递推计算p1个非零 B 样条基函数值对v方向重复上述两步得到Nu与Nv张量积累加NURBSUtils.js先用Nu沿u方向加权求和得到中间点temp[l]乘上控制点齐次坐标及其权重再用Nv沿v方向加权求和得到齐次结果Sw透视除法NURBSUtils.jsSw.divideScalar(Sw.w)把齐次坐标投影回三维写入target。这里的注释明确引用了教材出处如第 82 页算法 A3.1、第 134 页算法 A4.3代码与经典 NURBS 教科书算法一一对应是理解实现正确性的可靠依据。实战把 NURBS 曲面渲染成网格由于 NURBS 曲面是参数化曲面最常见的渲染路径是借助ParametricGeometry按网格分辨率采样。完整可运行的片段取自官方示例 webgl_geometry_nurbs.htmlimport * as THREE from three; import { NURBSSurface } from three/addons/curves/NURBSSurface.js; import { ParametricGeometry } from three/addons/geometries/ParametricGeometry.js; // 1. 定义 3×4 的控制点网格Vector4末位为权重 w const nsControlPoints [ [ new THREE.Vector4( - 200, - 200, 100, 1 ), new THREE.Vector4( - 200, - 100, - 200, 1 ), new THREE.Vector4( - 200, 100, 250, 1 ), new THREE.Vector4( - 200, 200, - 100, 1 ) ], [ new THREE.Vector4( 0, - 200, 0, 1 ), new THREE.Vector4( 0, - 100, - 100, 5 ), // 权重 5把曲面强烈拉向该点 new THREE.Vector4( 0, 100, 150, 5 ), new THREE.Vector4( 0, 200, 0, 1 ) ], [ new THREE.Vector4( 200, - 200, - 100, 1 ), new THREE.Vector4( 200, - 100, 200, 1 ), new THREE.Vector4( 200, 100, - 250, 1 ), new THREE.Vector4( 200, 200, 100, 1 ) ] ]; // 2. 次数与夹紧型节点向量两端各重复 degree1 次 const degree1 2; const degree2 3; const knots1 [ 0, 0, 0, 1, 1, 1 ]; const knots2 [ 0, 0, 0, 0, 1, 1, 1, 1 ]; // 3. 构造 NURBS 曲面 const nurbsSurface new NURBSSurface( degree1, degree2, knots1, knots2, nsControlPoints ); // 4. 把 getPoint 包装成 ParametricGeometry 需要的 (u, v, target) 采样函数 function getSurfacePoint( u, v, target ) { return nurbsSurface.getPoint( u, v, target ); } // 5. 以 20×20 的细分网格采样生成曲面几何体 const geometry new ParametricGeometry( getSurfacePoint, 20, 20 ); const material new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader().load( textures/uv_grid_opengl.jpg ), side: THREE.DoubleSide } ); const mesh new THREE.Mesh( geometry, material ); scene.add( mesh );关键点回顾ParametricGeometry内部会对u、v ∈ [0,1]做20 × 20的规则网格采样并把每个采样点传给nurbsSurface.getPoint把采样结果拼成顶点数据——这正是曲面 参数几何 网格的标准组合方式中间一行控制点权重被设为5其余为1曲面会在中间区域被明显吸附抬升直观展示权重对形状的控制力因为曲面有大幅度弯曲材质需开side: THREE.DoubleSide以免背面不可见该示例页 webgl_geometry_nurbs.html 还同屏展示了NURBSCurve控制多边形与曲线采样以及 NURBSVolume.js 的 NURBS 体示例可以对照三者的用法差异。使用约束与常见问题综合文档、源码与示例使用NURBSSurface时应注意t1/t2必须在[0, 1]内。文档明确要求该范围超出会导致u/v映射到节点向量范围之外进入未定义区间。target是必传参数。getPoint不返回新Vector3漏传会直接抛错这一点与Curve.getPoint的可选 target 不同。控制点阵列尺寸必须匹配节点向量与次数knots1.length degree1 行数 1knots2.length degree2 列数 1。优先使用Vector4控制点并显式给出w想让曲面插值到网格边界两端使用夹紧型节点向量首尾各重复degree 1次相同的节点值如示例的[0,0,0,1,1,1]。权重越大引力越强、权重为 0 会退化w1为常规有理权重示例注释把权重解释为更强的吸附力。文档中的z0、w1仅是概念性默认值实际以你显式传入的分量值为准。NURBSSurface 不是Curve因而无法直接用.getPoints()或参与CurvePath/挤出等依赖Curve接口的管线如需曲线可改用NURBSCurve它继承Curve并额外提供getTangent、toJSON/fromJSON见 NURBSCurve.js。相关 API 一览曲线NURBSCurve一维继承Curve见 NURBSCurve.js曲面NURBSSurface二维本文主题见 NURBSSurface.js曲体NURBSVolume三维getPoint接受t1, t2, t3见 NURBSVolume.js底层工具findSpan、calcBasisFunctions、calcBSplinePoint、calcBasisFunctionDerivatives、calcBSplineDerivatives、calcKoverI、calcRationalCurveDerivatives、calcNURBSDerivatives、calcSurfacePoint、calcVolumePoint全部从 NURBSUtils.js 导出统一再导出入口examples/jsm/Addons.js。若想观察三维实时效果可在本地仓库目录起静态服务后打开 examples/webgl_geometry_nurbs.html 运行该页面把 NURBS 曲线、曲面与体积三套 API 放在同一场景中对照展示是理解NURBSSurface用法最直接的参照物。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考