Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved documentation for Materials / Material #9994

Merged
merged 1 commit into from
Nov 2, 2016
Merged

Improved documentation for Materials / Material #9994

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
189 changes: 132 additions & 57 deletions docs/api/materials/Material.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@
<body>
<h1>[name]</h1>

<div class="desc">Materials describe the appearance of [page:Object objects]. They are defined in a (mostly) renderer-independent way, so you don't have to rewrite materials if you decide to use a different renderer.</div>

<div class="desc">
<p>
Materials describe the appearance of [page:Object objects].
They are defined in a (mostly) renderer-independent way, so you don't have to rewrite materials if you decide to use a different renderer.
</p>
<P>
With the exception of [page:MultiMaterial MultiMaterial], the following properties and methods are inherited by all other material types (although they may have different defaults).
</P>
</div>

<h2>Constructor</h2>

Expand All @@ -34,55 +41,96 @@ <h3>[property:String name]</h3>
Material name. Default is an empty string.
</div>

<h3>[property:String type]</h3>
<div>
Value is the string 'Material'. This shouldn't be changed, and can be used to find all objects of this type in a scene.
</div>

<h3>[property:Boolean fog]</h3>
<div>
Whether the material is affected by fog. Default is *true*.
</div>

<h3>[property:Boolean lights]</h3>
<div>
Whether the material is affected by lights. Default is *true*.
</div>

<h3>[property:Integer side]</h3>
<div>
Defines which side of faces will be rendered - front, back or both.
Default is [page:Materials THREE.FrontSide].
Other options are [page:Materials THREE.BackSide] and [page:Materials THREE.DoubleSide].
</div>

<h3>[property:Integer shading]</h3>
<div>
Defines how the material is shaded.
This can be either [page:Materials THREE.SmoothShading] (default) or [page:Materials THREE.FlatShading].
</div>

<h3>[property:Integer vertexColors]</h3>
<div>
Defines whether vertex coloring is used.
Default is [page:Materials THREE.NoColors].
Other options are [page:Materials THREE.VertexColors] and [page:Materials THREE.FaceColors].
</div>

<h3>[property:Float opacity]</h3>
<div>
Float in the range of 0.0 - 1.0 indicating how transparent the material is.
A value of 0.0 indicates fully transparent, 1.0 is fully opaque. If
*transparent* is not set to true for the material, the material will remain
fully opaque and this value will only affect its color.
Float in the range of *0.0* - *1.0* indicating how transparent the material is.
A value of *0.0* indicates fully transparent, *1.0* is fully opaque.<br />
If the material's [property:Boolean transparent] property is not set to *true*, the material will remain
fully opaque and this value will only affect its color. <br />
Default is *1.0*.
</div>
<div>Default is *1.0*.</div>

<h3>[property:Boolean transparent]</h3>
<div>
Defines whether this material is transparent. This has an effect on rendering
as transparent objects need special treatment and are rendered after
non-transparent objects. For a working example of this behaviour, check the
[page:WebGLRenderer WebGLRenderer] code.<br />
as transparent objects need special treatment and are rendered after
non-transparent objects. <br />
When set to true, the extent to which the material is transparent is
controlled by setting *opacity*.
controlled by setting it's [property:Float opacity] property. <br />
Default is *false*.
</div>
<div>Default is *false*.</div>

<h3>[property:Blending blending]</h3>
<div>
Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending]. See the blending mode [page:Materials constants] for all possible values.

Which blending to use when displaying objects with this material. <br />
This must be set to [page:Materials CustomBlending] to use custom [property:Constant blendSrc], [property:Constant blendDst] or [property:Constant blendEquation].<br />
See the blending mode [page:Materials constants] for all possible values. Default is [page:Materials NormalBlending].
</div>

<h3>[property:Integer blendSrc]</h3>
<div>
Blending source. It's one of the blending mode constants defined in Three.js. Default is [page:CustomBlendingEquation SrcAlphaFactor]. See the destination factors [page:CustomBlendingEquation constants] for all possible values.
Blending source. Default is [page:CustomBlendingEquation SrcAlphaFactor].
See the source factors [page:CustomBlendingEquation constants] for all possible values.<br />
The material's [property:Constant blending] must be set to [page:Materials CustomBlending] for this to have any effect.
</div>

<h3>[property:Integer blendDst]</h3>
<div>
Blending destination. It's one of the blending mode constants defined in [page:Three Three.js]. Default is [page:CustomBlendingEquation OneMinusSrcAlphaFactor].
Blending destination. Default is [page:CustomBlendingEquation OneMinusSrcAlphaFactor].
See the destination factors [page:CustomBlendingEquation constants] for all possible values.<br />
The material's [property:Constant blending] must be set to [page:Materials CustomBlending] for this to have any effect.
</div>

<h3>[property:Integer blendEquation]</h3>
<div>
Blending equation to use when applying blending. It's one of the constants defined in [page:Three Three.js]. Default is [page:CustomBlendingEquation AddEquation.]
Blending equation to use when applying blending. Default is [page:CustomBlendingEquation AddEquation].
See the blending equation [page:CustomBlendingEquation constants] for all possible values.<br />
The material's [property:Constant blending] must be set to [page:Materials CustomBlending] for this to have any effect.
</div>

<h3>[property:Boolean depthTest]</h3>
<h3>[property:Integer depthFunc]</h3>
<div>
Whether to have depth test enabled when rendering this material. Default is *true*.
Which depth function to use. Default is [page:Materials LessEqualDepth]. See the depth mode [page:Materials constants] for all possible values.
</div>

<h3>[property:Integer depthFunc]</h3>
<h3>[property:Boolean depthTest]</h3>
<div>
What depth function to use. Default is [page:Materials THREE.LessEqualDepth].
Whether to have depth test enabled when rendering this material. Default is *true*.
</div>

<h3>[property:Boolean depthWrite]</h3>
Expand All @@ -93,91 +141,118 @@ <h3>[property:Boolean depthWrite]</h3>
When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
</div>

<h3>[property:Boolean polygonOffset]</h3>
<h3>[property:Array clippingPlanes]</h3>
<div>
Whether to use polygon offset. Default is *false*. This corresponds to the *POLYGON_OFFSET_FILL* WebGL feature.
User-defined clipping planes specified as THREE.Plane objects in world space.
These planes apply to the objects this material is attached to.
Points in space whose dot product with the plane is negative are cut away.
See the [example:webgl_clipping_intersection WebGL / clipping /intersection] example.
Default is *null*.
</div>

<h3>[property:Integer polygonOffsetFactor]</h3>
<h3>[property:Boolean clipIntersection]</h3>
<div>
Sets the polygon offset factor. Default is *0*.
Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union.
Default is *false*.
</div>

<h3>[property:Integer polygonOffsetUnits]</h3>
<h3>[property:Boolean clipShadows]</h3>
<div>
Sets the polygon offset units. Default is *0*.
Defines whether to clip shadows according to the clipping planes specified on this material. Default is *false*.
</div>

<h3>[property:Number alphaTest]</h3>
<h3>[property:Boolean colorWrite]</h3>
<div>
Sets the alpha value to be used when running an alpha test. Default is *0*.
Whether to render the material's color.
This can be used in conjunction with a mesh's [property:Integer renderOrder] property to create invisible objects that occlude other objects. Default is *true*.
</div>

<h3>[property:Array clippingPlanes]</h3>

<h3>[property:String precision]</h3>
<div>
User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply to the objects this material is attached to. Points in space whose dot product with the plane is negative are cut away. Default is null.
Override the renderer's default precision for this material. Can be "*highp*", "*mediump*" or "*lowp*".
Defaults for the WebGLRenderer is "*highp*" if supported by the device.
</div>

<h3>[property:Boolean clipIntersection]</h3>

<div>Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union. Default is false. See <a href="http://threejs.org/examples/#webgl_clipping_intersection">example</a> </div>
<h3>[property:Boolean polygonOffset]</h3>
<div>
Whether to use polygon offset. Default is *false*. This corresponds to the *GL_POLYGON_OFFSET_FILL* WebGL feature.
</div>

<h3>[property:Boolean clipShadows]</h3>
<h3>[property:Integer polygonOffsetFactor]</h3>
<div>
Defines whether to clip shadows according to the clipping planes specified on this material. Default is false.
Sets the polygon offset factor. Default is *0*.
</div>

<h3>[property:Float overdraw]</h3>
<h3>[property:Integer polygonOffsetUnits]</h3>
<div>
Amount of triangle expansion at draw time. This is a workaround for cases when gaps appear between triangles when using [page:CanvasRenderer]. *0.5* tends to give good results across browsers. Default is *0*.
Sets the polygon offset units. Default is *0*.
</div>

<h3>[property:Boolean visible]</h3>
<h3>[property:Float alphaTest]</h3>
<div>
Defines whether this material is visible. Default is *true*.
Sets the alpha value to be used when running an alpha test.
The material will not be renderered if the opacity is lower than this value.
Default is *0*.
</div>

<h3>[property:Enum side]</h3>
<h3>[property:Boolean premultipliedAlpha]</h3>
<div>
Defines which of the face sides will be rendered - front, back or both.
Whether to premultiply the alpha (transparency) value.
See [Example:webgl_materials_transparency WebGL / Materials / Transparency] for an example of the difference.
Default is *false*.
</div>

<h3>[property:Float overdraw]</h3>
<div>
Default is [page:Materials THREE.FrontSide]. Other options are [page:Materials THREE.BackSide] and [page:Materials THREE.DoubleSide].
Amount of triangle expansion at draw time.
This is a workaround for cases when gaps appear between triangles when using [page:CanvasRenderer].
*0.5* tends to give good results across browsers. Default is *0*.
</div>

<h3>[property:Boolean needsUpdate]</h3>
<h3>[property:Boolean visible]</h3>
<div>
Specifies that the material needs to be updated at the WebGL level. Set it to true if you made changes that need to be reflected in WebGL.
Defines whether this material is visible. Default is *true*.
</div>

<h3>[property:Boolean needsUpdate]</h3>
<div>
Specifies that the material needs to be updated at the WebGL level.
Set it to true if you made changes that need to be reflected in WebGL.<br />
This property is automatically set to *true* when instancing a new material.
</div>


<h2>Methods</h2>

<h3>[page:EventDispatcher EventDispatcher] methods are available on this class.</h3>
<h3>[method:Material clone]( [page:material material] )</h3>

<h3>[method:null setValues]( [page:object values] )</h3>
<div>
material -- this material gets the cloned information (optional).
values -- a container with parameters.<br />
Sets the properties based on the *values*.
</div>

<h3>[method:null toJSON]( [page:object meta] )</h3>
<div>
This clones the material in the optional parameter and returns it.
meta -- object containing metadata such as textures or images for the material.<br />
Convert the material to Three JSON format.
</div>

<h3>[method:null dispose]()</h3>
<h3>[method:Material clone]( [page:material material] )</h3>
<div>
This disposes the material. Textures of a material don't get disposed. These needs to be disposed by [page:Texture Texture].
material -- this material gets the cloned information (optional).<br />
This clones the material in the optional parameter and returns it.
</div>

<h3>[method:null setValues]( [page:object values] )</h3>
<h3>[method:null update]()</h3>
<div>
values -- a container with parameters.
Call [method:null dispatchEvent]( { type: '[page:object update]' }) on the material.
</div>

<h3>[method:null dispose]()</h3>
<div>
Sets the properties based on the *values*.
This disposes the material. Textures of a material don't get disposed.
These needs to be disposed by [page:Texture Texture].
</div>

<h2>Source</h2>
Expand Down