链眼社区:专注于区块链安全,区块链数据分析, 区块链信息整合,区块链技术服务和区块链技术咨询。

Three.js API手册:附件 / 曲线
龙行天下
2021-10-27 14:31:45

弧线(ArcCurve)

EllipseCurve的别名

属性

请参阅EllipseCurve来了解共有属性。

# .isArcCurve : Boolean

用于检查该类或者其派生类是否为ArcCurves(弧线)。默认值为true。

你不应当对这一属性进行改变,它在内部使用,以用于优化。

源代码

src/extras/curves/ArcCurve.js

CatmullRomCurve3

使用Catmull-Rom算法, 从一系列的点创建一条平滑的三维样条曲线。

示例

//Create a closed wavey loop 
var curve = new THREE.CatmullRomCurve3( [ new THREE.Vector3( -10, 0, 10 ), new THREE.Vector3( -5, 5, 5 ), new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 5, -5, 5 ), new THREE.Vector3( 10, 0, 10 ) ] ); 
var points = curve.getPoints( 50 ); 
var geometry = new THREE.BufferGeometry().setFromPoints( points ); 
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); 
// Create the final object to add to the scene 
var curveObject = new THREE.Line( geometry, material );
geometry / extrude / splines

构造函数

CatmullRomCurve3( points : Array, closed : Boolean, curveType : String, tension : Float ) points – Vector3点数组 closed – 该曲线是否闭合,默认值为false。 curveType – 曲线的类型,默认值为centripetal。 tension – 曲线的张力,默认为0.5。

属性

请参阅其基类Curve来了解共有属性。

# .isCatmullRomCurve3 : Boolean

用于检查该类或者其派生类是否为CatmullRomCurve3。默认值为true。

你不应当对这一属性进行改变,它在内部使用,以用于优化。

# .points : Array

定义了这一曲线的Vector3点数组,数组中至少需要两个点。

# .closed : Boolean

当该值为true时,曲线将会闭合(环回自身)。

# .curveType : String

可能的值为centripetal、chordal和catmullrom。

# .tension : float

当.type为catmullrom时,定义catmullrom的张力。

方法

请参阅其基类Curve来了解共有方法。

src/extras/curves/CatmullRomCurve3.js

二维三次贝塞尔曲线(CubicBezierCurve)

创建一条平滑的二维 三次贝塞尔曲线, 由起点、终点和两个控制点所定义。

示例

var curve = new THREE.CubicBezierCurve( new THREE.Vector2( -10, 0 ), new THREE.Vector2( -5, 15 ), new THREE.Vector2( 20, 15 ), new THREE.Vector2( 10, 0 ) ); 
var points = curve.getPoints( 50 ); 
var geometry = new THREE.BufferGeometry().setFromPoints( points ); 
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); 
// Create the final object to add to the scene 
var curveObject = new THREE.Line( geometry, material );

构造函数

CubicBezierCurve ( v0 : Vector2, v1 : Vector2, v2 : Vector2, v3 : Vector2 )

v0 – 起点 v1 – 第一个控制点 v2 – 第二个控制点 v3 – 终点

属性

请参阅其基类Curve来了解共有属性。

# .isCubicBezierCurve : Boolean

用于检查该类或者其派生类是否为CubicBezierCurves。默认值为true。

你不应当对这一属性进行改变,它在内部使用,以用于优化。

# .v0 : Vector2

起点

# .v1 : Vector2

第一个控制点

# .v2 : Vector2

第二个控制点

# .v3 : Vector2

终点

方法

请参阅其基类Curve来了解共有方法。

源代码

src/extras/curves/CubicBezierCurve.js

三维三次贝塞尔曲线(CubicBezierCurve3)

创建一条平滑的三维 三次贝塞尔曲线, 由起点、终点和两个控制点所定义。

示例

var curve = new THREE.CubicBezierCurve3( new THREE.Vector3( -10, 0, 0 ), new THREE.Vector3( -5, 15, 0 ), new THREE.Vector3( 20, 15, 0 ), new THREE.Vector3( 10, 0, 0 ) ); 
var points = curve.getPoints( 50 ); 
var geometry = new THREE.BufferGeometry().setFromPoints( points ); 
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); 
// Create the final object to add to the scene 
var curveObject = new THREE.Line( geometry, material );

构造函数

CubicBezierCurve3( v0 : Vector3, v1 : Vector3, v2 : Vector3, v3 : Vector3 )

v0 – 起点 v1 – 第一个控制点 v2 – 第二个控制点 v3 – 终点

属性

请参阅其基类Curve来了解共有属性。

# .isCubicBezierCurve3 : Boolean

用于检查该类或者其派生类是否为CubicBezierCurves3。默认值为true。

你不应当对这一属性进行改变,它在内部使用,以用于优化。

# .v0 : Vector3

起点

# .v1 : Vector3

第一个控制点

# .v2 : Vector3

第二个控制点

# .v3 : Vector3

终点

方法

请参阅其基类Curve来了解共有方法。

源代码

src/extras/curves/CubicBezierCurve3.js

椭圆曲线(EllipseCurve)

创建一个形状为椭圆的曲线。 将xRadius与yRadius设为相等的值它将会成为一个圆。

示例

var curve = new THREE.EllipseCurve( 0, 0, // ax, aY 10, 10, // xRadius, yRadius 0, 2 * Math.PI, // aStartAngle, aEndAngle false, // aClockwise 0 // aRotation ); 
var points = curve.getPoints( 50 ); 
var geometry = new THREE.BufferGeometry().setFromPoints( points ); 
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); 
// Create the final object to add to the scene 
var ellipse = new THREE.Line( geometry, material );

构造函数

EllipseCurve( aX : Float, aY : Float, xRadius : Float, yRadius : Float, aStartAngle : Radians, aEndAngle : Radians, aClockwise : Boolean, aRotation : Radians )EllipseCurve( aX : Float, aY : Float, xRadius : Float, yRadius : Float, aStartAngle : Radians, aEndAngle : Radians, aClockwise : Boolean, aRotation : Radians )

aX – 椭圆的中心的X坐标,默认值为0。 aY – 椭圆的中心的Y坐标,默认值为0。 xRadius – X轴向上椭圆的半径,默认值为1。 yRadius – Y轴向上椭圆的半径,默认值为1。 aStartAngle – 以弧度来表示,从正右侧算起曲线开始的角度,默认值为0。 aEndAngle – 以弧度来表示,从正右侧算起曲线终止的角度,默认值为2 x Math.PI。 aClockwise – 椭圆是否按照顺时针方向来绘制,默认值为false。 aRotation – 以弧度表示,椭圆从X轴正方向逆时针的旋转角度(可选),默认值为0。

请注意: 当使用顺时针的时候,最好将起始角度角度设为(Math.PI * 2),并向着更小的数字运行。

属性

请参阅其基类Curve来了解共有属性。

# .isEllipseCurve : Boolean

用于检查该类或者其派生类是否为EllipseCurves。默认值为true。

你不应当更改这个属性,它在内部使用,以用于优化。

# .aX : Float

椭圆的中心的X坐标。

# .aY : Float

椭圆的中心的Y坐标。

# .xRadius : Radians

X轴向上椭圆的半径。

# .yRadius : Radians

Y轴向上椭圆的半径。

# .aStartAngle : Float

以弧度来表示,从正右侧算起曲线开始的角度。

# .aEndAngle : Float

以弧度来表示,从正右侧算起曲线终止的角度。

# .aClockwise : Boolean

椭圆是否按照顺时针方向来绘制。

# .aRotation : Float

以弧度表示,椭圆在X轴正方向逆时针的旋转角度(可选),默认值为0。

方法

请参阅其基类Curve来了解共有方法。

源代码

src/extras/curves/EllipseCurve.js

二维线段曲线(LineCurve)

一个表示二维线段的曲线。

构造函数

LineCurve( v1 : Vector2, v2 : Vector2 )

v1 – 起点 v2 - 终点

属性

请参阅其基类Curve来了解共有属性。

# .isLineCurve : Boolean

用于检查该类或者其派生类是否为LineCurves。默认值为true。

你不应当更改这个属性,它在内部使用,以用于优化。

# .v1 : Vector2

起点

# .v2 : Vector2

终点

方法

请参阅其基类Curve来了解共有方法。

源代码

src/extras/curves/LineCurve.js

三维线段曲线(LineCurve3)

一个表示三维线段的曲线。

构造函数

LineCurve3( v1 : Vector3, v2 : Vector3 )

v1 – 起点 v2 - 终点

属性

请参阅其基类Curve来了解共有属性。

.isLineCurve3 : Boolean

用于检查该类或者其派生类是否为LineCurves。默认值为true。

你不应当更改这个属性,它在内部使用,以用于优化。

# .v1 : Vector3

起点

# .v2 : Vector3

终点

方法

请参阅其基类Curve来了解共有方法。

源代码

src/extras/curves/LineCurve3.js

二维二次贝塞尔曲线(QuadraticBezierCurve)

创建一条平滑的二维 二次贝塞尔曲线, 由起点、终点和一个控制点所定义。

示例

var curve = new THREE.QuadraticBezierCurve( new THREE.Vector2( -10, 0 ), new THREE.Vector2( 20, 15 ), new THREE.Vector2( 10, 0 ) ); 
var points = curve.getPoints( 50 ); 
var geometry = new THREE.BufferGeometry().setFromPoints( points ); 
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); 
//Create the final object to add to the scene 
var curveObject = new THREE.Line( geometry, material );

构造函数

QuadraticBezierCurve( v0 : Vector2, v1 : Vector2, v2 : Vector2 )

v0 – 起点 v1 – 中间的控制点 v2 – 终点

属性

请参阅其基类Curve来了解共有属性。

# .isQuadraticBezierCurve : Boolean

用于检查该类或者其派生类是否为QuadraticBezierCurve。默认值为true。

你不应当对这一属性进行改变,它在内部使用,以用于优化。

# .v0 : Vector2

起点

# .v1 : Vector2

控制点

# .v2 : Vector2

终点

方法

请参阅其基类Curve来了解共有方法。

源代码

src/extras/curves/QuadraticBezierCurve.js

三维二次贝塞尔曲线(QuadraticBezierCurve3)

创建一条平滑的三维 二次贝塞尔曲线, 由起点、终点和一个控制点所定义。

示例

var curve = new THREE.QuadraticBezierCurve3( new THREE.Vector3( -10, 0, 0 ), new THREE.Vector3( 20, 15, 0 ), new THREE.Vector3( 10, 0, 0 ) ); 
var points = curve.getPoints( 50 ); 
var geometry = new THREE.BufferGeometry().setFromPoints( points ); 
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); 
// Create the final object to add to the scene 
var curveObject = new THREE.Line( geometry, material );

构造函数

QuadraticBezierCurve3( v0 : Vector3, v1 : Vector3, v2 : Vector3 )

v0 – 起点 v1 – 中间的控制点 v2 – 终点

属性

请参阅其基类Curve来了解共有属性。

# .isQuadraticBezierCurve3 : Boolean

用于检查该类或者其派生类是否为QuadraticBezierCurve3。默认值为true。

你不应当对这一属性进行改变,它在内部使用,以用于优化。

# .v0 : Vector3

起点

# .v1 : Vector3

控制点

# .v2 : Vector3

终点

方法

请参阅其基类Curve来了解共有方法。

源代码

src/extras/curves/QuadraticBezierCurve3.js

样条曲线(SplineCurve)

从一系列的点中,创建一个平滑的二维样条曲线。内部使用Interpolations.CatmullRom来创建曲线。

示例

// Create a sine-like wave 
var curve = new THREE.SplineCurve( [ new THREE.Vector2( -10, 0 ), new THREE.Vector2( -5, 5 ), new THREE.Vector2( 0, 0 ), new THREE.Vector2( 5, -5 ), new THREE.Vector2( 10, 0 ) ] ); 
var points = curve.getPoints( 50 ); 
var geometry = new THREE.BufferGeometry().setFromPoints( points ); 
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); 
// Create the final object to add to the scene 
var splineObject = new THREE.Line( geometry, material );

构造函数

SplineCurve( points : Array )

points – 定义曲线的Vector2点的数组。

属性

请参阅其基类Curve来了解共有属性。

# .isSplineCurve : Boolean

用于检查该类或者其派生类是否为样条曲线。默认值为true。

你不应当对这一属性进行改变,它在内部使用,以用于优化。

# .points : Array

定义这一曲线的Vector2点的数组。

方法

请参阅其基类Curve来了解共有方法。

源代码

src/extras/curves/SplineCurve.js

合作伙伴