THREE.js 管道体TubeGeometry

THREE.js封装了很多几何体供我们使用，其中一个叫TubeGeometry的十分神奇，
它根据3d曲线curve来张成一条管道，我们来看看它的构造函数。

TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)

其中各参数描述如下：
path — Curve - A path that inherits from the Curve base class（曲线，路径，即管道的形状）
tubularSegments — Integer - The number of segments that make up the tube, default is 64（管道分成多少段）
radius — Float - The radius of the tube, default is 1（管道的半径）
radialSegments — Integer - The number of segments that make up the cross-section, default is 8 （管道口分成多少段，即管道口是几边形）
closed — Boolean Is the tube open or closed, default is false （是否闭合管道，首尾相接的意思）

下面给出官网的一段示例：

function CustomSinCurve( scale ) {THREE.Curve.call( this );this.scale = ( scale === undefined ) ? 1 : scale;}CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;CustomSinCurve.prototype.getPoint = function ( t ) {var tx = t * 3 - 1.5;var ty = Math.sin( 2 * Math.PI * t );var tz = 0;return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );};var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

这段代码大概是声明了一个CustomSinCurve类，这个类继承自THREE.Curve类，然后重写了类的getPoint方法。

在THREE.Curve类中getPoint方法的描述：返回在曲线中给定位置 t 的向量

.getPoint ( t : Float, optionalTarget : Vector ) : Vectort - A position on the curve. Must be in the range [ 0, 1 ]. 
optionalTarget — (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created. Returns a vector for a given position on the curve.

最后生成了这样一段曲线：

在这篇文章的启发下，我们也可以按一定规律生成一些点的坐标，用这些点生成一条曲线，然后通过这条曲线构造一个TubeGeometry几何体。

THREE.js中提供的生成曲线的方法有挺多的，比如

ArcCurve()CatmullRomCurve3()CubicBezierCurve3()LineCurve3()QuadraticBezierCurve3()

可以到官网查看相关资料。

然后造了一棵植物

加一点粒子：