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 ) : Vector
t - 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()
可以到官网查看相关资料。
然后造了一棵植物
加一点粒子: