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 ) : 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()

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

然后造了一棵植物
这里写图片描述

加一点粒子:
这里写图片描述

扫描二维码关注公众号,回复: 1575017 查看本文章

猜你喜欢

转载自blog.csdn.net/unirrrrr/article/details/80641335
今日推荐