three.js 装饰环面纽结 DecoratedTorusKnot4b 曲线指南：从参数方程到管状几何体

three.js 装饰环面纽结 DecoratedTorusKnot4b 曲线指南从参数方程到管状几何体【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js本文聚焦 three.js 扩展曲线库CurveExtras中的DecoratedTorusKnot4b装饰环面纽结 4b。它是一条通过纯参数方程定义的三维空间曲线常作为管状几何体Tube的路径来生成极具装饰感的环面纽结造型。读完本文你将掌握该曲线的导入方式、scale参数与getPoint采样方法的工作原理并能直接基于曲线采样点与 TubeGeometry 构建出可在场景中渲染的网格模型。DecoratedTorusKnot4b 是什么DecoratedTorusKnot4b是 three.js 官方示例扩展addonCurveExtras.js 中定义的一组「参数化曲线」之一。该文件头部注释说明这批曲线是「从各种数学资料收集而来的参数曲线公式」formulas collected from various sources。整个文件包含GrannyKnot、HeartCurve、VivianiCurve、KnotCurve、TrefoilKnot以及一整套DecoratedTorusKnot4a/4b/5a/5c系列等曲线类。在 three.js 的类型层级上它直接继承自核心曲线基类Curve文档页首行标注Inheritance: Curve →因此天然具备基类提供的长度计算、均匀采样、点阵生成等能力。它是「装饰」系列中的一个具体变体——所谓环面纽结Torus Knot是指缠绕在一个环面表面上的闭合纽结而「装饰Decorated」变体则在经典环面纽结基础上叠加了多层余弦「花瓣」使截面轮廓与纵向起伏都更加华丽。在源码文件中该类的完整定义位于 examples/jsm/curves/CurveExtras.js且作为具名导出被列入文件末尾的导出对象中。导入addon 必须显式引入DecoratedTorusKnot4b属于 three.js 的 addon扩展模块并不包含在核心库three的默认导出中必须像下面这样显式导入import { DecoratedTorusKnot4b } from three/addons/curves/CurveExtras.js;与之对应在 CurveExtras.js 的源码头部可以看到它本身依赖两个核心符号import { Curve, Vector3 } from three;Curve是它继承的抽象基类Vector3则是getPoint采样结果的载体类型。了解这一依赖关系有助于理解该曲线实例在构造后可以像所有Curve一样被直接传入TubeGeometry、ExtrudeGeometry等需要路径对象的 API。构造函数与 scale 参数new DecoratedTorusKnot4b( scale : number )构造函数的实现位于 examples/jsm/curves/CurveExtras.jsconstructor( scale 40 ) { super(); /** * The curves scale. * * type {number} * default 40 */ this.scale scale; }构造函数先调用super()初始化基类状态再将传入的scale保存到实例的scale属性上。scale 的作用是等比例放大整条参数曲线的世界空间尺寸——getPoint内部计算出的原始采样坐标会被整体乘以this.scale因此 scale 越大曲线在场景中占据的范围就越大。关于默认值有一点需要注意从实际可运行的源码可见构造函数的形参默认值为40即constructor( scale 40 )实例属性scale的默认值同样标注为40。这与文档页中构造函数参数一栏标注的Default is 1存在出入属于注释与实现不一致的已知现象读者在实际使用中应以源码默认参数40为准或显式传入 scale 以避免歧义。const curve new DecoratedTorusKnot4b(); // scale 40 const curve2 new DecoratedTorusKnot4b( 20 ); // scale 20整体缩小一半属性scalecurve.scale : number该属性保存曲线的缩放系数默认40。它是只读语义上的「实例配置」getPoint每次采样时都会读取它做最终缩放。需要放大或缩小装饰纽结时直接修改它即可例如curve.scale 100无需重新构造实例。方法getPoint 采样与参数方程作为Curve的子类DecoratedTorusKnot4b只需实现一个抽象方法getPoint即可获得Curve基类全部派生能力。curve.getPoint( t : number, optionalTarget : Vector3 ) : Vector3t插值因子表示曲线上的位置取值必须在[0, 1]闭区间内。0对应曲线起点1对应终点由于环面纽结是闭合周期曲线t0与t1在几何上重合于同一点。optionalTarget可选的结果写入目标向量。传入已有的Vector3可避免每次采样都新建对象在高频采样场景如每帧重新生成下能显著减少 GC 压力。返回曲线上对应位置的三维坐标向量。该方法**覆写Override**了基类 Curve#getPoint 的抽象接口。其源码实现如下见 examples/jsm/curves/CurveExtras.jsgetPoint( t, optionalTarget new Vector3() ) { const point optionalTarget; const fi t * Math.PI * 2; const x Math.cos( 2 * fi ) * ( 1 0.45 * Math.cos( 3 * fi ) 0.4 * Math.cos( 9 * fi ) ); const y Math.sin( 2 * fi ) * ( 1 0.45 * Math.cos( 3 * fi ) 0.4 * Math.cos( 9 * fi ) ); const z 0.2 * Math.sin( 9 * fi ); return point.set( x, y, z ).multiplyScalar( this.scale ); }将这段参数方程拆开解读可以清晰理解「装饰纽结」的几何构成角度归一化fi t * 2π。将归一化的t展开为一个完整周期0 到 2π保证整条曲线闭合。径向调制1 0.45·cos(3fi) 0.4·cos(9fi)。这是曲线所在环面的「包络半径」函数由频率 3 与频率 9 的两层余弦叠加而成。低频项勾勒出三叶瓣状的主体轮廓高频项则在瓣缘叠加出细碎的花边正是「装饰decorated」名称的来源。平面上的主缠绕cos(2fi)与sin(2fi)分别作为 X、Y 方向的基频分量。也就是说曲线围绕环面中心以「二重」模式绕行单圈t内横向绕行 2 圈。纵向起伏z 0.2·sin(9fi)。Z 轴方向叠加 9 次高频正弦起伏让曲线在空间高度上同步波动形成交错缠绕的立体编织感。等比例缩放multiplyScalar(this.scale)将计算得到的三维坐标统一放大。据此可以推断改变getPoint中各余弦项的振幅与频率就能在CurveExtras同类框架下派生出 4a、5a、5c 等不同形态的姊妹曲线——它们共享「径向余弦叠加 平面绕行 轴向波动」这一参数化设计范式。getPoint 的工程价值有了getPoint基类 Curve 提供的getPointAt(u)按弧长均匀采样、getPoints(divisions)按参数均匀采样、getLength()/getLengths(divisions)曲线长度与分段长度等方法都会被自动实现。例如渲染管状几何体时引擎会自动调用getPointAt沿曲线分布截面而弧长计算则依赖 Curve 的arcLengthDivisions属性——当曲线非常大时适当调高该值可提升等距采样精度。实战把它变成可见的管状几何体官方示例 webgl_geometry_extrude_splines.html 是把这批曲线用于真实渲染的权威参考。该页面构建了一个曲线字典其中DecoratedTorusKnot4b的实例化写法为const splines { // ... DecoratedTorusKnot4a: new Curves.DecoratedTorusKnot4a(), DecoratedTorusKnot4b: new Curves.DecoratedTorusKnot4b(), DecoratedTorusKnot5a: new Curves.DecoratedTorusKnot5a(), DecoratedTorusKnot5c: new Curves.DecoratedTorusKnot5c(), // ... };随后页面将选中的曲线作为路径传入TubeGeometry并配以 GUI 参数控制分段数tubeGeometry new THREE.TubeGeometry( extrudePath, // 例如 splines[DecoratedTorusKnot4b] params.extrusionSegments, // 沿路径方向的细分段数 2, // 管道半径 params.radiusSegments, // 圆周方向的细分段数 params.closed // 是否闭合纽结曲线应当为 true );由此可以总结出一条可直接复用的建模流程import * as THREE from three; import { DecoratedTorusKnot4b } from three/addons/curves/CurveExtras.js; // 1. 构造曲线scale 决定场景中的整体尺寸 const path new DecoratedTorusKnot4b( 40 ); // 2. 沿路径生成管状几何体 const geometry new THREE.TubeGeometry( path, 200, 3, 12, true ); // 3. 用常规材质与网格渲染 const material new THREE.MeshStandardMaterial( { color: 0x8c7ae6, metalness: 0.4, roughness: 0.35 } ); const mesh new THREE.Mesh( geometry, material ); scene.add( mesh );需要注意DecoratedTorusKnot4b是闭合曲线构造TubeGeometry时务必把closed参数设为true否则路径首尾衔接处会留下明显断口。另外由于曲线自身携带了 9 次高频径向分量tubularSegments沿路径的分段数建议不低于 128否则花边细节会出现明显的折线感。若需要曲线本身而非实体管道也可以用curve.getPoints( n )取出一组点配合Line/LineSegments或THREE.BufferGeometry().setFromPoints()绘制样条线甚至可以用getPointAt让一个球体沿曲线匀速运动实现漫游动画。源码位置与扩展阅读关注点仓库路径DecoratedTorusKnot4b类定义与参数方程examples/jsm/curves/CurveExtras.js同文件导出列表examples/jsm/curves/CurveExtras.js管状几何体渲染示例webgl_geometry_extrude_splines.html基类Curve的接口文档Curve.html.md若要进一步探索可对比同一文件中的DecoratedTorusKnot4aCurveExtras.js、DecoratedTorusKnot5a与DecoratedTorusKnot5c的参数方程差异通过调整缠绕数如 2→3、径向余弦的振幅与频率、轴向起伏系数即可在同一个「装饰纽结」家族内演化出完全不同的视觉效果——这正是参数曲线作为程序化建模工具的灵活性所在。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考