提交 cf16452e 编写于 作者: M Mr.doob 提交者: GitHub

Merge pull request #10142 from looeee/docs/extras/curves/improve

Updated docs for extras / curves
......@@ -12,7 +12,8 @@
<h1>[name]</h1>
<div class="desc">Create a smooth 3d spline curve from a series of points using the Catmull-Rom algorithm</div>
<div class="desc">Create a smooth 3d spline curve from a series of points using the
[link:https://en.wikipedia.org/wiki/Centripetal_Catmull-Rom_spline Catmull-Rom] algorithm.</div>
<h2>Example</h2>
......@@ -30,6 +31,9 @@ var geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
<h3>[example:webgl_geometry_extrude_splines geometry / extrude / splines]</h3>
......@@ -37,23 +41,30 @@ var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
<h2>Constructor</h2>
<h3>[name]( [page:Array points] )</h3>
<div>points – An array of [page:Vector3] points</div>
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Array points]</h3>
<h3>[property:Boolean closed] – curve loops back onto itself when true. False by default.</h3>
<h3>[property:String type] - possible values are `centripetal` (default), `chordal` and `catmullrom`</h3>
<h3>[property:float tension] - when type is `catmullrom`, defines catmullrom's tension. Defaults to 0.5</h3>
<div>The array of array of [page:Vector3] points that define the curve.</div>
<h2>Methods</h2>
<h3>[property:Boolean closed]</h3>
<div>The curve will loop back onto itself when this is true. False by default</div>
<h3>[property:String type]</h3>
<div>Possible values are `centripetal` (default), `chordal` and `catmullrom`.</div>
<h3>[property:float tension]</h3>
<div>When [page:.type] is `catmullrom`, defines catmullrom's tension. Defaults is *0.5*.</div>
<h3>See [page:Curve] for inherited methods</h3>
<h2>Methods</h2>
<div>See the base [page:Curve] class for common methods.</div>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Curve] &rarr;
<h1>[name]</h1>
<div class="desc">Create a smooth 3d spline curve from a series of points that loops back onto itself. THREE.ClosedSplineCurve3 has been deprecated. Please use THREE.CatmullRomCurve3</div>
<h2>Example</h2>
<code>
//Create a closed wavey loop
var curve = new THREE.ClosedSplineCurve3( [
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 geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
</code>
<h3>[example:webgl_geometry_extrude_splines geometry / extrude / splines] (choose SampleClosedSpline)</h3>
<h2>Constructor</h2>
<h3>[name]( [page:Array points] )</h3>
<div>points – An array of [page:Vector3] points</div>
<h2>Properties</h2>
<h3>[property:Array points]</h3>
<h2>Methods</h2>
<h3>See [page:Curve] for inherited methods</h3>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
......@@ -13,17 +13,19 @@
<h1>[name]</h1>
<div class="desc">
Create a smooth 2d <a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:Bezier_curve.svg" target="_blank">cubic bezier curve</a>.
Create a smooth 2d
<a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:Bezier_curve.svg" target="_blank">cubic bezier curve</a>,
defined by a start point, endpoint and two control points.
</div>
<h2>Example</h2>
<code>
var curve = new THREE.CubicBezierCurve(
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( -5, 15, 0 ),
new THREE.Vector3( 20, 15, 0 ),
new THREE.Vector3( 10, 0, 0 )
new THREE.Vector2( -10, 0, 0 ),
new THREE.Vector2( -5, 15, 0 ),
new THREE.Vector2( 20, 15, 0 ),
new THREE.Vector2( 10, 0, 0 )
);
var path = new THREE.Path( curve.getPoints( 50 ) );
......@@ -31,7 +33,7 @@ var path = new THREE.Path( curve.getPoints( 50 ) );
var geometry = path.createPointsGeometry( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final Object3d to add to the scene
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
......@@ -40,26 +42,30 @@ var curveObject = new THREE.Line( geometry, material );
<h3>[name] ( [page:Vector2 v0], [page:Vector2 v1], [page:Vector2 v2], [page:Vector2 v3] )</h3>
<div>
[page:Vector2 v0] – The starting point<br/>
[page:Vector2 v1] – The first control point<br/>
[page:Vector2 v2] – The second control point<br/>
[page:Vector2 v3] – The ending point<br/>
[page:Vector2 v0] – The starting point.<br/>
[page:Vector2 v1] – The first control point.<br/>
[page:Vector2 v2] – The second control point.<br/>
[page:Vector2 v3] – The ending point.
</div>
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Vector2 v0]</h3>
<div>The starting point.</div>
<h3>[property:Vector2 v1]</h3>
<div>The first control point.</div>
<h3>[property:Vector2 v2]</h3>
<div>The second control point.</div>
<h3>[property:Vector2 v3]</h3>
<div>The ending point.</div>
<h2>Methods</h2>
<h3>See [page:Curve] for inherited methods</h3>
<div>See the base [page:Curve] class for common Methods.</div>
<h2>Source</h2>
......
......@@ -13,7 +13,9 @@
<h1>[name]</h1>
<div class="desc">
Create a smooth 3d <a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:Bezier_curve.svg" target="_blank">cubic bezier curve</a>.
Create a smooth 3d
<a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:Bezier_curve.svg" target="_blank">cubic bezier curve</a>,
defined by a start point, endpoint and two control points.
</div>
<h2>Example</h2>
......@@ -31,7 +33,7 @@ geometry.vertices = curve.getPoints( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final Object3d to add to the scene
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
......@@ -41,26 +43,31 @@ var curveObject = new THREE.Line( geometry, material );
<h3>[name]( [page:Vector3 v0], [page:Vector3 v1], [page:Vector3 v2], [page:Vector3 v3] )</h3>
<div>
[page:Vector3 v0] – The starting point<br/>
[page:Vector3 v1] – The first control point<br/>
[page:Vector3 v2] – The second control point<br/>
[page:Vector3 v3] – The ending point<br/>
[page:Vector3 v0] – The starting point.<br/>
[page:Vector3 v1] – The first control point.<br/>
[page:Vector3 v2] – The second control point.<br/>
[page:Vector3 v3] – The ending point.
</div>
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Vector3 v0]</h3>
<h3>[property:Vector2 v0]</h3>
<div>The starting point.</div>
<h3>[property:Vector3 v1]</h3>
<h3>[property:Vector2 v1]</h3>
<div>The first control point.</div>
<h3>[property:Vector3 v2]</h3>
<h3>[property:Vector2 v2]</h3>
<div>The second control point.</div>
<h3>[property:Vector3 v3]</h3>
<h3>[property:Vector2 v3]</h3>
<div>The ending point.</div>
<h2>Methods</h2>
<div>See the base [page:Curve] class for common Methods.</div>
<h3>See [page:Curve] for inherited methods</h3>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
......@@ -12,7 +12,10 @@
<h1>[name]</h1>
<div class="desc">Creates a 2d curve in the shape of an ellipse.</div>
<div class="desc">
Creates a 2d curve in the shape of an ellipse. Setting the
[page:Number xRadius] equal to the [page:Number yRadius] will result in a circle.
</div>
<h2>Example</h2>
......@@ -22,14 +25,14 @@ var curve = new THREE.EllipseCurve(
10, 10, // xRadius, yRadius
0, 2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
0 // aRotation
);
var path = new THREE.Path( curve.getPoints( 50 ) );
var geometry = path.createPointsGeometry( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final Object3d to add to the scene
// Create the final object to add to the scene
var ellipse = new THREE.Line( geometry, material );
</code>
......@@ -38,33 +41,54 @@ var ellipse = new THREE.Line( geometry, material );
<h3>[name]( [page:Float aX], [page:Float aY], [page:Float xRadius], [page:Float yRadius], [page:Radians aStartAngle], [page:Radians aEndAngle], [page:Boolean aClockwise], [page:Radians aRotation] )</h3>
<div>
aX – The X center of the ellipse<br/>
aY – The Y center of the ellipse<br/>
xRadius – The radius of the ellipse in the x direction<br/>
yRadius – The radius of the ellipse in the y direction<br/>
aStartAngle – The start angle of the curve in radians starting from the middle right side<br/>
aEndAngle – The end angle of the curve in radians starting from the middle right side<br/>
aClockwise – Whether the ellipse is clockwise<br/>
aRotation – The rotation angle of the ellipse in radians, counterclockwise from the positive X axis (optional)<br/><br/>
<strong>Note:</strong> When going clockwise it's best to set the start angle to (Math.PI * 2) and then work towards lower numbers.
[page:Float aX] – The X center of the ellipse.<br/>
[page:Float aY] – The Y center of the ellipse.<br/>
[page:Float xRadius] – The radius of the ellipse in the x direction.<br/>
[page:Float yRadius] – The radius of the ellipse in the y direction.<br/>
[page:Radians aStartAngle] – The start angle of the curve in radians starting from the middle right side.<br/>
[page:Radians aEndAngle] – The end angle of the curve in radians starting from the middle right side.<br/>
[page:Boolean aClockwise] – Whether the ellipse is drawn clockwise.<br/>
[page:Radians aRotation] – The rotation angle of the ellipse in radians, counterclockwise from the positive X axis (optional). Default is *0*.<br/><br/>
<em>Note:</em> When going clockwise it's best to set the start angle to (Math.PI * 2) and then work towards lower numbers.
</div>
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Float aX]</h3>
<div>The X center of the ellipse.</div>
<h3>[property:Float aY]</h3>
<div>The Y center of the ellipse.</div>
<h3>[property:Radians xRadius]</h3>
<div>The radius of the ellipse in the x direction.</div>
<h3>[property:Radians yRadius]</h3>
<div>The radius of the ellipse in the y direction.</div>
<h3>[property:Float aStartAngle]</h3>
<div>The start angle of the curve in radians starting from the middle right side.</div>
<h3>[property:Float aEndAngle]</h3>
<div>The end angle of the curve in radians starting from the middle right side.</div>
<h3>[property:Boolean aClockwise]</h3>
<div>Whether the ellipse is drawn clockwise.</div>
<h3>[property:Float aRotation]</h3>
<div>The rotation angle of the ellipse in radians, counterclockwise from the positive X axis (optional). Default is *0*.</div>
<h2>Methods</h2>
<h3>[property:Boolean isEllipseCurve]</h3>
<div>
Used to check whether this or derived classes are ellipses. Default is *true*.<br /><br />
<h3>See [page:Curve] for inherited methods</h3>
You should not change this, as it used internally for optimisation.
</div>
<h2>Methods</h2>
<div>See the base [page:Curve] class for common methods.</div>
<h2>Source</h2>
......
......@@ -12,27 +12,36 @@
<h1>[name]</h1>
<div class="desc">A curve representing a 2d line segment</div>
<div class="desc">A curve representing a 2d line segment.</div>
<h2>Constructor</h2>
<h3>[name]( [page:Vector2 v1], [page:Vector2 v2] )</h3>
<div>
v1 – The start point<br/>
v2 - The end point
[page:Vector2 v1] – The start point.<br/>
[page:Vector2 v2] - The end point.
</div>
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Boolean isLineCurve]</h3>
<div>
Used to check whether this or derived classes are LineCurves. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h3>[property:Vector2 v1]</h3>
<h3>[property:Vector2 v2]</h3>
<div>The start point.</div>
<h3>[property:Vector2 v2]</h3>
<div>The end point</div>
<h2>Methods</h2>
<h3>See [page:Curve] for inherited methods</h3>
<div>See the base [page:Curve] class for common methods.</div>
<h2>Source</h2>
......
......@@ -12,27 +12,29 @@
<h1>[name]</h1>
<div class="desc">A curve representing a 3d line segment</div>
<div class="desc">A curve representing a 3d line segment.</div>
<h2>Constructor</h2>
<h3>[name]( [page:Vector3 v1], [page:Vector3 v2] )</h3>
<div>
v1 – The start point<br/>
v2 - The end point
[page:Vector3 v1] – The start point.<br/>
[page:Vector3 v2] - The end point.
</div>
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Vector3 v1]</h3>
<h3>[property:Vector3 v2]</h3>
<div>The start point.</div>
<h3>[property:Vector3 v2]</h3>
<div>The end point.</div>
<h2>Methods</h2>
<h3>See [page:Curve] for inherited methods</h3>
<div>See the base [page:Curve] class for common methods.</div>
<h2>Source</h2>
......
......@@ -13,16 +13,18 @@
<h1>[name]</h1>
<div class="desc">
Create a smooth 2d <a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:B%C3%A9zier_2_big.gif" target="_blank">quadratic bezier curve</a>.
Create a smooth 2d
<a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:B%C3%A9zier_2_big.gif" target="_blank">quadratic bezier curve</a>,
defined by a startpoint, endpoint and a single control point.
</div>
<h2>Example</h2>
<code>
var curve = new THREE.QuadraticBezierCurve(
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( 20, 15, 0 ),
new THREE.Vector3( 10, 0, 0 )
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( 10, 0 )
);
var path = new THREE.Path( curve.getPoints( 50 ) );
......@@ -30,7 +32,7 @@ var path = new THREE.Path( curve.getPoints( 50 ) );
var geometry = path.createPointsGeometry( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
//Create the final Object3d to add to the scene
//Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
......@@ -39,26 +41,27 @@ var curveObject = new THREE.Line( geometry, material );
<h3>[name]( [page:Vector2 v0], [page:Vector2 v1], [page:Vector2 v2] )</h3>
<div>
[page:Vector2 v0] – The starting point<br/>
[page:Vector2 v1] – The middle control point<br/>
[page:Vector2 v2] – The ending point<br/>
[page:Vector2 v0] – The startpoint.<br/>
[page:Vector2 v1] – The control point.<br/>
[page:Vector2 v2] – The endpoint.
</div>
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Vector2 v0]</h3>
<div>The startpoint.</div>
<h3>[property:Vector2 v1]</h3>
<div>The control point.</div>
<h3>[property:Vector2 v2]</h3>
<div>The endpoint.</div>
<h2>Methods</h2>
<h3>See [page:Curve] for inherited methods</h3>
<div>See the base [page:Curve] class for common methods.</div>
<h2>Source</h2>
......
......@@ -13,7 +13,9 @@
<h1>[name]</h1>
<div class="desc">
Create a smooth 3d <a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:B%C3%A9zier_2_big.gif" target="_blank">quadratic bezier curve</a>.
Create a smooth 3d
<a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:B%C3%A9zier_2_big.gif" target="_blank">quadratic bezier curve</a>,
defined by a startpoint, endpoint and a single control point.
</div>
<h2>Example</h2>
......@@ -30,7 +32,7 @@ geometry.vertices = curve.getPoints( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final Object3d to add to the scene
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
......@@ -47,18 +49,20 @@ var curveObject = new THREE.Line( geometry, material );
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Vector3 v0]</h3>
<div>The startpoint.</div>
<h3>[property:Vector3 v1]</h3>
<div>The control point.</div>
<h3>[property:Vector3 v2]</h3>
<div>The endpoint.</div>
<h2>Methods</h2>
<h3>See [page:Curve] for inherited methods</h3>
<div>See the base [page:Curve] class for common methods.</div>
<h2>Source</h2>
......
......@@ -12,7 +12,10 @@
<h1>[name]</h1>
<div class="desc">Create a smooth 2d spline curve from a series of points</div>
<div class="desc">
Create a smooth 2d spline curve from a series of points. Internally this uses
[page:CurveUtils.interpolate] to create the curve.
</div>
<h2>Example</h2>
......@@ -31,7 +34,7 @@ var path = new THREE.Path( curve.getPoints( 50 ) );
var geometry = path.createPointsGeometry( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final Object3d to add to the scene
// Create the final object to add to the scene
var splineObject = new THREE.Line( geometry, material );
</code>
......@@ -39,16 +42,21 @@ var splineObject = new THREE.Line( geometry, material );
<h3>[name]( [page:Array points] )</h3>
<div>points – An array of [page:Vector2] points</div>
<div>points – An array of [page:Vector2] points that define the curve.</div>
<h2>Properties</h2>
<div>See the base [page:Curve] class for common properties.</div>
<h3>[property:Array points]</h3>
<div>The array of [page:Vector3] points that define the curve.</div>
<h2>Methods</h2>
<div>See the base [page:Curve] class for common methods.</div>
<h3>See [page:Curve] for inherited methods</h3>
<h2>Source</h2>
......
......@@ -12,11 +12,19 @@
<h1>[name]</h1>
<div class="desc">Create a smooth 3d spline curve from a series of points</div>
<div class="desc">
Create a smooth 3d spline curve from a series of points. Internally this uses
[page:CurveUtils.interpolate] to create the curve.<br /><br />
Note that this will be deprecated. Please use a [page:CatmullRomCurve3] instead.
</div>
<h2>Example</h2>
<code>
<div>[example:webgl_geometry_extrude_splines geometry / extrude / splines ] (choose PipeSpline)</div>
<code>
//Create a closed bent a sine-like wave
var curve = new THREE.SplineCurve3( [
new THREE.Vector3( -10, 0, 10 ),
......@@ -31,18 +39,18 @@ geometry.vertices = curve.getPoints( 50 );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
//Create the final Object3d to add to the scene
//Create the final object to add to the scene
var splineObject = new THREE.Line( geometry, material );
</code>
</code>
<h3>[example:webgl_geometry_extrude_splines geometry / extrude / splines ] (choose PipeSpline)</h3>
<h2>Constructor</h2>
<h3>[name]( [page:Array points] )</h3>
<div>points – An array of [page:Vector3] points</div>
<div>points – An array of [page:Vector3] points that define the curve.</div>
<h2>Properties</h2>
......
......@@ -95,7 +95,6 @@ var list = {
"Extras / Curves": [
[ "ArcCurve", "api/extras/curves/ArcCurve" ],
[ "CatmullRomCurve3", "api/extras/curves/CatmullRomCurve3" ],
[ "ClosedSplineCurve3", "api/extras/curves/ClosedSplineCurve3" ],
[ "CubicBezierCurve", "api/extras/curves/CubicBezierCurve" ],
[ "CubicBezierCurve3", "api/extras/curves/CubicBezierCurve3" ],
[ "EllipseCurve", "api/extras/curves/EllipseCurve" ],
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册