Three.js

previous page next page

Дополнения

CurveUtils

A class containing utility functions for curves.
Note that these are all linear functions so it is neccessary to calculate separately for x, y (and z, w if present) components of a curve.

Методы

[method:Number interpolate]( p0, p1, p2, p3, t )

t -- interpolation weight.

p0, p1, p2, p4 -- the points defining the spline curve.

Used internally by [page:SplineCurve SplineCurve].

[method:Number tangentQuadraticBezier]( t, p0, p1, p2 )

t -- the point at which to calculate the tangent.

p0, p1, p2 -- the three points defining the quadratic Bezier curve.

Calculate the tangent at the point t on a quadratic Bezier curve given by the three points.
Used internally by [page:QuadraticBezierCurve QuadraticBezierCurve].

[method:Number tangentCubicBezier]( t, p0, p1, p2, p3 )

t -- the point at which to calculate the tangent.

p0, p1, p2, p3 -- the points defining the cubic Bezier curve.

Calculate the tangent at the point t on a cubic Bezier curve given by the four points.
Used internally by [page:CubicBezierCurve CubicBezierCurve].

[method:Number tangentSpline]( t, p0, p1, p2, p3 )

t -- the point at which to calculate the tangent.

p0, p1, p2, p3 -- the points defining the spline curve.

Calculate the tangent at the point t on a spline curve given by the four points.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

SceneUtils

A class containing useful utility functions for scene manipulation.

Методы

[method:Group createMultiMaterialObject]( [page:Geometry geometry], [page:Array materials] )

geometry -- The geometry for the set of materials.

materials -- The materials for the object.

Creates a new Group that contains a new mesh for each material defined in materials. Beware that this is not the same as an array of materials which defines multiple materials for 1 mesh.
This is mostly useful for objects that need both a material and a wireframe implementation.

[method:null attach]( [page:Object3D child], [page:Object3D scene], [page:Object3D parent] )

child -- The object to add to the parent

scene -- The scene to detach the object on.

parent -- The parent to attach the object from.

Attaches the object to the parent without the moving the object in the worldspace. Beware that to do this the matrixWorld needs to be updated, this can be done by calling the updateMatrixWorld method on the parent object.

[method:null detach]( [page:Object3D child], [page:Object3D parent], [page:Object3D scene] )

child -- The object to remove from the parent.

scene -- The scene to attach the object on.

parent -- The parent to detach the object from.

Detaches the object from the parent and adds it back to the scene without moving in worldspace. Beware that to do this the matrixWorld needs to be updated, this can be done by calling the updateMatrixWorld method on the parent object.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

ShapeUtils

Класс содержащий вспомогательные функции для форм. A class containing utility functions for shapes.
Заметьте, что это все линейные функции, так что их нужно рассчитывать по отдельности для компонентов вектора x, y (и z, w, если имеются). Note that these are all linear functions so it is neccessary to calculate separately for x, y (and z, w if present) components of a vector.

Методы

[method:Number area]( contour )

contour -- 2D polygon.

Calculate area of a ( 2D ) contour polygon.

[method:Number b2]( t, p0, p1, p2 )

t -- number
p0, p1, p2 -- x, y, z or w components of a quadratic bezier curve.

Note that this is a linear function so it is neccessary to calculate separately for x, y (and z for 3D curves) components of a curve.

Used internally by [page:QuadraticBezierCurve QuadraticBezierCurve], [page:QuadraticBezierCurve3 QuadraticBezierCurve3] and [page:Font Font].

[method:Number b3]( t, p0, p1, p2, p3 )

t -- number.
p0, p1, p2, p3 -- x, y or z components of a cubic bezier curve..

Note that this is a linear function so it is neccessary to calculate separately for x, y (and z for 3D curves) components of a curve.

Used internally by [page:CubicBezierCurve CubicBezierCurve], [page:CubicBezierCurve3 CubicBezierCurve3] and [page:Font Font].

[method:Boolean isClockwise]( pts )

pts -- points defining a 2D polygon

Note that this is a linear function so it is neccessary to calculate separately for x, y components of a polygon.

Used internally by [page:Path Path], [page:ExtrudeGeometry ExtrudeGeometry] and [page:ShapeBufferGeometry ShapeBufferGeometry].

[method:null triangulate]( contour, indices )

contour -- 2D polygon.
indices --

Used internally by [page:ExtrudeGeometry ExtrudeGeometry] and [page:ShapeBufferGeometry ShapeBufferGeometry] to calculate faces.

[method:null triangulateShape]( contour, holes )

contour -- 2D polygon.
holes -- array of holes

Used internally by [page:ExtrudeGeometry ExtrudeGeometry] and [page:ShapeBufferGeometry ShapeBufferGeometry] to calculate faces in shapes with holes.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Анимация collada-файлов

[name]

This class animates an object based on an hierarchy. This hierarchy can be Object3ds or bones.

Конструктор

[name]([page:Object3d root], [page:String name])

root -- The mesh to animate.
name -- The name of the animation

Creates an animation for root. The animation data is gathered from AnimationHandler based on its name.

Свойства

[property:Object3d root]

The root object of the animation.

[property:Object data]

The data containing the animation

[property:Array hierarchy]

The objects that are influenced by the animation.

[property:number currentTime]

The time elapsed since the last start/restart of the animation.

[property:number timeScale]

How much to scale the speed of the animation. Defaults to 1.

[property:boolean isPlaying]

Indicates whether the animation is playing. This shouldn't be adapted by user code.

[property:boolean isPaused]

Indicates whether the animation is paused. This shouldn't be adapted by user code.

[property:boolean loop]

Set to make the animation restart when the animation ends.

[property:number interpolationType]

The type to indicate how to interpolate between 2 data points.

Методы

[method:null play]([page:Number startTime])

Starts the animation at the startTime (in seconds) of the animation.

[method:null stop]()

Stops the animation.

[method:Boolean update]([page:Number deltaTimeMS])

deltaTimeMS -- The time of the between the previous frame and this frame in miliseconds.

Updates the animation in time. This shouldn't be called by user code. The animationHandler calls this method.

[method:array interpolateCatmullRom]([page:Array points], [page:Number scale])

points -- The 4 control point to calculate CatMullRom
scale -- The scale between the previous key and the nex key

Interpolates the point based on the key. Is used in update.

[method:Object getNextKeyWith]([page:String type], [page:Object h], [page:Number key])

type -- The animationtype for the key. Can be "pos", "rot" and "scl".
h -- The object of the hierarchy that catins the key
key -- The index of the next possible key.

Gets the next key. Is used in Update.

[method:Object getPrevKeyWith]([page:String type], [page:Object h], [page:Number key])

type -- The animationtype for the key. Can be "pos", "rot" and "scl".
h -- The object of the hierarchy that contains the key.
key -- The index of the prev possible key.

Gets the previous key. Is used in Update.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/collada/[name].js examples/js/loaders/collada/[name].js]

[name]

The AnimationHandler handles the initialisation of the Animation data and the animations itself. It keeps track of every animation and if it's active or not. It also update all animations which are active if its method *update* is called.

Конструктор

[name]()

The animationHandler can't be called as constructor.

Свойства

[property:number CATMULLROM]

Enum Value to indicate that the animation needs to be interpolated as CATMULLROM.

[property:number CATMULLROM_FORWARD]

Enum Value to indicate that the animation needs to be interpolated as CATMULLROM_FORWARD.

[property:number LINEAR]

Enum Value to indicate that the animation needs to be interpolated as LINEAR.

Методы

[method:null removeFromUpdate]([page:Animation animation])

animation -- The Animation to remove from the update.

Removes the animation from the update cycle. This gets called when the animation stops. This shouldn't be called by usercode.

[method:Object get]([page:String name])

name -- The name of the animationData

Gets the animationData from its library.

[method:null update]([page:Number deltaTimeMS])

deltaTimeMS -- Time elapsed since last update in milliseconds.

Updates all active animations with deltaTime.

[method:null parse]([page:Object root])

root -- object

Parses the object to get the hierachy.

[method:null add]([page:object data])

data -- The animationData

Adds the animationData from its library.

[method:null addToUpdate]([page:Animation animation])

animation -- The Animation to add from the update.

Adds the animation from the update cycle. This gets called when the animation starts. This shouldn't be called by user code.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/collada/[name].js examples/js/loaders/collada/[name].js]

[name]

Runs a keyframe animation as imported from the [page:ColladaLoader].

Examples

[example:webgl_loader_collada_keyframe loader / collada / keyframe ]

Конструктор

[name]([page:Object data])

data -- An individual animation object from a the [page:ColladaLoader], e.g. loadedColladaObj.animations[0]

Creates a new keyframe animation and initializes it to the first keyframes.

Свойства

[property:Object3D root]

The root object of the animation

[property:Object data]

The data containing the animation

[property:Array hierarchy]

The objects that are influenced by the animation.

[property:number currentTime]

The time elapsed since the last start/restart of the animation.

[property:number timeScale]

How much to scale the speed of the animation. Defaults to 1.

[property:boolean isPlaying]

Indicates whether the animation is playing. This shouldn't be adapted by user code.

[property:boolean isPaused]

Indicates whether the animation is paused. This shouldn't be adapted by user code.

[property:boolean loop]

Set to make the animation restart when the animation ends.

Методы

[method:null play]([page:Number startTime])

Starts the animation at the startTime (in seconds) of the animation.

[method:null stop]()

Stops the animation.

[method:null update]([page:Float deltaTime])

deltaTime -- The change in time in seconds

Updates the keyframe animation

[method:Object getNextKeyWith]([page:String sid], [page:Integer h], [page:Integer key])

sid -- The string id
h -- The index in the heirarchy to use
key -- The index of which key to start from

Used internally to traverse the animation

[method:Object getPrevKeyWith]([page:String sid], [page:Integer h], [page:Integer key])

sid -- The string id
h -- The index in the heirarchy to use
key -- The index of which key to start from

Used internally to traverse the animation

[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/collada/[name].js examples/js/loaders/collada/[name].js]

Curve

An abstract base class for creating a curve object that contains methods for interpolation.
For an array of Curves see [page:CurvePath].

Examples

[example:webgl_geometry_extrude_splines geometry / extrude / splines ]

Конструктор

Curve()

This constructor creates a new [name].

Методы

[method:Vector getPoint]( t )

Returns a vector for point t of the curve where t is between 0 and 1. Must be implemented in the extending class.

[method:Vector getPointAt]( u )

Returns a vector for point at relative position in curve according to arc length

[method:Array getPoints]( divisions )

Get sequence of points using getPoint( t )

[method:Array getSpacedPoints]( divisions )

Get sequence of equi-spaced points using getPointAt( u )

[method:Float getLength]()

Get total curve arc length

[method:Array getLengths]( divisions )

Get list of cumulative segment lengths

[method:null updateArcLengths]()

Update the cumlative segment distance cache

[method:Float getUtoTmapping]( u, distance )

Given u ( 0 .. 1 ), get a t to find p. This gives you points which are equidistant

[method:Vector getTangent]( t )

Returns a unit vector tangent at t. If the subclassed curve do not implement its tangent derivation, 2 points a small delta apart will be used to find its gradient which seems to give a reasonable approximation

[method:Vector getTangentAt]( u )

Returns tangent at equidistant point u on the curve

[method:Object computeFrenetFrames]( segments, closed )

Generates the Frenet Frames. Used in geometries like [page:TubeGeometry] or [page:ExtrudeGeometry].

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

An abstract base class further extending [page:Curve]. A CurvePath is simply an array of connected curves, but retains the api of a curve.

Конструктор

[name]()

The constructor take no parameters.

Свойства

[property:array curves]

The array of [page:Curve]s

[property:array bends]

An array of [page:Curve]s used to transform and bend the curve using [page:CurvePath.getWrapPoints].

[property:boolean autoClose]

Whether or not to automatically close the path.

Методы

[method:Array getWrapPoints]( [page:Array vertices], [page:Curve curve] )

vertices -- An array of [page:Vector2]s to modify
curve -- An array of 2d [page:Curve]s

Modifies the array of vertices by warping it by the curve. The curve parameter also accepts objects with similar interfaces such as [page:CurvePath], [page:Path], [page:SplineCurve], etc. Returns the original vertices after modification.

[method:null addWrapPath]( [page:Curve curve] )

curve -- A [page:Curve] or object with a similar interface.

Pushes a curve onto the bends array.

[method:Geometry createGeometry]( [page:Vector3 points] )

points -- An array of [page:Vector3]s

Creates a geometry from points

[method:Geometry createPointsGeometry]( [page:Integer divisions] )

divisions -- How many segments to create with [page:Vector3]s. Defaults to 12.

Creates a [page:Geometry] object comprised of [page:Vector3]s

[method:Geometry createSpacedPointsGeometry]( [page:Integer divisions] )

divisions -- How many segments to create with [page:Vector3]s. Defaults to 12.

Creates a [page:Geometry] object comprised of [page:Vector3]s that are equidistant.

[method:null add]( [page:Curve curve] )

curve -- The [page:Curve curve] to add

Pushes a curve onto the curves array.

[method:null closePath]()

Adds a curve to close the path.

[method:Object getBoundingBox]()

Returns an object with the keys minX, minY, maxX, maxY, (if 3d: maxZ, minZ)

[method:Float getCurveLengths]()

Adds together the length of the curves

[method:Array getTransformedPoints]( [page:Integer segments], [page:Array bends] )

segments -- The number of segments to create using the getPoints()
bends -- (optional) An array of [page:Curve]s used to transform the points. Defaults to this.bends if blank.

Uses this CurvePath to generate a series of points transformed by the curves in the bends array. Returns an array of [page:Vector2]s.

[method:Array getTransformedSpacedPoints]( [page:Integer segments], [page:Array bends] )

segments -- The number of segments to create using the getPoints()
bends -- (optional) Defaults to this.bends if blank. An array of [page:Curve]s used to transform the points.

Uses this CurvePath to generate a series equidistant points that are then transformed by the curves in the bends. Returns an array of [page:Vector2]s.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:CurvePath] →

[name]

A 2d path representation, comprising of points, lines, and cubes, similar to the html5 2d canvas api. It extends [page:CurvePath].

Конструктор

[name]( [page:Array points] )

points -- array of Vector2

Creates a Path from the points. The first vector defines the offset. After that the lines get defined.

Свойства

[property:array actions]

The possible actions that define the path.

Методы

[method:null fromPoints]( [page:Array vector2s] )

Adds to the Path from the points. The first vector defines the offset. After that the lines get defined.

[method:null moveTo]( [page:Float x], [page:Float y] )

This moves the offset to x and y

[method:null lineTo]( [page:Float x], [page:Float y] )

This creates a line from the offset to X and Y and updates the offset to X and Y.

[method:null quadraticCurveTo]( [page:Float cpX], [page:Float cpY], [page:Float x], [page:Float y] )

This creates a quadratic curve from the offset to x and y with cpX and cpY as control point and updates the offset to x and y.

[method:null bezierCurveTo]( [page:Float cp1X], [page:Float cp1Y], [page:Float cp2X], [page:Float cp2Y], [page:Float x], [page:Float y] )

This creates a bezier curve from the last offset to x and y with cp1X, cp1Y and cp1X, cp1Y as control points and updates the offset to x and y.

[method:null splineThru] ( [page:Array points] )

points - An array of [page:Vector2]s

Connects a new [page:SplineCurve] onto the path.

[method:null arc]( [page:Float x], [page:Float y], [page:Float radius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )

x, y -- The center of the arc offset from the last call radius -- The radius of the arc startAngle -- The start angle in radians endAngle -- The end angle in radians clockwise -- Sweep the arc clockwise. Defaults to false

Draw an arc offset from the last call

[method:null absarc]( [page:Float x], [page:Float y], [page:Float radius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )

x, y -- The absolute center of the arc radius -- The radius of the arc startAngle -- The start angle in radians endAngle -- The end angle in radians clockwise -- Sweep the arc clockwise. Defaults to false

Draw an arc absolutely positioned

[method:null ellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )

x, y -- The center of the ellipse offset from the last call xRadius -- The radius of the ellipse in the x axis yRadius -- The radius of the ellipse in the y axis startAngle -- The start angle in radians endAngle -- The end angle in radians clockwise -- Sweep the ellipse clockwise. Defaults to false rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0

Draw an ellipse offset from the last call

[method:null absellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )

x, y -- The absolute center of the ellipse xRadius -- The radius of the ellipse in the x axis yRadius -- The radius of the ellipse in the y axis startAngle -- The start angle in radians endAngle -- The end angle in radians clockwise -- Sweep the ellipse clockwise. Defaults to false rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0

Draw an ellipse absolutely positioned

[method:Array toShapes]( [page:Boolean isCCW], [page:Boolean noHoles] )

isCCW -- Changes how solids and holes are generated
noHoles -- Whether or not to generate holes

Converts the Path into an array of Shapes. By default solid shapes are defined clockwise (CW) and holes are defined counterclockwise (CCW). If isCCW is set to true, then those are flipped. If the paramater noHoles is set to true then all paths are set as solid shapes and isCCW is ignored.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Path] →

[name]

Defines an arbitrary 2d shape plane using paths with optional holes. It can be used with [page:ExtrudeGeometry], [page:ShapeGeometry], to get points, or to get triangulated faces.

		var heartShape = new THREE.Shape();

		heartShape.moveTo( 25, 25 );
		heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
		heartShape.bezierCurveTo( 30, 0, 30, 35,30,35 );
		heartShape.bezierCurveTo( 30, 55, 10, 77, 25, 95 );
		heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
		heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
		heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );

		var extrudeSettings = { amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };

		var geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );

		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );

Examples

[example:webgl_geometry_shapes geometry / shapes ]
[example:webgl_geometry_extrude_shapes geometry / extrude / shapes ]
[example:webgl_geometry_extrude_shapes2 geometry / extrude / shapes2 ]
[example:webgl_particles_shapes particles / shapes ]

Конструктор

[name]()

Свойства

[property:array holes]

An array of [page:Path paths] that define the holes in the shape.

Методы

[method:ShapeGeometry makeGeometry]( [page:Object options] )

options -- This is passed as the second argument to [page:ShapeGeometry ShapeGeometry]

Convenience method to return ShapeGeometry

[method:Array extractAllPoints]( [page:Integer divisions] )

divisions -- The number of divisions to create on the shape

Get points of shape and holes (keypoints based on segments parameter)

[method:ExtrudeGeometry extrude]( [page:Object options] )

options -- This is passed as the second argument to [page:ExtrudeGeometry ExtrudeGeometry]

Convenience method to return ExtrudeGeometry

[method:Object extractPoints]( [page:Integer divisions] )

divisions -- The number of divisions to create on the shape

Returns an object with a *shape* and *holes* property that each reference an array of [page:Vector2 Vector2s].

[method:Object extractAllSpacedPoints]( [page:Integer divisions] )

divisions -- The number of divisions to create on the shape

Returns an object with a *shape* and *holes* property that each reference an array of [page:Vector2 Vector2s]. The points will all be equally spaced along the shape.

[method:Array getPointsHoles]( [page:Integer divisions] )

divisions -- The number of divisions to create on the shape

Get an array of [page Vector2 Vector2s] that represent the holes in the shape.

[method:Array getSpacedPointsHoles]( [page:Integer divisions] )

divisions -- The number of divisions to create on the shape

Get an array of equally spaced [page Vector2 Vector2s] that represent the holes in the shape.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:EllipseCurve] →

ArcCurve

Alias for [page:EllipseCurve]

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

CatmullRomCurve3

Create a smooth 3d spline curve from a series of points using the Catmull-Rom algorithm

Пример

//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 geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints( 50 );

var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

[example:webgl_geometry_extrude_splines geometry / extrude / splines]

Конструктор

CatmullRomCurve3( [page:Array points] )

points – An array of [page:Vector3] points

Свойства

[property:Array points]

[property:Boolean closed] – curve loops back onto itself when true. False by default.

[property:String type] - possible values are `centripetal` (default), `chordal` and `catmullrom`

[property:float tension] - when type is `catmullrom`, defines catmullrom's tension. Defaults to 0.5

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

ClosedSplineCurve3

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

Пример

//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 } );

[example:webgl_geometry_extrude_splines geometry / extrude / splines] (choose SampleClosedSpline)

Конструктор

[name]( [page:Array points] )

points – An array of [page:Vector3] points

Свойства

[property:Array points]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

CubicBezierCurve3

Create a smooth 2d cubic bezier curve.

Пример

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 )
);

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
var curveObject = new THREE.Line( geometry, material );

Конструктор

CubicBezierCurve3( [page:Vector2 v0], [page:Vector2 v1], [page:Vector2 v2], [page:Vector2 v3] )

[page:Vector2 v0] – The starting point
[page:Vector2 v1] – The first control point
[page:Vector2 v2] – The second control point
[page:Vector2 v3] – The ending point

Свойства

[property:Vector2 v0]

[property:Vector2 v1]

[property:Vector2 v2]

[property:Vector2 v3]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

Create a smooth 3d cubic bezier curve.

Пример

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 geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints( 50 );

var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

// Create the final Object3d to add to the scene
var curveObject = new THREE.Line( geometry, material );

Конструктор

[name]( [page:Vector3 v0], [page:Vector3 v1], [page:Vector3 v2], [page:Vector3 v3] )

[page:Vector3 v0] – The starting point
[page:Vector3 v1] – The first control point
[page:Vector3 v2] – The second control point
[page:Vector3 v3] – The ending point

Свойства

[property:Vector3 v0]

[property:Vector3 v1]

[property:Vector3 v2]

[property:Vector3 v3]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

Creates a 2d curve in the shape of an ellipse.

Пример

var curve = new THREE.EllipseCurve(
	0,  0,            // ax, aY
	10, 10,           // xRadius, yRadius
	0,  2 * Math.PI,  // aStartAngle, aEndAngle
	false,            // aClockwise
	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
var ellipse = new THREE.Line( geometry, material );

Конструктор

[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] )

aX – The X center of the ellipse
aY – The Y center of the ellipse
xRadius – The radius of the ellipse in the x direction
yRadius – The radius of the ellipse in the y direction
aStartAngle – The start angle of the curve in radians starting from the middle right side
aEndAngle – The end angle of the curve in radians starting from the middle right side
aClockwise – Whether the ellipse is clockwise
aRotation – The rotation angle of the ellipse in radians, counterclockwise from the positive X axis (optional)

Note: When going clockwise it's best to set the start angle to (Math.PI * 2) and then work towards lower numbers.

Свойства

[property:Float aX]

[property:Float aY]

[property:Radians xRadius]

[property:Radians yRadius]

[property:Float aStartAngle]

[property:Float aEndAngle]

[property:Boolean aClockwise]

[property:Float aRotation]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

A curve representing a 2d line segment

Конструктор

[name]( [page:Vector2 v1], [page:Vector2 v2] )

v1 – The start point
v2 - The end point

Свойства

[property:Vector2 v1]

[property:Vector2 v2]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

A curve representing a 3d line segment

Конструктор

[name]( [page:Vector3 v1], [page:Vector3 v2] )

v1 – The start point
v2 - The end point

Свойства

[property:Vector3 v1]

[property:Vector3 v2]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

Create a smooth 2d quadratic bezier curve.

Пример

var curve = new THREE.QuadraticBezierCurve(
	new THREE.Vector3( -10, 0, 0 ),
	new THREE.Vector3( 20, 15, 0 ),
	new THREE.Vector3( 10, 0, 0 )
);

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
var curveObject = new THREE.Line( geometry, material );

Конструктор

[name]( [page:Vector2 v0], [page:Vector2 v1], [page:Vector2 v2] )

[page:Vector2 v0] – The starting point
[page:Vector2 v1] – The middle control point
[page:Vector2 v2] – The ending point

Свойства

[property:Vector2 v0]

[property:Vector2 v1]

[property:Vector2 v2]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

Create a smooth 3d quadratic bezier curve.

Пример

var curve = new THREE.QuadraticBezierCurve3(
	new THREE.Vector3( -10, 0, 0 ),
	new THREE.Vector3( 20, 15, 0 ),
	new THREE.Vector3( 10, 0, 0 )
);

var geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints( 50 );

var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

// Create the final Object3d to add to the scene
var curveObject = new THREE.Line( geometry, material );

Конструктор

[name]( [page:Vector3 v0], [page:Vector3 v1], [page:Vector3 v2] )

[page:Vector3 v0] – The starting point
[page:Vector3 v1] – The middle control point
[page:Vector3 v2] – The ending point

Свойства

[property:Vector3 v0]

[property:Vector3 v1]

[property:Vector3 v2]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

Create a smooth 2d spline curve from a series of points

Пример

// 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 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
var splineObject = new THREE.Line( geometry, material );

Конструктор

[name]( [page:Array points] )

points – An array of [page:Vector2] points

Свойства

[property:Array points]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Curve] →

[name]

Create a smooth 3d spline curve from a series of points

Пример

//Create a closed bent a sine-like wave
var curve = new THREE.SplineCurve3( [
	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 } );

//Create the final Object3d to add to the scene
var splineObject = new THREE.Line( geometry, material );

[example:webgl_geometry_extrude_splines geometry / extrude / splines ] (choose PipeSpline)

Конструктор

[name]( [page:Array points] )

points – An array of [page:Vector3] points

Свойства

[property:Array points]

Методы

See [page:Curve] for inherited methods

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Object3D] →

[name]

An 3D arrow Object.

Пример

var dir = new THREE.Vector3( 1, 0, 0 );
		var origin = new THREE.Vector3( 0, 0, 0 );
		var length = 1;
		var hex = 0xffff00;

		var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
		scene.add( arrowHelper );

Конструктор

[name]([page:Vector3 dir], [page:Vector3 origin], [page:Number length], [page:Number hex], [page:Number headLength], [page:Number headWidth] )

dir -- Vector3 -- direction from origin. Must be a unit vector.
origin -- Vector3
length -- scalar
hex -- hexadecimal value to define color ex:0xffff00
headLength -- The length of the head of the arrow
headWidth -- The length of the width of the arrow

This creates an arrow starting in origin in the direction dir for a certain length. It is also possible to change color.

Свойства

[property:Line line]

Contains the line part of the arrowHelper.

[property:Mesh cone]

Contains the cone part of the arrowHelper.

Методы

[method:null setColor]([page:Number hex])

hex -- The hexadicmal value of the color

Sets the color of the arrowHelper.

[method:null setLength]([page:Number length], [page:Number headLength], [page:Number headWidth])

length -- The desired length
headLength -- The length of the head of the arrow
headWidth -- The length of the width of the arrow

Sets the length of the arrowhelper.

[method:null setDirection]([page:Vector3 dir])

dir -- The desired direction. Must be a unit vector.

Sets the direction of the arrowhelper.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Line] →

[name]

An axis object to visualize the the 3 axes in a simple way.
The X axis is red. The Y axis is green. The Z axis is blue.

Пример

var axisHelper = new THREE.AxisHelper( 5 );
		scene.add( axisHelper );

Конструктор

[name]([page:Number size])

size -- Define the size of the line representing the axes.

Creates an axisHelper with lines of length size.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Mesh] →

[name]

A helper object to show the world-axis-aligned bounding box for an object.

Пример

var hex  = 0xff0000;

		var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x00ff00} );
		var sphere = new THREE.Mesh( new THREE.SphereGeometry( 30, 12, 12), sphereMaterial );
		scene.add( sphere );

		var bbox = new THREE.BoundingBoxHelper( sphere, hex );
		bbox.update();
		scene.add( bbox );

Note that this helper will create a wireframe [page:Mesh] object with a [page:BoxGeometry]; the resulting bounding box object will therefore have face diagonals. You may want to use [page:BoxHelper], which generates a [page:Line] object without face diagonals.

Конструктор

[name]([page:Object3D object], [page:Number hex])

object -- Object3D -- the object3D to show the world-axis-aligned boundingbox.
hex -- hexadecimal value to define color ex:0x888888

This creates an line object to the boundingbox.

Свойства

[property:Object3D object]

Contains the object3D to show the world-axis-aligned boundingbox.

[property:Box3 box]

Contains the bounding box of the object.

Методы

[method:null update]()

Updates the BoundingBoxHelper based on the object property.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Line] →

[name]

Helper object to show a wireframe box (with no face diagonals) around an object

Пример

var sphere = new THREE.SphereGeometry();
		var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
		var box = new THREE.BoxHelper( object );
		scene.add( box );

Конструктор

[name]( [page:Object3D object], [page:Color color] )

object -- Object3D -- the object3D to show the world-axis-aligned boundingbox.
color -- The color of the helper. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0xffff00

Creates a new wireframe box matching the size of the passed box.

Свойства

(none)

Методы

[method:null update]( [page:Object3D object] )

Updates the helper's geometry to match the dimensions of the [page:Geometry.boundingBox bounding box] of the passed object's geometry.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Line] →

[name]

The camera Helper is an Object3D which helps visualizing what a camera contains in its frustum.
It visualizes the frustum with an line Geometry.

Конструктор

[name]([page:Camera camera])

camera -- The camera to visualize.

This create a new [Name] for the specified camera.

Свойства

[property:object pointMap]

This contains the points to viualize the cameraHelper

[property:Camera camera]

The camera to visualize.

Методы

[method:null update]()

Updates the helper based on the projectionMatrix of the camera.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Object3D] →

[name]

Visualize a [page:DirectionalLight]'s effect on the scene

Конструктор

[name]([page:DirectionalLight light], [page:Number size])

light -- [page:DirectionalLight] -- Light to visualize
size -- dimensions of the plane

Creates a line and plane to visualize the light's position and direction

Свойства

[property:Line lightPlane]

Contains the line mesh showing the location of the directional light.

[property:DirectionalLight light]

Contains the directionalLight.

[property:Line targetLine]

Contains the line mesh that shows the direction of the light.

Методы

.[method:null update]()

Updates the helper to match the position and direction of the [page:.light].

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Line] →

[name]

Renders [page:ArrowHelper arrows] to visualize an object's [page:Face3 face] normals. Requires that the object's geometry be an instance of [page:Geometry] (does not work with [page:BufferGeometry]), and that face normals have been specified on all [page:Face3 faces] or calculated with [page:Geometry.computeFaceNormals computeFaceNormals].

Пример

		geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
		material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
		object = new THREE.Mesh( geometry, material );

		edges = new THREE.FaceNormalsHelper( object, 2, 0x00ff00, 1 );

		scene.add( object );
		scene.add( edges );

[example:webgl_helpers Example using various helpers]

Конструктор

[name]( [page:Object3D object], [page:Number size], [page:Color color], [page:Number linewidth] )

object -- object for which to render face normals
size -- size (length) of the arrows
color -- color of the arrows
linewidth -- width of the arrow lines

Свойства

[property:Object3D object]

The attached object

Методы

[method:null update]()

Updates the face normal preview based on movement of the object.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Line] →

[name]

The GridHelper is an object to define grids. Grids are two-dimensional arrays of lines.

Пример

var size = 10;
		var step = 1;

		var gridHelper = new THREE.GridHelper( size, step );
		scene.add( gridHelper );

[example:webgl_helpers Example using various helpers]

Конструктор

[name]( [page:number size], [page:Number step], [page:Color colorCenterLine], [page:Color colorGrid] )

size -- The size of the grid
step -- The size of the step between 2 lines
colorCenterLine -- The color of the centerline. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0x444444
colorGrid -- The color of the lines of the grid. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0x888888

Creates a new [name] of size 'size' and with steps of size 'step'. Colors are optional.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [page:Object3D] →

[name]

Creates a visual aid for a [page:HemisphereLight HemisphereLight].

Конструктор

[name]([page:HemisphereLight light], [page:Number sphereSize])

light -- The HemisphereLight.
sphereSize -- The size of the sphere that shows the location.

Creates an helper for the hemispherelight.

Свойства

[property:Mesh lightSphere]

The sphere mesh that shows the location of the hemispherelight.

[property:HemisphereLight light]

Contains the HemisphereLight.

Методы

[method:null update]()

Updates the helper to match the position and direction of the [page:.light].

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Mesh] →

[name]

This displays a helper object for a [page:PointLight]

Пример

var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
		pointLight.position.set( 10, 10, 10 );
		scene.add( pointLight );

		var sphereSize = 1;
		var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
		scene.add( pointLightHelper );

[example:webgl_helpers Example using various helpers]

Конструктор

[name]([page:PointLight light], [page:Float sphereSize])

light -- The [page:PointLight] to display.
sphereSize -- The size of the sphere helper

Свойства

[property:PointLight light]

The [page:PointLight] that is being represented.

Методы

[method:null update]()

Updates the light helper.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Object3D] →

[name]

This displays a cylinder helper object for a [page:SpotLight]

Пример

View in Examples

Other Examples

[example:webgl_lights_spotlights lights / spotlights ]

Code Example

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 10 );
scene.add( spotLight );

var spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );

Конструктор

[name]([page:SpotLight light])

light -- The [page:SpotLight] to display

Свойства

[property:SpotLight light]

The [page:SpotLight]

Методы

[method:null update]()

Updates the light helper.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Line] →

[name]

Renders [page:ArrowHelper arrows] to visualize an object's vertex normal vectors. Requires that normals have been specified in a [page:BufferAttribute custom attribute] or have been calculated using [page:Geometry.computeVertexNormals computeVertexNormals].

Пример

geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
object = new THREE.Mesh( geometry, material );

edges = new THREE.VertexNormalsHelper( object, 2, 0x00ff00, 1 );

scene.add( object );
scene.add( edges );

[example:webgl_helpers Example using various helpers]

Конструктор

[name]( [page:Object3D object], [page:Number size], [page:Color color], [page:Number linewidth] )

object -- object for which to render vertex normals size -- size (length) of the arrows color -- color of the arrows linewidth -- width of the arrow lines

Свойства

[property:Object3D object]

The attached object

Методы

[method:null update]()

Updates the vertex normal preview based on movement of the object.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Object3D] →

[name]

base class for immediate rendering objects.

Конструктор

[name]()

This creates a new [name].

Методы

[method:null render]([page:Function renderCallback])

renderCallback -- A function to render the generated object.

This function needs to be overridden to start the creation of the object and should call renderCallback when finished.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

[page:Mesh] →

[name]

A mesh that can blend together multiple animated morph targets.

Пример

[example:webgl_morphtargets_md2_control morphtargets / md2 / controll]

Конструктор

[name]([page:Geometry geometry], [page:Material material])

geometry — An instance of [page:Geometry].
material — An instance of [page:Material] (optional).

Свойства

[property:object animationsMap]

An object of named animations as added by [page:MorphBlendMesh.createAnimation].

[property:array animationsList]

The list of animations as added by [page:MorphBlendMesh.createAnimation].

Методы

[method:null setAnimationWeight]([page:String name], [page:Float weight])

name -- The name of the animation
weight -- Weight of the animation, typically 0-1

Set the weight of how much this animation will apply to the overall morph. 0 is off, 1 is full weight.

[method:null setAnimationFPS]([page:String name], [page:Float fps])

name -- The name of the animation
fps -- The number of frames (morphTargets) per second

A frame is typically 1 morph target.

[method:null createAnimation]([page:String name], [page:Integer start], [page:Integer end], [page:Float fps])

name -- The name of the animation
start -- The starting frame (morph)
end -- The ending frame (morph)
fps -- How many frames (morphs) to play per second

Creates an animation object that gets added to both the [page:MorphBlendMesh.animationsMap animationsMap] and [page:MorphBlendMesh.animationsList animationsList].

Animation object:

startFrame -- Starting frame
endFrame -- Ending frame
length -- The number of frames
fps -- The frames per second
duration -- The length of the animation in seconds
lastFrame -- The previous frame that was played
currentFrame -- The current frame
active -- Whether or not the animation is being played
time -- The time in seconds of the animation
direction -- Which way to play the animation
weight -- The weight of the animation
directionBackwards -- Is playing backwards
mirroredLoop -- Loop back and forth

[method:null playAnimation]([page:String name])

name -- The name of the animation

Sets the animation to active and animation time to 0

[method:null update]([page:Float delta])

delta -- Time in seconds

Updates and plays the animation

[method:null autoCreateAnimations]([page:Float fps])

fps -- Frames per second

Goes through the geometry's morphTargets and generates animations based on the morphTargets' names. Names are of the form "walk_01", "walk_02", "walk_03", etc or "run001", "run002", "run003".

[method:null setAnimationDuration]([page:String name], [page:Float duration])

name -- The name of the animation
duration -- How long in seconds to play the animation

Updates the animation object with proper values to update the duration.

[method:null setAnimationDirectionForward]([page:String name])

name -- The name of the animation

Sets the animation to play forwards

[method:null setAnimationDirectionBackward]([page:String name])

name -- The name of the animation

Sets the animation to play backwards

[method:Float getAnimationDuration]([page:String name])

name -- The name of the animation

Returns the duration in seconds of the animation. Returns -1 if it can't be found.

[method:Float getAnimationTime]([page:String name])

name -- The name of the animation

Returns the current time position of the animation.

[method:null setAnimationTime]([page:String name], [page:Float time])

name -- The name of the animation
time -- The time in seconds

Sets the current time position of the animation

[method:null stopAnimation]([page:String name])

name -- The name of the animation

Stops the playback of the animation

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

previous page start next page