Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 3bcb9c2d 编写于 作者: M Mr.doob
浏览文件
操作

Fixed CRLF issues. See #13262

上级 4ef0d67d
展开全部 隐藏空白更改
内联 并排
Showing with 91033 addition and 91033 deletion
.github/CONTRIBUTING.md
浏览文件 @ 3bcb9c2d
# Help
#### The issues section is for bug reports and feature requests only. If you need help, please use [stackoverflow](http://stackoverflow.com/questions/tagged/three.js).
---
# Bugs
#### Before reporting a bug
1. Search issue tracker for similar issues.
2. Try the latest dev branch version of three.js.
3. Refer to the [Migration Guide](https://github.com/mrdoob/three.js/wiki/Migration) when upgrading to the dev version.
#### How to report a bug
1. Specify the revision number of the three.js library where the bug occurred.
2. Specify your browser version, operating system, and graphics card. (for example, Chrome 23.0.1271.95, Windows 7, Nvidia Quadro 2000M)
3. Describe the problem in detail. Explain what happened, and what you expected would happen.
4. Provide a small test-case (http://jsfiddle.net). [Here is a fiddle](http://jsfiddle.net/akmcv7Lh/) you can edit that runs the current version. [And here is a fiddle](http://jsfiddle.net/hw9rcLL8/) that uses the dev branch. If a test-case is not possible, provide a link to a live version of your application.
5. If helpful, include a screenshot. Annotate the screenshot for clarity.
---
# Contribution
#### How to contribute to three.js
1. Make sure you have a GitHub account.
2. Fork the repository on GitHub.
3. Check the [Contribution Guidelines](https://github.com/mrdoob/three.js/wiki/How-to-contribute-to-three.js).
4. Make changes to your clone of the repository.
5. Submit a pull request. Don't include build files in the PR.
# Help
#### The issues section is for bug reports and feature requests only. If you need help, please use [stackoverflow](http://stackoverflow.com/questions/tagged/three.js).
---
# Bugs
#### Before reporting a bug
1. Search issue tracker for similar issues.
2. Try the latest dev branch version of three.js.
3. Refer to the [Migration Guide](https://github.com/mrdoob/three.js/wiki/Migration) when upgrading to the dev version.
#### How to report a bug
1. Specify the revision number of the three.js library where the bug occurred.
2. Specify your browser version, operating system, and graphics card. (for example, Chrome 23.0.1271.95, Windows 7, Nvidia Quadro 2000M)
3. Describe the problem in detail. Explain what happened, and what you expected would happen.
4. Provide a small test-case (http://jsfiddle.net). [Here is a fiddle](http://jsfiddle.net/akmcv7Lh/) you can edit that runs the current version. [And here is a fiddle](http://jsfiddle.net/hw9rcLL8/) that uses the dev branch. If a test-case is not possible, provide a link to a live version of your application.
5. If helpful, include a screenshot. Annotate the screenshot for clarity.
---
# Contribution
#### How to contribute to three.js
1. Make sure you have a GitHub account.
2. Fork the repository on GitHub.
3. Check the [Contribution Guidelines](https://github.com/mrdoob/three.js/wiki/How-to-contribute-to-three.js).
4. Make changes to your clone of the repository.
5. Submit a pull request. Don't include build files in the PR.
docs/api/cameras/Camera.html
浏览文件 @ 3bcb9c2d
<!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:Object3D] &rarr;
<h1>[name]</h1>
<div class="desc">
Abstract base class for cameras. This class should always be inherited when you build a new camera.
</div>
<h2>Constructor</h2>
<h3>[name]()</h3>
<div>
Creates a new [name]. Note that this class is not intended to be called directly;
you probably want a [page:PerspectiveCamera] or [page:OrthographicCamera] instead.
</div>
<h2>Properties</h2>
<div>See the base [page:Object3D] class for common properties.</div>
<h3>[property:Boolean isCamera]</h3>
<div>
Used to check whether this or derived classes are cameras. Default is *true*.<br /><br />
You should not change this, as it used internally by the renderer for optimisation.
</div>
<h3>[property:Layers layers]</h3>
<div>
The [page:Layers layers] that the camera is a member of. This is an inherited
property from [page:Object3D].<br /><br />
Objects must share at least one layer with the camera to be seen
when the camera's viewpoint is rendered.
</div>
<h3>[property:Matrix4 matrixWorldInverse]</h3>
<div>
This is the inverse of matrixWorld. MatrixWorld contains the Matrix which has
the world transform of the Camera.
</div>
<h3>[property:Matrix4 projectionMatrix]</h3>
<div>This is the matrix which contains the projection.</div>
<h2>Methods</h2>
<div>See the base [page:Object3D] class for common methods.</div>
<h3>[method:Camera clone]( )</h3>
<div>
Return a new camera with the same properties as this one.
</div>
<h3>[method:Camera copy]( [page:Camera source] )</h3>
<div>
Copy the properties from the source camera into this one.
</div>
<h3>[method:Vector3 getWorldDirection]( [page:Vector3 optionalTarget] )</h3>
<div>
Returns a [page:Vector3] representing the world space direction in which the camera is looking.<br /><br />
Note: This is not the camera’s positive, but its negative z-axis, in contrast to
[page:Object3D.getWorldDirection getWorldDirection] of the base class (Object3D).<br /><br />
If an [page:Vector3 optionalTarget] vector is specified, the result will be copied into this vector
(which can be reused in this way), otherwise a new vector will be created.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Object3D] &rarr;
<h1>[name]</h1>
<div class="desc">
Abstract base class for cameras. This class should always be inherited when you build a new camera.
</div>
<h2>Constructor</h2>
<h3>[name]()</h3>
<div>
Creates a new [name]. Note that this class is not intended to be called directly;
you probably want a [page:PerspectiveCamera] or [page:OrthographicCamera] instead.
</div>
<h2>Properties</h2>
<div>See the base [page:Object3D] class for common properties.</div>
<h3>[property:Boolean isCamera]</h3>
<div>
Used to check whether this or derived classes are cameras. Default is *true*.<br /><br />
You should not change this, as it used internally by the renderer for optimisation.
</div>
<h3>[property:Layers layers]</h3>
<div>
The [page:Layers layers] that the camera is a member of. This is an inherited
property from [page:Object3D].<br /><br />
Objects must share at least one layer with the camera to be seen
when the camera's viewpoint is rendered.
</div>
<h3>[property:Matrix4 matrixWorldInverse]</h3>
<div>
This is the inverse of matrixWorld. MatrixWorld contains the Matrix which has
the world transform of the Camera.
</div>
<h3>[property:Matrix4 projectionMatrix]</h3>
<div>This is the matrix which contains the projection.</div>
<h2>Methods</h2>
<div>See the base [page:Object3D] class for common methods.</div>
<h3>[method:Camera clone]( )</h3>
<div>
Return a new camera with the same properties as this one.
</div>
<h3>[method:Camera copy]( [page:Camera source] )</h3>
<div>
Copy the properties from the source camera into this one.
</div>
<h3>[method:Vector3 getWorldDirection]( [page:Vector3 optionalTarget] )</h3>
<div>
Returns a [page:Vector3] representing the world space direction in which the camera is looking.<br /><br />
Note: This is not the camera’s positive, but its negative z-axis, in contrast to
[page:Object3D.getWorldDirection getWorldDirection] of the base class (Object3D).<br /><br />
If an [page:Vector3 optionalTarget] vector is specified, the result will be copied into this vector
(which can be reused in this way), otherwise a new vector will be created.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/constants/Materials.html
浏览文件 @ 3bcb9c2d
<!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>
<h1>Material Constants</h1>
<div class="desc">
These constants define properties common to all material types,
with the exception of Texture Combine Operations which only apply to [page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] and [page:MeshPhongMaterial.combine MeshPhongMaterial].<br />
</div>
<h2>Side</h2>
<code>
THREE.FrontSide
THREE.BackSide
THREE.DoubleSide
</code>
<div>
Defines which side of faces will be rendered - front, back or both.
Default is [page:Constant FrontSide].
</div>
<h2>Colors</h2>
<code>
THREE.NoColors
THREE.FaceColors
THREE.VertexColors
</code>
<div>
[page:Constant NoColors] is the default and applies the material's color to all faces.<br />
[page:Constant FaceColors] colors faces according to each [page:Face3 Face3][property:Color color] value.<br />
[page:Constant VertexColors] colors faces according to each [page:Face3 Face3][property:Array vertexColors] value. This is an array of three [page:Color Color]s, one for each vertex in the face.<br />
See the [example:webgl_geometry_colors geometry / colors] example.
</div>
<h2>Blending Mode</h2>
<code>
THREE.NoBlending
THREE.NormalBlending
THREE.AdditiveBlending
THREE.SubtractiveBlending
THREE.MultiplyBlending
THREE.CustomBlending
</code>
<div>
These control the source and destination blending equations for the material's RGB and Alpha sent to the WebGLRenderer for use by WebGL.<br />
[page:Constant NormalBlending] is the default.<br />
Note that [page:Constant CustomBlending] must be set to use [page:CustomBlendingEquation Custom Blending Equations].<br />
See the [example:webgl_materials_blending materials / blending] example.<br />
</div>
<h2>Depth Mode</h2>
<code>
THREE.NeverDepth
THREE.AlwaysDepth
THREE.LessDepth
THREE.LessEqualDepth
THREE.GreaterEqualDepth
THREE.GreaterDepth
THREE.NotEqualDepth
</code>
<div>
Which depth function the material uses to compare incoming pixels Z-depth against the current Z-depth buffer value. If the result of the comparison is true, the pixel will be drawn.<br />
[page:Materials NeverDepth] will never return true.<br />
[page:Materials AlwaysDepth] will always return true.<br />
[page:Materials LessDepth] will return true if the incoming pixel Z-depth is less than the current buffer Z-depth.<br />
[page:Materials LessEqualDepth] is the default and will return true if the incoming pixel Z-depth is less than or equal to the current buffer Z-depth.<br />
[page:Materials GreaterEqualDepth] will return true if the incoming pixel Z-depth is greater than or equal to the current buffer Z-depth.<br />
[page:Materials GreaterDepth] will return true if the incoming pixel Z-depth is greater than the current buffer Z-depth.<br />
[page:Materials NotEqualDepth] will return true if the incoming pixel Z-depth is not equal to the current buffer Z-depth.<br />
</div>
<h2>Texture Combine Operations</h2>
<code>
THREE.MultiplyOperation
THREE.MixOperation
THREE.AddOperation
</code>
These define how the result of the surface's color is combined with the environment map (if present), for [page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] and [page:MeshPhongMaterial.combine MeshPhongMaterial]. <br />
[page:Constant MultiplyOperation] is the default and multiplies the environment map color with the surface color.<br />
[page:Constant MixOperation] uses reflectivity to blend between the two colors.<br />
[page:Constant AddOperation] adds the two colors.
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
<!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>
<h1>Material Constants</h1>
<div class="desc">
These constants define properties common to all material types,
with the exception of Texture Combine Operations which only apply to [page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] and [page:MeshPhongMaterial.combine MeshPhongMaterial].<br />
</div>
<h2>Side</h2>
<code>
THREE.FrontSide
THREE.BackSide
THREE.DoubleSide
</code>
<div>
Defines which side of faces will be rendered - front, back or both.
Default is [page:Constant FrontSide].
</div>
<h2>Colors</h2>
<code>
THREE.NoColors
THREE.FaceColors
THREE.VertexColors
</code>
<div>
[page:Constant NoColors] is the default and applies the material's color to all faces.<br />
[page:Constant FaceColors] colors faces according to each [page:Face3 Face3][property:Color color] value.<br />
[page:Constant VertexColors] colors faces according to each [page:Face3 Face3][property:Array vertexColors] value. This is an array of three [page:Color Color]s, one for each vertex in the face.<br />
See the [example:webgl_geometry_colors geometry / colors] example.
</div>
<h2>Blending Mode</h2>
<code>
THREE.NoBlending
THREE.NormalBlending
THREE.AdditiveBlending
THREE.SubtractiveBlending
THREE.MultiplyBlending
THREE.CustomBlending
</code>
<div>
These control the source and destination blending equations for the material's RGB and Alpha sent to the WebGLRenderer for use by WebGL.<br />
[page:Constant NormalBlending] is the default.<br />
Note that [page:Constant CustomBlending] must be set to use [page:CustomBlendingEquation Custom Blending Equations].<br />
See the [example:webgl_materials_blending materials / blending] example.<br />
</div>
<h2>Depth Mode</h2>
<code>
THREE.NeverDepth
THREE.AlwaysDepth
THREE.LessDepth
THREE.LessEqualDepth
THREE.GreaterEqualDepth
THREE.GreaterDepth
THREE.NotEqualDepth
</code>
<div>
Which depth function the material uses to compare incoming pixels Z-depth against the current Z-depth buffer value. If the result of the comparison is true, the pixel will be drawn.<br />
[page:Materials NeverDepth] will never return true.<br />
[page:Materials AlwaysDepth] will always return true.<br />
[page:Materials LessDepth] will return true if the incoming pixel Z-depth is less than the current buffer Z-depth.<br />
[page:Materials LessEqualDepth] is the default and will return true if the incoming pixel Z-depth is less than or equal to the current buffer Z-depth.<br />
[page:Materials GreaterEqualDepth] will return true if the incoming pixel Z-depth is greater than or equal to the current buffer Z-depth.<br />
[page:Materials GreaterDepth] will return true if the incoming pixel Z-depth is greater than the current buffer Z-depth.<br />
[page:Materials NotEqualDepth] will return true if the incoming pixel Z-depth is not equal to the current buffer Z-depth.<br />
</div>
<h2>Texture Combine Operations</h2>
<code>
THREE.MultiplyOperation
THREE.MixOperation
THREE.AddOperation
</code>
These define how the result of the surface's color is combined with the environment map (if present), for [page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] and [page:MeshPhongMaterial.combine MeshPhongMaterial]. <br />
[page:Constant MultiplyOperation] is the default and multiplies the environment map color with the surface color.<br />
[page:Constant MixOperation] uses reflectivity to blend between the two colors.<br />
[page:Constant AddOperation] adds the two colors.
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
docs/api/core/BufferGeometry.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
docs/api/core/EventDispatcher.html
浏览文件 @ 3bcb9c2d
<!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>
<h1>[name]</h1>
<div class="desc">
JavaScript events for custom objects.<br />
[link:https://github.com/mrdoob/eventdispatcher.js Eventdispatcher on GitHub]
</div>
<h2>Example</h2>
<code>
// Adding events to a custom object
var Car = function () {
this.start = function () {
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
};
};
// Mixing the EventDispatcher.prototype with the custom object prototype
Object.assign( Car.prototype, EventDispatcher.prototype );
// Using events with the custom object
var car = new Car();
car.addEventListener( 'start', function ( event ) {
alert( event.message );
} );
car.start();
</code>
<h2>Constructor</h2>
<h3>[name]()</h3>
<div>
Creates EventDispatcher object.
</div>
<h2>Methods</h2>
<h3>[method:null addEventListener]( [page:String type], [page:Function listener] )</h3>
<div>
type - The type of event to listen to.<br />
listener - The function that gets called when the event is fired.
</div>
<div>
Adds a listener to an event type.
</div>
<h3>[method:Boolean hasEventListener]( [page:String type], [page:Function listener] )</h3>
<div>
type - The type of event to listen to.<br />
listener - The function that gets called when the event is fired.
</div>
<div>
Checks if listener is added to an event type.
</div>
<h3>[method:null removeEventListener]( [page:String type], [page:Function listener] )</h3>
<div>
type - The type of the listener that gets removed.<br />
listener - The listener function that gets removed.
</div>
<div>
Removes a listener from an event type.
</div>
<h3>[method:null dispatchEvent]( [page:object event] )</h3>
<div>
event - The event that gets fired.
</div>
<div>
Fire an event type.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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>
<h1>[name]</h1>
<div class="desc">
JavaScript events for custom objects.<br />
[link:https://github.com/mrdoob/eventdispatcher.js Eventdispatcher on GitHub]
</div>
<h2>Example</h2>
<code>
// Adding events to a custom object
var Car = function () {
this.start = function () {
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
};
};
// Mixing the EventDispatcher.prototype with the custom object prototype
Object.assign( Car.prototype, EventDispatcher.prototype );
// Using events with the custom object
var car = new Car();
car.addEventListener( 'start', function ( event ) {
alert( event.message );
} );
car.start();
</code>
<h2>Constructor</h2>
<h3>[name]()</h3>
<div>
Creates EventDispatcher object.
</div>
<h2>Methods</h2>
<h3>[method:null addEventListener]( [page:String type], [page:Function listener] )</h3>
<div>
type - The type of event to listen to.<br />
listener - The function that gets called when the event is fired.
</div>
<div>
Adds a listener to an event type.
</div>
<h3>[method:Boolean hasEventListener]( [page:String type], [page:Function listener] )</h3>
<div>
type - The type of event to listen to.<br />
listener - The function that gets called when the event is fired.
</div>
<div>
Checks if listener is added to an event type.
</div>
<h3>[method:null removeEventListener]( [page:String type], [page:Function listener] )</h3>
<div>
type - The type of the listener that gets removed.<br />
listener - The listener function that gets removed.
</div>
<div>
Removes a listener from an event type.
</div>
<h3>[method:null dispatchEvent]( [page:object event] )</h3>
<div>
event - The event that gets fired.
</div>
<div>
Fire an event type.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/core/Face3.html
浏览文件 @ 3bcb9c2d
<!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>
<h1>[name]</h1>
<div class="desc">
Triangular face used in [page:Geometry]. These are created automatically for all
standard geometry types, however if you are building a custom geometry you will have to
create them manually.
</div>
<h2>Examples</h2>
<div>[example:misc_ubiquity_test ubiquity / test ]</div>
<div>[example:svg_sandbox svg / sandbox ]</div>
<div>[example:misc_exporter_obj exporter / obj ]</div>
<div>[example:webgl_shaders_vector WebGL / shaders / vector ]</div>
<code>
var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );
//create a triangular geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, 50, 0 ) );
//create a new face using vertices 0, 1, 2
var normal = new THREE.Vector3( 0, 1, 0 ); //optional
var color = new THREE.Color( 0xffaa00 ); //optional
var materialIndex = 0; //optional
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );
//add the face to the geometry's faces array
geometry.faces.push( face );
//the face normals and vertex normals can be calculated automatically if not supplied above
geometry.computeFaceNormals();
geometry.computeVertexNormals();
scene.add( new THREE.Mesh( geometry, material ) );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Integer a], [page:Integer b], [page:Integer c], [page:Vector3 normal], [page:Color color], [page:Integer materialIndex] )</h3>
<div>
a — Vertex A index.<br />
b — Vertex B index.<br />
c — Vertex C index.<br /><br />
normal — (optional) Face normal ([page:Vector3 Vector3]) or array of vertex normals.
If a single vector is passed in, this sets [page:.normal], otherwise if an array of three
vectors is passed in this sets [page:.vertexNormals]<br /><br />
color — (optional) Face [page:Color color] or array of vertex [page:Color colors].
If a single vector is passed in, this sets [page:.color], otherwise if an array of three
vectors is passed in this sets [page:.vertexColors]<br /><br />
materialIndex — (optional) which index of an array of materials to associate
with the face.
</div>
<h2>Properties</h2>
<h3>[property:Integer a]</h3>
<div>
Vertex A index.
</div>
<h3>[property:Integer b]</h3>
<div>
Vertex B index.
</div>
<h3>[property:Integer c]</h3>
<div>
Vertex C index.
</div>
<h3>[property:Vector3 normal]</h3>
<div>
Face normal - vector showing the direction of the Face3. If calculated automatically
(using [page:Geometry.computeFaceNormals]), this is the normalized cross product of two edges of the
triangle. Default is *(0, 0, 0)*.
</div>
<h3>[property:Color color]</h3>
<div>
Face color - for this to be used a material's [page:Material.vertexColors vertexColors] property
must be set to [page:Materials THREE.FaceColors].
</div>
<h3>[property:Array vertexNormals]</h3>
<div>
Array of 3 [page:Vector3 vertex normals].
</div>
<h3>[property:Array vertexColors]</h3>
<div>
Array of 3 vertex colors - for these to be used a material's [page:Material.vertexColors vertexColors] property
must be set to [page:Materials THREE.VertexColors].
</div>
<h3>[property:Integer materialIndex]</h3>
<div>
Material index (points to an index in the associated array of materials). Default is *0*.
</div>
<h2>Methods</h2>
<h3>[method:Face3 clone]()</h3>
<div>Creates a new clone of the Face3 object.</div>
<h3>[method:Face3 copy]( [page:Face3 face3] )</h3>
<div>Copy the paramaters of another Face3 into this.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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>
<h1>[name]</h1>
<div class="desc">
Triangular face used in [page:Geometry]. These are created automatically for all
standard geometry types, however if you are building a custom geometry you will have to
create them manually.
</div>
<h2>Examples</h2>
<div>[example:misc_ubiquity_test ubiquity / test ]</div>
<div>[example:svg_sandbox svg / sandbox ]</div>
<div>[example:misc_exporter_obj exporter / obj ]</div>
<div>[example:webgl_shaders_vector WebGL / shaders / vector ]</div>
<code>
var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );
//create a triangular geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, 50, 0 ) );
//create a new face using vertices 0, 1, 2
var normal = new THREE.Vector3( 0, 1, 0 ); //optional
var color = new THREE.Color( 0xffaa00 ); //optional
var materialIndex = 0; //optional
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );
//add the face to the geometry's faces array
geometry.faces.push( face );
//the face normals and vertex normals can be calculated automatically if not supplied above
geometry.computeFaceNormals();
geometry.computeVertexNormals();
scene.add( new THREE.Mesh( geometry, material ) );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Integer a], [page:Integer b], [page:Integer c], [page:Vector3 normal], [page:Color color], [page:Integer materialIndex] )</h3>
<div>
a — Vertex A index.<br />
b — Vertex B index.<br />
c — Vertex C index.<br /><br />
normal — (optional) Face normal ([page:Vector3 Vector3]) or array of vertex normals.
If a single vector is passed in, this sets [page:.normal], otherwise if an array of three
vectors is passed in this sets [page:.vertexNormals]<br /><br />
color — (optional) Face [page:Color color] or array of vertex [page:Color colors].
If a single vector is passed in, this sets [page:.color], otherwise if an array of three
vectors is passed in this sets [page:.vertexColors]<br /><br />
materialIndex — (optional) which index of an array of materials to associate
with the face.
</div>
<h2>Properties</h2>
<h3>[property:Integer a]</h3>
<div>
Vertex A index.
</div>
<h3>[property:Integer b]</h3>
<div>
Vertex B index.
</div>
<h3>[property:Integer c]</h3>
<div>
Vertex C index.
</div>
<h3>[property:Vector3 normal]</h3>
<div>
Face normal - vector showing the direction of the Face3. If calculated automatically
(using [page:Geometry.computeFaceNormals]), this is the normalized cross product of two edges of the
triangle. Default is *(0, 0, 0)*.
</div>
<h3>[property:Color color]</h3>
<div>
Face color - for this to be used a material's [page:Material.vertexColors vertexColors] property
must be set to [page:Materials THREE.FaceColors].
</div>
<h3>[property:Array vertexNormals]</h3>
<div>
Array of 3 [page:Vector3 vertex normals].
</div>
<h3>[property:Array vertexColors]</h3>
<div>
Array of 3 vertex colors - for these to be used a material's [page:Material.vertexColors vertexColors] property
must be set to [page:Materials THREE.VertexColors].
</div>
<h3>[property:Integer materialIndex]</h3>
<div>
Material index (points to an index in the associated array of materials). Default is *0*.
</div>
<h2>Methods</h2>
<h3>[method:Face3 clone]()</h3>
<div>Creates a new clone of the Face3 object.</div>
<h3>[method:Face3 copy]( [page:Face3 face3] )</h3>
<div>Copy the paramaters of another Face3 into this.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/extras/core/Curve.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/core/Shape.html
浏览文件 @ 3bcb9c2d
<!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:Path] &rarr;
<h1>[name]</h1>
<div class="desc">
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.
</div>
<code>
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() );
</code>
<h2>Examples</h2>
<div>
[example:webgl_geometry_shapes geometry / shapes ]<br/>
[example:webgl_geometry_extrude_shapes geometry / extrude / shapes ]<br/>
[example:webgl_geometry_extrude_shapes2 geometry / extrude / shapes2 ]<br/>
</div>
<h2>Constructor</h2>
<h3>[name]( [page:Array points] )</h3>
<div>
points -- (optional) array of [page:Vector2 Vector2s].<br /><br />
Creates a Shape from the points. The first point defines the offset, then successive points
are added to the [page:CurvePath.curves curves] array as [page:LineCurve LineCurves].<br /><br />
If no points are specified, an empty shape is created and the [page:.currentPoint] is set to
the origin.
</div>
<h2>Properties</h2>
<div>See the base [page:Path] class for common properties.</div>
<h3>[property:String uuid]</h3>
<div>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this instance. This gets automatically assigned, so this shouldn't be edited.
</div>
<h3>[property:array holes]</h3>
<div>An array of [page:Path paths] that define the holes in the shape.</div>
<h2>Methods</h2>
<div>See the base [page:Path] class for common methods.</div>
<h3>[method:Array extractPoints]( [page:Integer divisions] )</h3>
<div>
divisions -- The fineness of the result.<br /><br />
Call [page:Curve.getPoints getPoints] on the shape and the [page:.holes] array, and return an object of the form:
<code>
{
shape
holes
}
</code>
where shape and holes are arrays of [page:Vector2 Vector2s].
</div>
<h3>[method:Array getPointsHoles]( [page:Integer divisions] )</h3>
<div>
divisions -- The fineness of the result.<br /><br />
Get an array of [page:Vector2 Vector2s] that represent the holes in the shape.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Path] &rarr;
<h1>[name]</h1>
<div class="desc">
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.
</div>
<code>
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() );
</code>
<h2>Examples</h2>
<div>
[example:webgl_geometry_shapes geometry / shapes ]<br/>
[example:webgl_geometry_extrude_shapes geometry / extrude / shapes ]<br/>
[example:webgl_geometry_extrude_shapes2 geometry / extrude / shapes2 ]<br/>
</div>
<h2>Constructor</h2>
<h3>[name]( [page:Array points] )</h3>
<div>
points -- (optional) array of [page:Vector2 Vector2s].<br /><br />
Creates a Shape from the points. The first point defines the offset, then successive points
are added to the [page:CurvePath.curves curves] array as [page:LineCurve LineCurves].<br /><br />
If no points are specified, an empty shape is created and the [page:.currentPoint] is set to
the origin.
</div>
<h2>Properties</h2>
<div>See the base [page:Path] class for common properties.</div>
<h3>[property:String uuid]</h3>
<div>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this instance. This gets automatically assigned, so this shouldn't be edited.
</div>
<h3>[property:array holes]</h3>
<div>An array of [page:Path paths] that define the holes in the shape.</div>
<h2>Methods</h2>
<div>See the base [page:Path] class for common methods.</div>
<h3>[method:Array extractPoints]( [page:Integer divisions] )</h3>
<div>
divisions -- The fineness of the result.<br /><br />
Call [page:Curve.getPoints getPoints] on the shape and the [page:.holes] array, and return an object of the form:
<code>
{
shape
holes
}
</code>
where shape and holes are arrays of [page:Vector2 Vector2s].
</div>
<h3>[method:Array getPointsHoles]( [page:Integer divisions] )</h3>
<div>
divisions -- The fineness of the result.<br /><br />
Get an array of [page:Vector2 Vector2s] that represent the holes in the shape.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/extras/curves/ArcCurve.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/curves/CubicBezierCurve.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/curves/CubicBezierCurve3.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/curves/EllipseCurve.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/curves/LineCurve.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/curves/LineCurve3.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/curves/QuadraticBezierCurve.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/curves/QuadraticBezierCurve3.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/extras/curves/SplineCurve.html
浏览文件 @ 3bcb9c2d
<!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 2d spline curve from a series of points. Internally this uses
[page:Interpolations.CatmullRom] to create the curve.
</div>
<h2>Example</h2>
<code>
// 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 );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Array points] )</h3>
<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:Boolean isSplineCurve]</h3>
<div>
Used to check whether this or derived classes are SplineCurves. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h3>[property:Array points]</h3>
<div>The array of [page:Vector2] points that define the curve.</div>
<h2>Methods</h2>
<div>See the base [page:Curve] class for common methods.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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 2d spline curve from a series of points. Internally this uses
[page:Interpolations.CatmullRom] to create the curve.
</div>
<h2>Example</h2>
<code>
// 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 );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Array points] )</h3>
<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:Boolean isSplineCurve]</h3>
<div>
Used to check whether this or derived classes are SplineCurves. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h3>[property:Array points]</h3>
<div>The array of [page:Vector2] points that define the curve.</div>
<h2>Methods</h2>
<div>See the base [page:Curve] class for common methods.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/extras/objects/ImmediateRenderObject.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/DodecahedronBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/DodecahedronGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/IcosahedronBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/IcosahedronGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/OctahedronBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/OctahedronGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/ParametricBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/ParametricGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/PlaneGeometry.html
浏览文件 @ 3bcb9c2d
<!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:Geometry] &rarr;
<h1>[name]</h1>
<div class="desc">A class for generating plane geometries</div>
<iframe id="scene" src="scenes/geometry-browser.html#PlaneGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Example</h2>
<code>var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
</code>
<h2>Constructor</h2>
<h3>[name]([page:Float width], [page:Float height], [page:Integer widthSegments], [page:Integer heightSegments])</h3>
<div>
width — Width along the X axis. Default is 1.<br />
height — Height along the Y axis. Default is 1.<br />
widthSegments — Optional. Default is 1. <br />
heightSegments — Optional. Default is 1.
</div>
<h2>Properties</h2>
<div>
Each of the contructor parameters is accessible in the parameters property of the object. Any modification of these properties after instantiation does not change the geometry.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Geometry] &rarr;
<h1>[name]</h1>
<div class="desc">A class for generating plane geometries</div>
<iframe id="scene" src="scenes/geometry-browser.html#PlaneGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Example</h2>
<code>var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
</code>
<h2>Constructor</h2>
<h3>[name]([page:Float width], [page:Float height], [page:Integer widthSegments], [page:Integer heightSegments])</h3>
<div>
width — Width along the X axis. Default is 1.<br />
height — Height along the Y axis. Default is 1.<br />
widthSegments — Optional. Default is 1. <br />
heightSegments — Optional. Default is 1.
</div>
<h2>Properties</h2>
<div>
Each of the contructor parameters is accessible in the parameters property of the object. Any modification of these properties after instantiation does not change the geometry.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/geometries/PolyhedronBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/PolyhedronGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/ShapeBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/ShapeGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/TetrahedronBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/TetrahedronGeometry.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/geometries/TextBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!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:ExtrudeBufferGeometry] &rarr;
<h1>[name]</h1>
<div class="desc">
A class for generating text as a single geometry. It is constructed by providing a string of text, and a hash of
parameters consisting of a loaded [page:Font] and settings for the geometry's parent [page:ExtrudeBufferGeometry].
See the [page:Font], [page:FontLoader] and [page:Creating_Text] pages for additional details.
</div>
<iframe id="scene" src="scenes/geometry-browser.html#TextBufferGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Examples</h2>
<div>
[example:webgl_geometry_text geometry / text ]
</div>
<code>
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextBufferGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
} );
</code>
<h2>Constructor</h2>
<h3>[name]([page:String text], [page:Object parameters])</h3>
<div>
text — The text that needs to be shown. <br />
parameters — Object that can contains the following parameters.
<ul>
<li>font — an instance of THREE.Font.</li>
<li>size — Float. Size of the text. Default is 100.</li>
<li>height — Float. Thickness to extrude text. Default is 50.</li>
<li>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
<li>bevelEnabled — Boolean. Turn on bevel. Default is False.</li>
<li>bevelThickness — Float. How deep into text bevel goes. Default is 10.</li>
<li>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>
<li>bevelSegments — Integer. Number of bevel segments. Default is 3.</li>
</ul>
</div>
<h2>Available Fonts</h2>
<div>
TextGeometry uses <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a> generated fonts.
Some existing fonts can be found located in <b>/examples/fonts</b> and must be included in the page.
</div>
<table>
<tr>
<th>Font</th>
<th>Weight</th>
<th>Style</th>
<th>File Path</th>
</tr>
<tr>
<td>helvetiker</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/helvetiker_regular.typeface.json</td>
</tr>
<tr>
<td>helvetiker</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/helvetiker_bold.typeface.json</td>
</tr>
<tr>
<td>optimer</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/optimer_regular.typeface.json</td>
</tr>
<tr>
<td>optimer</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/optimer_bold.typeface.json</td>
</tr>
<tr>
<td>gentilis</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/gentilis_regular.typeface.json</td>
</tr>
<tr>
<td>gentilis</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/gentilis_bold.typeface.json</td>
</tr>
<tr>
<td>droid sans</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_sans_regular.typeface.json</td>
</tr>
<tr>
<td>droid sans</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_sans_bold.typeface.json</td>
</tr>
<tr>
<td>droid serif</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_serif_regular.typeface.json</td>
</tr>
<tr>
<td>droid serif</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_serif_bold.typeface.json</td>
</tr>
</table>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/TextGeometry.js src/TextGeometry.js]
</body>
</html>
<!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:ExtrudeBufferGeometry] &rarr;
<h1>[name]</h1>
<div class="desc">
A class for generating text as a single geometry. It is constructed by providing a string of text, and a hash of
parameters consisting of a loaded [page:Font] and settings for the geometry's parent [page:ExtrudeBufferGeometry].
See the [page:Font], [page:FontLoader] and [page:Creating_Text] pages for additional details.
</div>
<iframe id="scene" src="scenes/geometry-browser.html#TextBufferGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Examples</h2>
<div>
[example:webgl_geometry_text geometry / text ]
</div>
<code>
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextBufferGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
} );
</code>
<h2>Constructor</h2>
<h3>[name]([page:String text], [page:Object parameters])</h3>
<div>
text — The text that needs to be shown. <br />
parameters — Object that can contains the following parameters.
<ul>
<li>font — an instance of THREE.Font.</li>
<li>size — Float. Size of the text. Default is 100.</li>
<li>height — Float. Thickness to extrude text. Default is 50.</li>
<li>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
<li>bevelEnabled — Boolean. Turn on bevel. Default is False.</li>
<li>bevelThickness — Float. How deep into text bevel goes. Default is 10.</li>
<li>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>
<li>bevelSegments — Integer. Number of bevel segments. Default is 3.</li>
</ul>
</div>
<h2>Available Fonts</h2>
<div>
TextGeometry uses <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a> generated fonts.
Some existing fonts can be found located in <b>/examples/fonts</b> and must be included in the page.
</div>
<table>
<tr>
<th>Font</th>
<th>Weight</th>
<th>Style</th>
<th>File Path</th>
</tr>
<tr>
<td>helvetiker</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/helvetiker_regular.typeface.json</td>
</tr>
<tr>
<td>helvetiker</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/helvetiker_bold.typeface.json</td>
</tr>
<tr>
<td>optimer</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/optimer_regular.typeface.json</td>
</tr>
<tr>
<td>optimer</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/optimer_bold.typeface.json</td>
</tr>
<tr>
<td>gentilis</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/gentilis_regular.typeface.json</td>
</tr>
<tr>
<td>gentilis</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/gentilis_bold.typeface.json</td>
</tr>
<tr>
<td>droid sans</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_sans_regular.typeface.json</td>
</tr>
<tr>
<td>droid sans</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_sans_bold.typeface.json</td>
</tr>
<tr>
<td>droid serif</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_serif_regular.typeface.json</td>
</tr>
<tr>
<td>droid serif</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_serif_bold.typeface.json</td>
</tr>
</table>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/TextGeometry.js src/TextGeometry.js]
</body>
</html>
docs/api/geometries/TubeBufferGeometry.html
浏览文件 @ 3bcb9c2d
<!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:BufferGeometry] &rarr;
<h1>[name]</h1>
<div class="desc">Creates a tube that extrudes along a 3d curve.</div>
<iframe id="scene" src="scenes/geometry-browser.html#TubeBufferGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Example</h2>
<code>
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.TubeBufferGeometry( path, 20, 2, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
</code>
<h2>Constructor</h2>
<h3>[name]([page:Curve path], [page:Integer tubularSegments], [page:Float radius], [page:Integer radialSegments], [page:Boolean closed])</h3>
<div>
path — [page:Curve] - A path that inherits from the [page:Curve] base class<br />
tubularSegments — [page:Integer] - The number of segments that make up the tube, default is 64<br />
radius — [page:Float] - The radius of the tube, default is 1<br />
radialSegments — [page:Integer] - The number of segments that make up the cross-section, default is 8 <br />
closed — [page:Boolean] Is the tube open or closed, default is false <br />
</div>
<h2>Properties</h2>
<h3>[property:Object parameters]</h3>
<div>
An object with all of the parameters that were used to generate the geometry.
</div>
<h3>[property:Array tangents]</h3>
<div>
An array of [page:Vector3] tangents
</div>
<h3>[property:Array normals]</h3>
<div>
An array of [page:Vector3] normals
</div>
<h3>[property:Array binormals]</h3>
<div>
An array of [page:Vector3] binormals
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/TubeGeometry.js src/geometries/TubeGeometry.js]
</body>
</html>
<!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:BufferGeometry] &rarr;
<h1>[name]</h1>
<div class="desc">Creates a tube that extrudes along a 3d curve.</div>
<iframe id="scene" src="scenes/geometry-browser.html#TubeBufferGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Example</h2>
<code>
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.TubeBufferGeometry( path, 20, 2, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
</code>
<h2>Constructor</h2>
<h3>[name]([page:Curve path], [page:Integer tubularSegments], [page:Float radius], [page:Integer radialSegments], [page:Boolean closed])</h3>
<div>
path — [page:Curve] - A path that inherits from the [page:Curve] base class<br />
tubularSegments — [page:Integer] - The number of segments that make up the tube, default is 64<br />
radius — [page:Float] - The radius of the tube, default is 1<br />
radialSegments — [page:Integer] - The number of segments that make up the cross-section, default is 8 <br />
closed — [page:Boolean] Is the tube open or closed, default is false <br />
</div>
<h2>Properties</h2>
<h3>[property:Object parameters]</h3>
<div>
An object with all of the parameters that were used to generate the geometry.
</div>
<h3>[property:Array tangents]</h3>
<div>
An array of [page:Vector3] tangents
</div>
<h3>[property:Array normals]</h3>
<div>
An array of [page:Vector3] normals
</div>
<h3>[property:Array binormals]</h3>
<div>
An array of [page:Vector3] binormals
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/TubeGeometry.js src/geometries/TubeGeometry.js]
</body>
</html>
docs/api/geometries/TubeGeometry.html
浏览文件 @ 3bcb9c2d
<!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:Geometry] &rarr;
<h1>[name]</h1>
<div class="desc">Creates a tube that extrudes along a 3d curve.</div>
<iframe id="scene" src="scenes/geometry-browser.html#TubeGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Example</h2>
<code>
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 );
</code>
<h2>Constructor</h2>
<h3>[name]([page:Curve path], [page:Integer tubularSegments], [page:Float radius], [page:Integer radialSegments], [page:Boolean closed])</h3>
<div>
path — [page:Curve] - A path that inherits from the [page:Curve] base class<br />
tubularSegments — [page:Integer] - The number of segments that make up the tube, default is 64<br />
radius — [page:Float] - The radius of the tube, default is 1<br />
radialSegments — [page:Integer] - The number of segments that make up the cross-section, default is 8 <br />
closed — [page:Boolean] Is the tube open or closed, default is false <br />
</div>
<h2>Properties</h2>
<h3>[property:Object parameters]</h3>
<div>
An object with all of the parameters that were used to generate the geometry.
</div>
<h3>[property:Array tangents]</h3>
<div>
An array of [page:Vector3] tangents
</div>
<h3>[property:Array normals]</h3>
<div>
An array of [page:Vector3] normals
</div>
<h3>[property:Array binormals]</h3>
<div>
An array of [page:Vector3] binormals
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Geometry] &rarr;
<h1>[name]</h1>
<div class="desc">Creates a tube that extrudes along a 3d curve.</div>
<iframe id="scene" src="scenes/geometry-browser.html#TubeGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Example</h2>
<code>
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 );
</code>
<h2>Constructor</h2>
<h3>[name]([page:Curve path], [page:Integer tubularSegments], [page:Float radius], [page:Integer radialSegments], [page:Boolean closed])</h3>
<div>
path — [page:Curve] - A path that inherits from the [page:Curve] base class<br />
tubularSegments — [page:Integer] - The number of segments that make up the tube, default is 64<br />
radius — [page:Float] - The radius of the tube, default is 1<br />
radialSegments — [page:Integer] - The number of segments that make up the cross-section, default is 8 <br />
closed — [page:Boolean] Is the tube open or closed, default is false <br />
</div>
<h2>Properties</h2>
<h3>[property:Object parameters]</h3>
<div>
An object with all of the parameters that were used to generate the geometry.
</div>
<h3>[property:Array tangents]</h3>
<div>
An array of [page:Vector3] tangents
</div>
<h3>[property:Array normals]</h3>
<div>
An array of [page:Vector3] normals
</div>
<h3>[property:Array binormals]</h3>
<div>
An array of [page:Vector3] binormals
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/helpers/ArrowHelper.html
浏览文件 @ 3bcb9c2d
<!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:Object3D] &rarr;
<h1>[name]</h1>
<div class="desc">An 3D arrow object for visualizing directions.</div>
<h2>Example</h2>
<div>[example:webgl_geometries WebGL / geometries]</div>
<div>[example:webgl_geometry_normals WebGL / geometry / normals]</div>
<div>[example:webgl_shadowmesh WebGL / shadowmesh]</div>
<code>
var dir = new THREE.Vector3( 1, 2, 0 );
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
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 );
</code>
<h2>Constructor</h2>
<h3>[name]([page:Vector3 dir], [page:Vector3 origin], [page:Number length], [page:Number hex], [page:Number headLength], [page:Number headWidth] )</h3>
<div>
[page:Vector3 dir] -- direction from origin. Must be a unit vector. <br />
[page:Vector3 origin] -- Point at which the arrow starts.<br />
[page:Number length] -- length of the arrow. Default is *1*.<br />
[page:Number hex] -- hexadecimal value to define color. Default is 0xffff00.<br />
[page:Number headLength] -- The length of the head of the arrow. Default is 0.2 * length.<br />
[page:Number headWidth] -- The length of the width of the arrow. Default is 0.2 * headLength.
</div>
<h2>Properties</h2>
<div>See the base [page:Object3D] class for common properties.</div>
<h3>[property:Line line]</h3>
<div>Contains the line part of the arrowHelper.</div>
<h3>[property:Mesh cone]</h3>
<div>Contains the cone part of the arrowHelper.</div>
<h2>Methods</h2>
<div>See the base [page:Object3D] class for common methods.</div>
<h3>[method:null setColor]([page:Number hex])</h3>
<div>
hex -- The hexadecimal value of the color.<br /><br />
Sets the color of the arrowHelper.
</div>
<h3>[method:null setLength]([page:Number length], [page:Number headLength], [page:Number headWidth])</h3>
<div>
length -- The desired length.<br />
headLength -- The length of the head of the arrow.<br />
headWidth -- The length of the width of the arrow.<br /><br />
Sets the length of the arrowhelper.
</div>
<h3>[method:null setDirection]([page:Vector3 dir])</h3>
<div>
dir -- The desired direction. Must be a unit vector.<br /><br />
Sets the direction of the arrowhelper.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Object3D] &rarr;
<h1>[name]</h1>
<div class="desc">An 3D arrow object for visualizing directions.</div>
<h2>Example</h2>
<div>[example:webgl_geometries WebGL / geometries]</div>
<div>[example:webgl_geometry_normals WebGL / geometry / normals]</div>
<div>[example:webgl_shadowmesh WebGL / shadowmesh]</div>
<code>
var dir = new THREE.Vector3( 1, 2, 0 );
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
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 );
</code>
<h2>Constructor</h2>
<h3>[name]([page:Vector3 dir], [page:Vector3 origin], [page:Number length], [page:Number hex], [page:Number headLength], [page:Number headWidth] )</h3>
<div>
[page:Vector3 dir] -- direction from origin. Must be a unit vector. <br />
[page:Vector3 origin] -- Point at which the arrow starts.<br />
[page:Number length] -- length of the arrow. Default is *1*.<br />
[page:Number hex] -- hexadecimal value to define color. Default is 0xffff00.<br />
[page:Number headLength] -- The length of the head of the arrow. Default is 0.2 * length.<br />
[page:Number headWidth] -- The length of the width of the arrow. Default is 0.2 * headLength.
</div>
<h2>Properties</h2>
<div>See the base [page:Object3D] class for common properties.</div>
<h3>[property:Line line]</h3>
<div>Contains the line part of the arrowHelper.</div>
<h3>[property:Mesh cone]</h3>
<div>Contains the cone part of the arrowHelper.</div>
<h2>Methods</h2>
<div>See the base [page:Object3D] class for common methods.</div>
<h3>[method:null setColor]([page:Number hex])</h3>
<div>
hex -- The hexadecimal value of the color.<br /><br />
Sets the color of the arrowHelper.
</div>
<h3>[method:null setLength]([page:Number length], [page:Number headLength], [page:Number headWidth])</h3>
<div>
length -- The desired length.<br />
headLength -- The length of the head of the arrow.<br />
headWidth -- The length of the width of the arrow.<br /><br />
Sets the length of the arrowhelper.
</div>
<h3>[method:null setDirection]([page:Vector3 dir])</h3>
<div>
dir -- The desired direction. Must be a unit vector.<br /><br />
Sets the direction of the arrowhelper.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/helpers/CameraHelper.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/helpers/FaceNormalsHelper.html
浏览文件 @ 3bcb9c2d
<!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:LineSegments] &rarr;
<h1>[name]</h1>
<div class="desc">
Renders [page:ArrowHelper arrows] to visualize an object's [page:Face3 face] normals.
Requires that face normals have been specified on all [page:Face3 faces] or calculated with [page:Geometry.computeFaceNormals computeFaceNormals].</div>
Note that this only works with the objects whose geometry is an instance of [page:Geometry].
For [page:BufferGeometry] use a [page:VertexNormalsHelper] instead.
<div>
<h2>Example</h2>
<div>[example:webgl_helpers WebGL / helpers]</div>
<code>
geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
box = new THREE.Mesh( geometry, material );
helper = new THREE.FaceNormalsHelper( box, 2, 0x00ff00, 1 );
scene.add( box );
scene.add( helper );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Object3D object], [page:Number size], [page:Color color], [page:Number linewidth] )</h3>
<div>
[page:Object3D object] -- object for which to render face normals.<br />
[page:Number size] -- (optional) length of the arrows. Default is *1*.<br />
[page:Hex color] -- (optional) hex color of the arrows. Default is *0xffff00*.<br />
[page:Number linewidth] -- (optional) width of the arrow lines. Default is *1*.
</div>
<h2>Properties</h2>
<div>See the base [page:LineSegments] class for common properties.</div>
<h3>[property:object matrixAutoUpdate]</h3>
<div>
See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
objects's [page:Object3D.matrixWorld matrixWorld].
</div>
<h3>[property:Object3D object]</h3>
<div>The object for which the face normals are being visualized.</div>
<h3>[property:Number size]</h3>
<div>Length of the arrows. Default is *1*.</div>
<h2>Methods</h2>
<div>See the base [page:LineSegments] class for common methods.</div>
<h3>[method:null update]()</h3>
<div>Updates the face normal preview based on movement of the object.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:LineSegments] &rarr;
<h1>[name]</h1>
<div class="desc">
Renders [page:ArrowHelper arrows] to visualize an object's [page:Face3 face] normals.
Requires that face normals have been specified on all [page:Face3 faces] or calculated with [page:Geometry.computeFaceNormals computeFaceNormals].</div>
Note that this only works with the objects whose geometry is an instance of [page:Geometry].
For [page:BufferGeometry] use a [page:VertexNormalsHelper] instead.
<div>
<h2>Example</h2>
<div>[example:webgl_helpers WebGL / helpers]</div>
<code>
geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
box = new THREE.Mesh( geometry, material );
helper = new THREE.FaceNormalsHelper( box, 2, 0x00ff00, 1 );
scene.add( box );
scene.add( helper );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Object3D object], [page:Number size], [page:Color color], [page:Number linewidth] )</h3>
<div>
[page:Object3D object] -- object for which to render face normals.<br />
[page:Number size] -- (optional) length of the arrows. Default is *1*.<br />
[page:Hex color] -- (optional) hex color of the arrows. Default is *0xffff00*.<br />
[page:Number linewidth] -- (optional) width of the arrow lines. Default is *1*.
</div>
<h2>Properties</h2>
<div>See the base [page:LineSegments] class for common properties.</div>
<h3>[property:object matrixAutoUpdate]</h3>
<div>
See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
objects's [page:Object3D.matrixWorld matrixWorld].
</div>
<h3>[property:Object3D object]</h3>
<div>The object for which the face normals are being visualized.</div>
<h3>[property:Number size]</h3>
<div>Length of the arrows. Default is *1*.</div>
<h2>Methods</h2>
<div>See the base [page:LineSegments] class for common methods.</div>
<h3>[method:null update]()</h3>
<div>Updates the face normal preview based on movement of the object.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/helpers/GridHelper.html
浏览文件 @ 3bcb9c2d
<!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:Line] &rarr;
<h1>[name]</h1>
<div class="desc">The GridHelper is an object to define grids. Grids are two-dimensional arrays of lines.</div>
<h2>Example</h2>
<code>var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
</code>
[example:webgl_helpers Example using various helpers]
<h2>Constructor</h2>
<h3>[name]( [page:number size], [page:Number divisions], [page:Color colorCenterLine], [page:Color colorGrid] )</h3>
<div>
size -- The size of the grid. Default is 10. <br />
divisions -- The number of divisions across the grid. Default is 10. <br />
colorCenterLine -- The color of the centerline. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0x444444 <br />
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
</div>
<div>
Creates a new [name] of size 'size' and divided into 'divisions' segments per side. Colors are optional.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Line] &rarr;
<h1>[name]</h1>
<div class="desc">The GridHelper is an object to define grids. Grids are two-dimensional arrays of lines.</div>
<h2>Example</h2>
<code>var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
</code>
[example:webgl_helpers Example using various helpers]
<h2>Constructor</h2>
<h3>[name]( [page:number size], [page:Number divisions], [page:Color colorCenterLine], [page:Color colorGrid] )</h3>
<div>
size -- The size of the grid. Default is 10. <br />
divisions -- The number of divisions across the grid. Default is 10. <br />
colorCenterLine -- The color of the centerline. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0x444444 <br />
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
</div>
<div>
Creates a new [name] of size 'size' and divided into 'divisions' segments per side. Colors are optional.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/helpers/SpotLightHelper.html
浏览文件 @ 3bcb9c2d
<!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:Object3D] &rarr;
<h1>[name]</h1>
<div class="desc">This displays a cone shaped helper object for a [page:SpotLight].</div>
<h2>Example</h2>
<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
<a target="THREE_Examples" href="../examples/#webgl_lights_spotlight">View in Examples</a><br />
<h2>Other Examples</h2>
<div>[example:webgl_lights_spotlights lights / spotlights ]</div>
<h2>Code Example</h2>
<code>
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 10 );
scene.add( spotLight );
var spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:SpotLight light], [page:Hex color] )</h3>
<div>
[page:SpotLight light] -- The [page:SpotLight] to be visualized. <br /><br/>
[page:Hex color] -- (optional) if this is not the set the helper will take the color of the light.
</div>
<h2>Properties</h2>
<div>See the base [page:Object3D] class for common properties.</div>
<h3>[property:LineSegments cone]</h3>
<div>[page:LineSegments] used to visualize the light.</div>
<h3>[property:SpotLight light]</h3>
<div>Reference to the [page:SpotLight] being visualized.</div>
<h3>[property:object matrix]</h3>
<div>Reference to the spotLight's [page:Object3D.matrixWorld matrixWorld].</div>
<h3>[property:object matrixAutoUpdate]</h3>
<div>
See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
spotLight's [page:Object3D.matrixWorld matrixWorld].
</div>
<h3>[property:hex color]</h3>
<div>
The color parameter passed in the constructor. Default is *undefined*. If this is changed, the helper's color will update
the next time [page:.update update] is called.
</div>
<h2>Methods</h2>
<div>See the base [page:Object3D] class for common methods.</div>
<h3>[method:null dispose]()</h3>
<div>Disposes of the light helper.</div>
<h3>[method:null update]()</h3>
<div>Updates the light helper.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Object3D] &rarr;
<h1>[name]</h1>
<div class="desc">This displays a cone shaped helper object for a [page:SpotLight].</div>
<h2>Example</h2>
<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
<a target="THREE_Examples" href="../examples/#webgl_lights_spotlight">View in Examples</a><br />
<h2>Other Examples</h2>
<div>[example:webgl_lights_spotlights lights / spotlights ]</div>
<h2>Code Example</h2>
<code>
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 10 );
scene.add( spotLight );
var spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:SpotLight light], [page:Hex color] )</h3>
<div>
[page:SpotLight light] -- The [page:SpotLight] to be visualized. <br /><br/>
[page:Hex color] -- (optional) if this is not the set the helper will take the color of the light.
</div>
<h2>Properties</h2>
<div>See the base [page:Object3D] class for common properties.</div>
<h3>[property:LineSegments cone]</h3>
<div>[page:LineSegments] used to visualize the light.</div>
<h3>[property:SpotLight light]</h3>
<div>Reference to the [page:SpotLight] being visualized.</div>
<h3>[property:object matrix]</h3>
<div>Reference to the spotLight's [page:Object3D.matrixWorld matrixWorld].</div>
<h3>[property:object matrixAutoUpdate]</h3>
<div>
See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
spotLight's [page:Object3D.matrixWorld matrixWorld].
</div>
<h3>[property:hex color]</h3>
<div>
The color parameter passed in the constructor. Default is *undefined*. If this is changed, the helper's color will update
the next time [page:.update update] is called.
</div>
<h2>Methods</h2>
<div>See the base [page:Object3D] class for common methods.</div>
<h3>[method:null dispose]()</h3>
<div>Disposes of the light helper.</div>
<h3>[method:null update]()</h3>
<div>Updates the light helper.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/helpers/VertexNormalsHelper.html
浏览文件 @ 3bcb9c2d
<!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:Line] &rarr;
<h1>[name]</h1>
<div class="desc">
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].<br /><br />
Unlike [page:FaceNormalsHelper], this works with [page:BufferGeometry].
</div>
<h2>Example</h2>
[example:webgl_helpers WebGL / helpers]
<code>
var geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var box = new THREE.Mesh( geometry, material );
var helper = new THREE.VertexNormalsHelper( box, 2, 0x00ff00, 1 );
scene.add( box );
scene.add( helper );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Object3D object], [page:Number size], [page:Hex color], [page:Number linewidth] )</h3>
<div>
[page:Object3D object] -- object for which to render vertex normals.<br />
[page:Number size] -- (optional) length of the arrows. Default is 1.<br />
[page:Hex color] -- hex color of the arrows. Default is 0xff0000.<br />
[page:Number linewidth] -- (optional) width of the arrow lines. Default is 1.
</div>
<h2>Properties</h2>
<div>See the base [page:LineSegments] class for common properties.</div>
<h3>[property:object matrixAutoUpdate]</h3>
<div>
See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
objects's [page:Object3D.matrixWorld matrixWorld].
</div>
<h3>[property:Object3D object]</h3>
<div>The object for which the vertex normals are being visualized.</div>
<h3>[property:Number size]</h3>
<div>Length of the arrows. Default is *1*.</div>
<h2>Methods</h2>
<div>See the base [page:LineSegments] class for common methods.</div>
<h3>[method:null update]()</h3>
<div>Updates the vertex normal preview based on movement of the object.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Line] &rarr;
<h1>[name]</h1>
<div class="desc">
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].<br /><br />
Unlike [page:FaceNormalsHelper], this works with [page:BufferGeometry].
</div>
<h2>Example</h2>
[example:webgl_helpers WebGL / helpers]
<code>
var geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var box = new THREE.Mesh( geometry, material );
var helper = new THREE.VertexNormalsHelper( box, 2, 0x00ff00, 1 );
scene.add( box );
scene.add( helper );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Object3D object], [page:Number size], [page:Hex color], [page:Number linewidth] )</h3>
<div>
[page:Object3D object] -- object for which to render vertex normals.<br />
[page:Number size] -- (optional) length of the arrows. Default is 1.<br />
[page:Hex color] -- hex color of the arrows. Default is 0xff0000.<br />
[page:Number linewidth] -- (optional) width of the arrow lines. Default is 1.
</div>
<h2>Properties</h2>
<div>See the base [page:LineSegments] class for common properties.</div>
<h3>[property:object matrixAutoUpdate]</h3>
<div>
See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
objects's [page:Object3D.matrixWorld matrixWorld].
</div>
<h3>[property:Object3D object]</h3>
<div>The object for which the vertex normals are being visualized.</div>
<h3>[property:Number size]</h3>
<div>Length of the arrows. Default is *1*.</div>
<h2>Methods</h2>
<div>See the base [page:LineSegments] class for common methods.</div>
<h3>[method:null update]()</h3>
<div>Updates the vertex normal preview based on movement of the object.</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/lights/AmbientLight.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/lights/HemisphereLight.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/lights/Light.html
浏览文件 @ 3bcb9c2d
<!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:Object3D] &rarr;
<h1>[name]</h1>
<div class="desc">
Abstract base class for lights - all other light types inherit the properties and methods
described here.
</div>
<h2>Constructor</h2>
<h3>[name]( [page:Integer color], [page:float intensity] )</h3>
<div>
[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
Creates a new [name]. Note that this is not intended to be called directly (use one of derived classes instead).
</div>
<h2>Properties</h2>
<div>
See the base [page:Object3D Object3D] class for common properties.
</div>
<h3>[property:Color color]</h3>
<div>
Color of the light. Defaults to a new [page:Color] set to white, if not passed in the constructor.<br />
</div>
<h3>[property:Float intensity]</h3>
<div>
The light's intensity, or strength.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, the product of
[page:.color color] * intensity is interpreted as luminous intensity measured in candela.<br />
Default - *1.0*.
</div>
<h3>[property:Boolean isLight]</h3>
<div>
Used to check whether this or derived classes are lights. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h2>Methods</h2>
<div>
See the base [page:Object3D Object3D] class for common methods.
</div>
<h3>[method:Light copy]( [page:Light source] )</h3>
<div>
Copies the value of [page:.color color] and [page:.intensity intensity] from the
[page:Light source] light into this one.
</div>
<h3>[method:JSON toJSON]( [page:String meta] )</h3>
<div>
Return Light data in JSON format.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Object3D] &rarr;
<h1>[name]</h1>
<div class="desc">
Abstract base class for lights - all other light types inherit the properties and methods
described here.
</div>
<h2>Constructor</h2>
<h3>[name]( [page:Integer color], [page:float intensity] )</h3>
<div>
[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
Creates a new [name]. Note that this is not intended to be called directly (use one of derived classes instead).
</div>
<h2>Properties</h2>
<div>
See the base [page:Object3D Object3D] class for common properties.
</div>
<h3>[property:Color color]</h3>
<div>
Color of the light. Defaults to a new [page:Color] set to white, if not passed in the constructor.<br />
</div>
<h3>[property:Float intensity]</h3>
<div>
The light's intensity, or strength.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, the product of
[page:.color color] * intensity is interpreted as luminous intensity measured in candela.<br />
Default - *1.0*.
</div>
<h3>[property:Boolean isLight]</h3>
<div>
Used to check whether this or derived classes are lights. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h2>Methods</h2>
<div>
See the base [page:Object3D Object3D] class for common methods.
</div>
<h3>[method:Light copy]( [page:Light source] )</h3>
<div>
Copies the value of [page:.color color] and [page:.intensity intensity] from the
[page:Light source] light into this one.
</div>
<h3>[method:JSON toJSON]( [page:String meta] )</h3>
<div>
Return Light data in JSON format.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/lights/PointLight.html
浏览文件 @ 3bcb9c2d
<!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:Object3D] &rarr; [page:Light] &rarr;
<h1>[name]</h1>
<div class="desc">
A light that gets emitted from a single point in all directions. A common use case for this
is to replicate the light emitted from a bare lightbulb.<br /><br />
This light can cast shadows - see [page:LightShadow] page for details.
</div>
<h2>Example</h2>
<div>
[example:canvas_lights_pointlights lights / pointlights ]<br />
[example:webgl_lights_pointlights lights / pointlights ]<br />
[example:webgl_lights_pointlights2 lights / pointlights2 ]<br />
[example:webgldeferred_animation animation ]<br />
[example:webgl_effects_anaglyph effects / anaglyph ]<br />
[example:webgl_geometry_text geometry / text ]<br />
[example:webgl_lensflares lensflares ]
</div>
<code>
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Integer color], [page:Float intensity], [page:Number distance], [page:Float decay] )</h3>
<div>
[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
[page:Number distance] - The distance from the light where the intensity is 0.
When set to 0, then the light never stops. Default is 0.<br />
[page:Float decay] - The amount the light dims along the distance of the light. Default is 1.
For [page:WebGLRenderer.physicallyCorrectLights physically correct] lighting, set this to 2.<br /><br />
Creates a new [name].
</div>
<h2>Properties</h2>
<div>
See the base [page:Light Light] class for common properties.
</div>
<h3>[property:Float decay]</h3>
<div>
The amount the light dims along the distance of the light<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, decay = 2 leads to physically realistic light falloff.<br/>
Default is *1*.
</div>
<h3>[property:Float distance]</h3>
<div>
If non-zero, light will attenuate linearly from maximum intensity at the light's
position down to zero at this distance from the light. Default is *0.0*.
</div>
<h3>[property:Boolean isPointLight]</h3>
<div>
Used to check whether this or derived classes are point lights. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h3>[property:Float power]</h3>
<div>
The light's power.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, the luminous
power of the light measured in lumens. Default is *4Math.PI*. <br /><br />
This is directly related to the [page:.intensity intensity] in the ratio
<code>
power = intensity * 4&pi;
</code>
and changing this will also change the intensity.
</div>
<h3>[property:LightShadow shadow]</h3>
<div>
A [page:LightShadow] used to calculate shadows for this light.<br /><br />
The lightShadow's [page:LightShadow.camera camera]
is set to a [page:PerspectiveCamera] with [page:PerspectiveCamera.fov fov] of 90,
[page:PerspectiveCamera.aspect aspect] of 1, [page:PerspectiveCamera.near near]
clipping plane at 0.5 and [page:PerspectiveCamera.far far] clipping plane at 500.
</div>
<h2>Methods</h2>
<div>
See the base [page:Light Light] class for common methods.
</div>
<h3>[method:PointLight copy]( [page:PointLight source] )</h3>
<div>
Copies value of all the properties from the [page:PointLight source] to this
PointLight.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Object3D] &rarr; [page:Light] &rarr;
<h1>[name]</h1>
<div class="desc">
A light that gets emitted from a single point in all directions. A common use case for this
is to replicate the light emitted from a bare lightbulb.<br /><br />
This light can cast shadows - see [page:LightShadow] page for details.
</div>
<h2>Example</h2>
<div>
[example:canvas_lights_pointlights lights / pointlights ]<br />
[example:webgl_lights_pointlights lights / pointlights ]<br />
[example:webgl_lights_pointlights2 lights / pointlights2 ]<br />
[example:webgldeferred_animation animation ]<br />
[example:webgl_effects_anaglyph effects / anaglyph ]<br />
[example:webgl_geometry_text geometry / text ]<br />
[example:webgl_lensflares lensflares ]
</div>
<code>
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Integer color], [page:Float intensity], [page:Number distance], [page:Float decay] )</h3>
<div>
[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
[page:Number distance] - The distance from the light where the intensity is 0.
When set to 0, then the light never stops. Default is 0.<br />
[page:Float decay] - The amount the light dims along the distance of the light. Default is 1.
For [page:WebGLRenderer.physicallyCorrectLights physically correct] lighting, set this to 2.<br /><br />
Creates a new [name].
</div>
<h2>Properties</h2>
<div>
See the base [page:Light Light] class for common properties.
</div>
<h3>[property:Float decay]</h3>
<div>
The amount the light dims along the distance of the light<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, decay = 2 leads to physically realistic light falloff.<br/>
Default is *1*.
</div>
<h3>[property:Float distance]</h3>
<div>
If non-zero, light will attenuate linearly from maximum intensity at the light's
position down to zero at this distance from the light. Default is *0.0*.
</div>
<h3>[property:Boolean isPointLight]</h3>
<div>
Used to check whether this or derived classes are point lights. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h3>[property:Float power]</h3>
<div>
The light's power.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, the luminous
power of the light measured in lumens. Default is *4Math.PI*. <br /><br />
This is directly related to the [page:.intensity intensity] in the ratio
<code>
power = intensity * 4&pi;
</code>
and changing this will also change the intensity.
</div>
<h3>[property:LightShadow shadow]</h3>
<div>
A [page:LightShadow] used to calculate shadows for this light.<br /><br />
The lightShadow's [page:LightShadow.camera camera]
is set to a [page:PerspectiveCamera] with [page:PerspectiveCamera.fov fov] of 90,
[page:PerspectiveCamera.aspect aspect] of 1, [page:PerspectiveCamera.near near]
clipping plane at 0.5 and [page:PerspectiveCamera.far far] clipping plane at 500.
</div>
<h2>Methods</h2>
<div>
See the base [page:Light Light] class for common methods.
</div>
<h3>[method:PointLight copy]( [page:PointLight source] )</h3>
<div>
Copies value of all the properties from the [page:PointLight source] to this
PointLight.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/lights/SpotLight.html
浏览文件 @ 3bcb9c2d
<!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:Object3D] &rarr; [page:Light] &rarr;
<h1>[name]</h1>
<div class="desc">
This light gets emitted from a single point in one direction, along a cone that increases in size
the further from the light it gets. <br /><br />
This light can cast shadows - see the [page:SpotLightShadow] page for details.
</div>
<h2>Example</h2>
<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
<div>
[example:webgl_lights_spotlight View in Examples ]
</div>
<h2>Other Examples</h2>
<div>
[example:webgl_interactive_cubes_gpu interactive / cubes / gpu ]<br />
[example:webgl_interactive_draggablecubes interactive / draggablecubes ]<br />
[example:webgl_materials_bumpmap_skin materials / bumpmap / skin ]<br />
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]<br />
[example:webgl_loader_md2 loader / md2 ]<br />
[example:webgl_shading_physical shading / physical ]<br />
[example:webgl_materials_bumpmap materials / bumpmap]<br/>
[example:webgl_shading_physical shading / physical]<br/>
[example:webgl_shadowmap shadowmap]<br/>
[example:webgl_shadowmap_performance shadowmap / performance]<br/>
[example:webgl_shadowmap_viewer shadowmap / viewer]
</div>
<h2>Code Example</h2>
<code>
// white spotlight shining from the side, casting a shadow
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;
scene.add( spotLight );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Integer color], [page:Float intensity], [page:Float distance], [page:Radians angle], [page:Float penumbra], [page:Float decay] )</h3>
<div>
[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
[page:Float distance] - Maximum distance from origin where light will shine whose intensity
is attenuated linearly based on distance from origin. <br />
[page:Radians angle] - Maximum angle of light dispersion from its direction whose upper
bound is Math.PI/2.<br />
[page:Float penumbra] - Percent of the spotlight cone that is attenuated due to penumbra.
Takes values between zero and 1. Default is zero.<br />
[page:Float decay] - The amount the light dims along the distance of the light.<br /><br />
Creates a new [name].
</div>
<h2>Properties</h2>
See the base [page:Light Light] class for common properties.
<h3>[property:Float angle]</h3>
<div>
Maximum extent of the spotlight, in radians, from its direction. Should be no more than
*Math.PI/2*. The default is *Math.PI/3*.
</div>
<h3>[property:Boolean castShadow]</h3>
<div>
If set to *true* light will cast dynamic shadows. *Warning*: This is expensive and
requires tweaking to get shadows looking right. See the [page:SpotLightShadow] for details.
The default is *false*.
</div>
<h3>[property:Float decay]</h3>
<div>
The amount the light dims along the distance of the light.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, decay = 2 leads to
physically realistic light falloff. The default is *1*.
</div>
<h3>[property:Float distance]</h3>
<div>
If non-zero, light will attenuate linearly from maximum intensity at the light's
position down to zero at this distance from the light. Default is *0.0*.
</div>
<h3>[property:Boolean isSpotLight]</h3>
<div>
Used to check whether this or derived classes are spot lights. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h3>[property:Float penumbra]</h3>
<div>
Percent of the spotlight cone that is attenuated due to penumbra. Takes values between
zero and 1. The default is *0.0*.
</div>
<h3>[property:Vector3 position]</h3>
<div>
This is set equal to [page:Object3D.DefaultUp] (0, 1, 0), so that the light shines from the top down.
</div>
<h3>[property:Float power]</h3>
<div>
The light's power.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, the luminous
power of the light measured in lumens. Default is *4Math.PI*. <br /><br />
This is directly related to the [page:.intensity intensity] in the ratio
<code>
power = intensity * &pi;
</code>
and changing this will also change the intensity.
</div>
<h3>[property:SpotLightShadow shadow]</h3>
<div>
A [page:SpotLightShadow] used to calculate shadows for this light.
</div>
<h3>[property:Object3D target]</h3>
<div>
The Spotlight points from its [page:.position position] to target.position. The default
position of the target is *(0, 0, 0)*.<br />
*Note*: For the target's position to be changed to anything other than the default,
it must be added to the [page:Scene scene] using
<code>
scene.add( light.target );
</code>
This is so that the target's [page:Object3D.matrixWorld matrixWorld] gets automatically
updated each frame.<br /><br />
It is also possible to set the target to be another object in the scene (anything with a
[page:Object3D.position position] property), like so:
<code>
var targetObject = new THREE.Object3D();
scene.add(targetObject);
light.target = targetObject;
</code>
The spotlight will now track the target object.
</div>
<h2>Methods</h2>
See the base [page:Light Light] class for common methods.
<h3>[method:SpotLight copy]( [page:SpotLight source] )</h3>
<div>
Copies value of all the properties from the [page:SpotLight source] to this
SpotLight.
</div>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:Object3D] &rarr; [page:Light] &rarr;
<h1>[name]</h1>
<div class="desc">
This light gets emitted from a single point in one direction, along a cone that increases in size
the further from the light it gets. <br /><br />
This light can cast shadows - see the [page:SpotLightShadow] page for details.
</div>
<h2>Example</h2>
<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
<div>
[example:webgl_lights_spotlight View in Examples ]
</div>
<h2>Other Examples</h2>
<div>
[example:webgl_interactive_cubes_gpu interactive / cubes / gpu ]<br />
[example:webgl_interactive_draggablecubes interactive / draggablecubes ]<br />
[example:webgl_materials_bumpmap_skin materials / bumpmap / skin ]<br />
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]<br />
[example:webgl_loader_md2 loader / md2 ]<br />
[example:webgl_shading_physical shading / physical ]<br />
[example:webgl_materials_bumpmap materials / bumpmap]<br/>
[example:webgl_shading_physical shading / physical]<br/>
[example:webgl_shadowmap shadowmap]<br/>
[example:webgl_shadowmap_performance shadowmap / performance]<br/>
[example:webgl_shadowmap_viewer shadowmap / viewer]
</div>
<h2>Code Example</h2>
<code>
// white spotlight shining from the side, casting a shadow
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;
scene.add( spotLight );
</code>
<h2>Constructor</h2>
<h3>[name]( [page:Integer color], [page:Float intensity], [page:Float distance], [page:Radians angle], [page:Float penumbra], [page:Float decay] )</h3>
<div>
[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
[page:Float distance] - Maximum distance from origin where light will shine whose intensity
is attenuated linearly based on distance from origin. <br />
[page:Radians angle] - Maximum angle of light dispersion from its direction whose upper
bound is Math.PI/2.<br />
[page:Float penumbra] - Percent of the spotlight cone that is attenuated due to penumbra.
Takes values between zero and 1. Default is zero.<br />
[page:Float decay] - The amount the light dims along the distance of the light.<br /><br />
Creates a new [name].
</div>
<h2>Properties</h2>
See the base [page:Light Light] class for common properties.
<h3>[property:Float angle]</h3>
<div>
Maximum extent of the spotlight, in radians, from its direction. Should be no more than
*Math.PI/2*. The default is *Math.PI/3*.
</div>
<h3>[property:Boolean castShadow]</h3>
<div>
If set to *true* light will cast dynamic shadows. *Warning*: This is expensive and
requires tweaking to get shadows looking right. See the [page:SpotLightShadow] for details.
The default is *false*.
</div>
<h3>[property:Float decay]</h3>
<div>
The amount the light dims along the distance of the light.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, decay = 2 leads to
physically realistic light falloff. The default is *1*.
</div>
<h3>[property:Float distance]</h3>
<div>
If non-zero, light will attenuate linearly from maximum intensity at the light's
position down to zero at this distance from the light. Default is *0.0*.
</div>
<h3>[property:Boolean isSpotLight]</h3>
<div>
Used to check whether this or derived classes are spot lights. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h3>[property:Float penumbra]</h3>
<div>
Percent of the spotlight cone that is attenuated due to penumbra. Takes values between
zero and 1. The default is *0.0*.
</div>
<h3>[property:Vector3 position]</h3>
<div>
This is set equal to [page:Object3D.DefaultUp] (0, 1, 0), so that the light shines from the top down.
</div>
<h3>[property:Float power]</h3>
<div>
The light's power.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, the luminous
power of the light measured in lumens. Default is *4Math.PI*. <br /><br />
This is directly related to the [page:.intensity intensity] in the ratio
<code>
power = intensity * &pi;
</code>
and changing this will also change the intensity.
</div>
<h3>[property:SpotLightShadow shadow]</h3>
<div>
A [page:SpotLightShadow] used to calculate shadows for this light.
</div>
<h3>[property:Object3D target]</h3>
<div>
The Spotlight points from its [page:.position position] to target.position. The default
position of the target is *(0, 0, 0)*.<br />
*Note*: For the target's position to be changed to anything other than the default,
it must be added to the [page:Scene scene] using
<code>
scene.add( light.target );
</code>
This is so that the target's [page:Object3D.matrixWorld matrixWorld] gets automatically
updated each frame.<br /><br />
It is also possible to set the target to be another object in the scene (anything with a
[page:Object3D.position position] property), like so:
<code>
var targetObject = new THREE.Object3D();
scene.add(targetObject);
light.target = targetObject;
</code>
The spotlight will now track the target object.
</div>
<h2>Methods</h2>
See the base [page:Light Light] class for common methods.
<h3>[method:SpotLight copy]( [page:SpotLight source] )</h3>
<div>
Copies value of all the properties from the [page:SpotLight source] to this
SpotLight.
</div>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/loaders/JSONLoader.html
浏览文件 @ 3bcb9c2d
<!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>
<h1>[name]</h1>
<div class="desc">
A loader for loading objects in JSON format.
This uses the [page:FileLoader] internally for loading files.
</div>
<h2>Example</h2>
<div>
[example:webgl_loader_json_blender WebGL / loader / json / blender]<br />
[example:webgl_loader_json_objconverter WebGL / loader / json / objconverter]
</div>
<code>
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'models/animated/monster/monster.js',
// onLoad callback
function ( geometry, materials ) {
var material = materials[ 0 ];
var object = new THREE.Mesh( geometry, material );
scene.add( object );
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function( err ) {
console.log( 'An error happened' );
}
);
</code>
<h2>Constructor</h2>
<h3>[name]( [page:LoadingManager manager] )</h3>
<div>
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
</div>
<div>
Creates a new [name].
</div>
<h2>Properties</h2>
<h3>[property:LoadingManager manager]</h3>
<div>
The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
</div>
<h3>[property:String withCredentials]</h3>
<div>
Whether the XMLHttpRequest uses credentials.
Default is *false*.
</div>
<h2>Methods</h2>
<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div>
[page:String url] — the path or URL to the file. This can also be a
[link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI]..<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded text response.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
</div>
<div>
Begin loading from url and pass the <em>JSON</em> to onLoad.
</div>
<h3>[method:null setTexturePath]( [page:String texturePath] )</h3>
<div>
Set the base path or URL from which to load files. This can be useful if
you are loading many files from the same directory.
</div>
<h3>[method:Object3D parse]( [page:Object json], [page:String texturePath] )</h3>
<div>
[page:String json] — JSON object to parse.<br />
[page:String texturePath] — Base path for textures.<br /><br />
Parse a <em>JSON</em> structure and return an [page:object] containing the parsed [page:Geometry geometry] and [page:Array materials].
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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>
<h1>[name]</h1>
<div class="desc">
A loader for loading objects in JSON format.
This uses the [page:FileLoader] internally for loading files.
</div>
<h2>Example</h2>
<div>
[example:webgl_loader_json_blender WebGL / loader / json / blender]<br />
[example:webgl_loader_json_objconverter WebGL / loader / json / objconverter]
</div>
<code>
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'models/animated/monster/monster.js',
// onLoad callback
function ( geometry, materials ) {
var material = materials[ 0 ];
var object = new THREE.Mesh( geometry, material );
scene.add( object );
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function( err ) {
console.log( 'An error happened' );
}
);
</code>
<h2>Constructor</h2>
<h3>[name]( [page:LoadingManager manager] )</h3>
<div>
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
</div>
<div>
Creates a new [name].
</div>
<h2>Properties</h2>
<h3>[property:LoadingManager manager]</h3>
<div>
The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
</div>
<h3>[property:String withCredentials]</h3>
<div>
Whether the XMLHttpRequest uses credentials.
Default is *false*.
</div>
<h2>Methods</h2>
<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div>
[page:String url] — the path or URL to the file. This can also be a
[link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI]..<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded text response.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
</div>
<div>
Begin loading from url and pass the <em>JSON</em> to onLoad.
</div>
<h3>[method:null setTexturePath]( [page:String texturePath] )</h3>
<div>
Set the base path or URL from which to load files. This can be useful if
you are loading many files from the same directory.
</div>
<h3>[method:Object3D parse]( [page:Object json], [page:String texturePath] )</h3>
<div>
[page:String json] — JSON object to parse.<br />
[page:String texturePath] — Base path for textures.<br /><br />
Parse a <em>JSON</em> structure and return an [page:object] containing the parsed [page:Geometry geometry] and [page:Array materials].
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/loaders/Loader.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/loaders/LoaderUtils.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/loaders/ObjectLoader.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
docs/api/materials/RawShaderMaterial.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/materials/SpriteMaterial.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/objects/Skeleton.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
docs/api/renderers/WebGLRenderTargetCube.html
浏览文件 @ 3bcb9c2d
<!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:WebGLRenderTarget] &rarr;
<h1>[name]</h1>
<div class="desc">
Used by the [page:CubeCamera] as its [page:WebGLRenderTarget].
</div>
<h2>Examples</h2>
<div>See [page:CubeCamera] for examples.</div>
<h2>Constructor</h2>
<h3>[name]([page:Number width], [page:Number height], [page:Object options])</h3>
<div>
[page:Float width] - The width of the renderTarget. <br />
[page:Float height] - The height of the renderTarget. <br />
options - (optional) object that holds texture parameters for an auto-generated target
texture and depthBuffer/stencilBuffer booleans.
For an explanation of the texture parameters see [page:Texture Texture]. The following are
valid options:<br /><br />
[page:Constant wrapS] - default is [page:Textures ClampToEdgeWrapping]. <br />
[page:Constant wrapT] - default is [page:Textures ClampToEdgeWrapping]. <br />
[page:Constant magFilter] - default is [page:Textures .LinearFilter]. <br />
[page:Constant minFilter] - default is [page:Textures LinearFilter]. <br />
[page:Constant format] - default is [page:Textures RGBAFormat]. <br />
[page:Constant type] - default is [page:Textures UnsignedByteType]. <br />
[page:Number anisotropy] - default is *1*. See [page:Texture.anistropy]<br />
[page:Constant encoding] - default is [page:Textures LinearEncoding]. <br />
[page:Boolean depthBuffer] - default is *true*. Set this to false if you don't need it. <br />
[page:Boolean stencilBuffer] - default is *true*. Set this to false if you don't need it.<br /><br />
Creates a new [name]
</div>
<h2>Properties</h2>
<h3>[property:integer activeCubeFace]</h3>
<div>
The activeCubeFace property corresponds to a cube side (PX 0, NX 1, PY 2, NY 3, PZ 4, NZ 5) and is
used and set internally by the [page:CubeCamera].
</div>
<h3>See [page:WebGLRenderTarget] for inherited properties</h3>
<h2>Methods</h2>
<h3>See [page:WebGLRenderTarget] for inherited methods</h3>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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:WebGLRenderTarget] &rarr;
<h1>[name]</h1>
<div class="desc">
Used by the [page:CubeCamera] as its [page:WebGLRenderTarget].
</div>
<h2>Examples</h2>
<div>See [page:CubeCamera] for examples.</div>
<h2>Constructor</h2>
<h3>[name]([page:Number width], [page:Number height], [page:Object options])</h3>
<div>
[page:Float width] - The width of the renderTarget. <br />
[page:Float height] - The height of the renderTarget. <br />
options - (optional) object that holds texture parameters for an auto-generated target
texture and depthBuffer/stencilBuffer booleans.
For an explanation of the texture parameters see [page:Texture Texture]. The following are
valid options:<br /><br />
[page:Constant wrapS] - default is [page:Textures ClampToEdgeWrapping]. <br />
[page:Constant wrapT] - default is [page:Textures ClampToEdgeWrapping]. <br />
[page:Constant magFilter] - default is [page:Textures .LinearFilter]. <br />
[page:Constant minFilter] - default is [page:Textures LinearFilter]. <br />
[page:Constant format] - default is [page:Textures RGBAFormat]. <br />
[page:Constant type] - default is [page:Textures UnsignedByteType]. <br />
[page:Number anisotropy] - default is *1*. See [page:Texture.anistropy]<br />
[page:Constant encoding] - default is [page:Textures LinearEncoding]. <br />
[page:Boolean depthBuffer] - default is *true*. Set this to false if you don't need it. <br />
[page:Boolean stencilBuffer] - default is *true*. Set this to false if you don't need it.<br /><br />
Creates a new [name]
</div>
<h2>Properties</h2>
<h3>[property:integer activeCubeFace]</h3>
<div>
The activeCubeFace property corresponds to a cube side (PX 0, NX 1, PY 2, NY 3, PZ 4, NZ 5) and is
used and set internally by the [page:CubeCamera].
</div>
<h3>See [page:WebGLRenderTarget] for inherited properties</h3>
<h2>Methods</h2>
<h3>See [page:WebGLRenderTarget] for inherited methods</h3>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/renderers/shaders/ShaderChunk.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/renderers/shaders/ShaderLib.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/renderers/shaders/UniformsLib.html
浏览文件 @ 3bcb9c2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......
docs/api/scenes/Fog.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
docs/api/textures/DataTexture.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
docs/api/textures/Texture.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/models/fbx/nurbs.fbx
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/models/json/pressure.json
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/models/md2/ogro/Ogro.txt
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/models/vtk/bunny.vtk
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/obj/camaro/.htaccess
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/obj/cubes/cubes.mtl
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/obj/cubes/cubes.obj
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/obj/f50/.htaccess
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/obj/gallardo/.htaccess
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/obj/veyron/.htaccess
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webgl_camera.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webgl_hdr.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webgl_loader_x.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webgl_morphnormals.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webgl_raycast_texture.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webgl_shaders_sky.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webgl_test_memory.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webgl_test_memory2.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webvr_vive.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webvr_vive_dragging.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webvr_vive_paint.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
examples/webvr_vive_sculpt.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
test/unit/UnitTests.html
浏览文件 @ 3bcb9c2d
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或