- <div class="desc">Class for loading an animation in JSON format.</div>
+ <div class="desc">
+ Class for loading an animation in JSON format.
+ This uses the [page:FileLoader] internally for loading files.
+ </div>
<h2>Example</h2>
@@ -41,23 +44,38 @@
<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].
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+
+ Creates a new [name].
</div>
+
+ <h2>Properties</h2>
+
+ <h3>[property:LoadingManager manager]</h3>
<div>
- Creates a new [name].
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
- [page:Function onLoad] — Will be called when load completes. The argument will be the loaded [page:Texture texture].<br />
+ [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 [page:Animation animation].<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
- [page:Function onError] — Will be called when load errors.<br />
+ [page:Function onError] — Will be called if load errors.<br /><br />
+
+ Begin loading from url and pass the loaded animation to onLoad.
[page:String context] — The [page:String AudioContext] for the loader to use. Default is [page:String window.AudioContext].<br />
- [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+
+ Creates a new [name].
</div>
+
+ <h2>Properties</h2>
+
+ <h3>[property:LoadingManager manager]</h3>
<div>
- Creates a new [name].
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
+ [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, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
+ [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 texture.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
+ [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].d<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded [page:BufferGeometry].<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
+ [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 texture.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
@@ -54,9 +60,10 @@
Begin loading from url and pass the loaded texture to onLoad.
- [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
- </div>
- <div>
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+
Creates a new [name].
</div>
@@ -52,16 +54,27 @@ scene.background = new THREE.CubeTextureLoader()
<h3>[property:String crossOrigin]</h3>
<div>
- default — *null*.<br />
- If set, assigns the *crossOrigin* attribute of the image to the value of *crossOrigin*, prior to starting the load.
+ If set, assigns the [link:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes crossOrigin]
+ attribute of the image to the value of *crossOrigin*,
+ prior to starting the load. Default is *undefined*.
</div>
+ <h3>[property:LoadingManager manager]</h3>
+ <div>
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
+ </div>
+
+ <h3>[property:String path]</h3>
+ <div>The base path from which files will be loaded. See [page:.setPath]. Default is *undefined*.</div>
+ [page:String urls] — array of 6 urls to images, one for each side of the CubeTexture. These can also be
+ [link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URIs].<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded [page:Texture texture].<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
@@ -71,13 +84,12 @@ scene.background = new THREE.CubeTextureLoader()
- [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
- </div>
- <div>
- Creates a new [name].
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use.
+ Default is [page:DefaultLoadingManager].
</div>
@@ -28,36 +60,85 @@
<h3>[property:Cache cache]</h3>
<div>
- A [page:Cache cache] instance that hold the response from each request made through this loader, so each file is requested once.
+ A reference to [page:Cache Cache] that hold the response from each request made
+ through this loader, so each file is requested once.<br /><br />
+
+ <em>Note:</em>The cache must be enabled using
+ <code>THREE.Cache.enabled = true.</code>
+ This is a global property and only needs to be set once to be used by all loaders that use FileLoader internally.
+ </div>
+
+ <h3>[property:LoadingManager manager]</h3>
+ <div>
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
</div>
+ <h3>[property:String mimeType]</h3>
+ <div>
+ The expected [link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types mimeType].
+ See [page:.setMimeType]. Default is *undefined*.
+ </div>
+
+ <h3>[property:String path]</h3>
+ <div>The base path from which files will be loaded. See [page:.setPath]. Default is *undefined*.</div>
+
<h3>[property:String responseType]</h3>
+ <div>The expected response type. See [page:.setResponseType]. Default is *undefined*.</div>
+
+ <h3>[property:String withCredentials]</h3>
<div>
- Can be set to change the response type.
+ Whether the XMLHttpRequest uses credentials - see [page:.setWithCredentials].
- [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, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
- [page:Function onError] — Will be called when load errors.<br />
+ [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 loading completes. The argument will be the loaded response.<br />
+ [page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance,
+ that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
+ [page:Function onError] — Will be called if an error occurs.<br /><br />
+
+ Load the URL and pass the response to the onLoad function.
+ Change the response type. Valid values are:<br />
+ [page:String text], empty string (default), or any other value. Any file type, returns the unprocessed file data.<br />
+ [page:String arraybuffer] - loads the data into a [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer ArrayBuffer] and returns that.<br />
+ [page:String blob] - returns the data as a [link:https://developer.mozilla.org/en/docs/Web/API/Blob Blob].<br />
+ [page:String document] - parse the file using the [link:https://developer.mozilla.org/en-US/docs/Web/API/DOMParser DOMParser].<br />
+ [page:String json] - parse the file using [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse JSON.parse].<br />
Class for loading a font in JSON format. Returns a [page:Font Font], which is an
- array of [page:Shape Shape]s representing the font.<br /><br />
+ array of [page:Shape Shape]s representing the font.
+ This uses the [page:FileLoader] internally for loading files. <br /><br />
You can convert fonts online using [link:https://gero3.github.io/facetype.js/ facetype.js]
</div>
@@ -50,23 +51,35 @@
<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].
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+ Creates a new [name].
</div>
+
+ <h2>Properties</h2>
+
+ <h3>[property:LoadingManager manager]</h3>
<div>
- Creates a new [name].
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
+ [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 [page:Texture texture].<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
- [page:Function onError] — Will be called when load errors.<br />
+ [page:Function onError] — Will be called when load errors.<br /><br />
+
+ Begin loading from url and pass the loaded [page:Texture texture] to onLoad.
- [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
- </div>
- <div>
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+
Creates a new [name].
</div>
@@ -58,14 +66,30 @@
<h3>[property:String crossOrigin]</h3>
<div>
- The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
+ If set, assigns the [link:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes crossOrigin]
+ attribute of the image to the value of *crossOrigin*, prior to starting the load. Default is *undefined*.
+ </div>
+
+ <h3>[property:LoadingManager manager]</h3>
+ <div>
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
+ </div>
+
+ <h3>[property:String path]</h3>
+ <div>The base path from which files will be loaded. See [page:.setPath]. Default is *undefined*.</div>
+
+ <h3>[property:String withCredentials]</h3>
+ <div>
+ Whether the XMLHttpRequest uses credentials - see [page:.setWithCredentials].
+ [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, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
- <div class="desc">A loader for loading a [page:Material] in JSON format.</div>
+ <div class="desc">
+ A loader for loading a [page:Material] in JSON format.
+ This uses the [page:FileLoader] internally for loading files.
+ </div>
<h2>Example</h2>
@@ -43,34 +46,48 @@
<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].
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+ Creates a new [name].
</div>
+
+ <h2>Properties</h2>
+
+ <h3>[property:LoadingManager manager]</h3>
<div>
- Creates a new [name].
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
</div>
+ <h3>[property:Object textures]</h3>
+ <div>Object holding any textures used by the material. See [page.setTextures].</div>
- <div class="desc">A loader for loading a JSON resource. Unlike the [page:JSONLoader], this one make use of the <em>.type</em> attributes of objects to map them to their original classes.</div>
+ <div class="desc">
+ A loader for loading a JSON resource. Unlike the [page:JSONLoader], this one make use of the
+ <em>.type</em> attributes of objects to map them to their original classes.<br /><br />
+
+ Note that this loader can't load [page:Geometries]. Use [page:JSONLoader] instead for that.<br /><br />
+
+ This uses the [page:FileLoader] internally for loading files.
+// Alternatively, to parse a previously loaded JSON structure
+var object = loader.parse( a_json_object );
+
+scene.add( object );
+ </code>
@@ -32,21 +66,38 @@
<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>
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+
Creates a new [name].
</div>
<h2>Properties</h2>
+ <h3>[property:String crossOrigin]</h3>
+ <div>
+ If set, assigns the [link:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes crossOrigin]
+ attribute of the image to the value of *crossOrigin*,
+ prior to starting the load. Default is *undefined*.
+ </div>
+
+ <h3>[property:LoadingManager manager]</h3>
+ <div>
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
+ </div>
+
+ <h3>[property:String texturePath]</h3>
+ <div>
+ The base path or URL from which textures will be loaded. See [page:.setTexturePath].
+ [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 [page:Object3D object].<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
- <div class="desc">Class for loading a [page:Texture texture].</div>
+ <div class="desc">
+ Class for loading a [page:Texture texture].
+ This uses the [page:ImageLoader] internally for loading files.
+ </div>
<h2>Example</h2>
@@ -46,9 +49,8 @@
<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>
+ [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+
Creates a new [name].
</div>
@@ -57,24 +59,55 @@
<h3>[property:String crossOrigin]</h3>
<div>
- default — *null*.<br />
- If set, assigns the *crossOrigin* attribute of the image to the value of *crossOrigin*, prior to starting the load.
+ If set, assigns the [link:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes crossOrigin]
+ attribute of the image to the value of *crossOrigin*, prior to starting the load. Default is *undefined*.
+ </div>
+
+
+ <h3>[property:LoadingManager manager]</h3>
+ <div>
+ The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
</div>
+ <h3>[property:String path]</h3>
+ <div>The base path from which files will be loaded. See [page:.setPath]. Default is *undefined*.</div>
+
+
+ <h3>[property:String withCredentials]</h3>
+ <div>
+ Whether the XMLHttpRequest uses credentials - see [page:.setWithCredentials].
+ [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 [page:Texture texture].<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
- [page:Function onError] — Will be called when load errors.<br />
+ [page:Function onError] — Will be called when load errors.<br /><br />
+
+ Begin loading from url and pass the loaded [page:Texture texture] to onLoad.
- <div>parameters is an object with one or more properties defining the material's appearance.</div>
<div>
- color — Line color in hexadecimal. Default is 0xffffff.<br />
- linewidth — Line thickness. Default is 1.<br />
- linecap — Define appearance of line ends. Default is 'round'.<br />
- linejoin — Define appearance of line joints. Default is 'round'.<br />
- vertexColors — Define how the vertices gets colored. Default is THREE.NoColors.<br />
- fog — Define whether the material color is affected by global fog settings. Default is false.
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
+ Any property of the material (including any property inherited from [page:Material]) can be passed in here.<br /><br />
+
+ The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
+ string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
</div>
<h2>Properties</h2>
<div>See the base [page:Material] class for common properties.</div>
- <h3>[property:Integer color]</h3>
- <div>Sets the color of the line. Default is 0xffffff.</div>
+ <h3>[property:Color color]</h3>
+ <div>[page:Color] of the material, by default set to white (0xffffff).</div>
+
+ <h3>[property:Boolean isLineBasicMaterial]</h3>
+ <div>
+ Used to check whether this or derived classes are line basic materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
+ </div>
+
+ <h3>[property:Boolean lights]</h3>
+ <div>Whether the material is affected by lights. Default is *false*.</div>
<h3>[property:Float linewidth]</h3>
- <div>Controls line thickness. Default is 1.</div>
- <div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, with the [page:WebGLRenderer WebGL] renderer on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+ <div>
+ Controls line thickness. Default is *1*.<br /><br />
+
+ Due to limitations in the [link:https://code.google.com/p/angleproject ANGLE layer],
+ with the [page:WebGLRenderer WebGL] renderer on Windows platforms linewidth will
+ always be 1 regardless of the set value.
+ </div>
<h3>[property:String linecap]</h3>
- <div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ <div>
+ Define appearance of line ends. Possible values are 'butt', 'round' and 'square'.
+ Default is 'round'.<br /><br />
+
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2D Canvas lineCap]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
<h3>[property:String linejoin]</h3>
- <div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ <div>
+ Define appearance of line joints. Possible values are 'round', 'bevel' and 'miter'. Default is 'round'. <br /><br />
- <h3>[property:Integer vertexColors]</h3>
- <div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
- <div>This setting might not have any effect when used with certain renderers.</div>
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineJoin 2D Canvas lineJoin]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
- <h3>[property:Boolean fog]</h3>
- <div>Define whether the material color is affected by global fog settings.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h2>Methods</h2>
+ <div>See the base [page:Material] class for common methods.</div>
- <div>parameters is an object with one or more properties defining the material's appearance.</div>
- <div>
- color — Line color in hexadecimal. Default is 0xffffff.<br />
- linewidth — Line thickness. Default is 1.<br />
- scale — The scale of the dashed part of a line. Default is 1.<br />
- dashSize — The size of the dash. Default is 3.<br />
- gapSize - The size of the gap. Default is 1.<br />
- vertexColors — Define how the vertices gets colored. Default is THREE.NoColors.<br />
- fog — Define whether the material color is affected by global fog settings. Default is false.
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
+ Any property of the material (including any property inherited from [page:Material]) can be passed in here.<br /><br />
+
+ The exception is the property [page:Hexadecimal color], which can be passed i as a hexadecimal
+ string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
</div>
@@ -35,38 +47,38 @@
<div>See the base [page:Material] class for common properties.</div>
<h3>[property:Color color]</h3>
- <div>
- Sets the color of the line. Default is 0xffffff.
- </div>
+ <div>[page:Color] of the material, by default set to white (0xffffff).</div>
- <h3>[property:number linewidth]</h3>
- <div>Controls line thickness. Default is 1.</div>
- <div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+ <h3>[property:number dashSize]</h3>
+ <div>The size of the dash. This is both the gap with the stroke. Default is *3*.</div>
- The size of the dash. This is both the gap with the stroke. Default is 3.
+ Used to check whether this or derived classes are line dashed materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
</div>
- <h3>[property:number gapSize]</h3>
+ <h3>[property:Boolean lights]</h3>
+ <div>Whether the material is affected by lights. Default is *false*.</div>
+
+ <h3>[property:Float linewidth]</h3>
<div>
- The size of the gap. Default is 1.
- </div>
+ Controls line thickness. Default is *1*.<br /><br />
- <h3>[property:boolean vertexColors]</h3>
- <div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
- <div>This setting might not have any effect when used with certain renderers.</div>
+ Due to limitations in the [link:https://code.google.com/p/angleproject ANGLE layer],
+ with the [page:WebGLRenderer WebGL] renderer on Windows platforms linewidth will
+ always be 1 regardless of the set value.
+ </div>
- <h3>[property:boolean fog]</h3>
- <div>Define whether the material color is affected by global fog settings.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h3>[property:number scale]</h3>
+ <div>The scale of the dashed part of a line. Default is *1*.</div>
<h2>Methods</h2>
+ <div>See the base [page:Material] class for common methods.</div>
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>
+ 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.<br /><br />
+
+ 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).
</div>
<h2>Constructor</h2>
<h3>[name]()</h3>
- <div>
- This creates a generic material.
- </div>
+ <div>This creates a generic material.</div>
<h2>Properties</h2>
- <h3>[property:Integer id]</h3>
- <div>
- Unique number for this material instance.
- </div>
-
- <h3>[property:String name]</h3>
- <div>
- 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>
+ <h3>[property:Float alphaTest]</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].
+ 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:Integer shading]</h3>
+ <h3>[property:Integer blendDst]</h3>
<div>
- Defines how the material is shaded.
- This can be either [page:Materials THREE.SmoothShading] (default) or [page:Materials THREE.FlatShading].
+ 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 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:Integer blendDstAlpha]</h3>
+ <div>The tranparency of the [page:.blendDst]. Default is *null*.</div>
- <h3>[property:Float opacity]</h3>
+ <h3>[property:Integer blendEquation]</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.<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*.
+ 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 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. <br />
- When set to true, the extent to which the material is transparent is
- controlled by setting it's [property:Float opacity] property. <br />
- Default is *false*.
- </div>
+ <h3>[property:Integer blendEquationAlpha]</h3>
+ <div>The tranparency of the [page:.blendEquation]. Default is *null*.</div>
<h3>[property:Blending blending]</h3>
<div>
@@ -109,18 +71,33 @@
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>
+ <h3>[property:Integer blendSrcAlpha]</h3>
+ <div>The tranparency of the [page:.blendSrc]. Default is *null*.</div>
+
+ <h3>[property:Boolean clipIntersection]</h3>
<div>
- 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.
+ Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union.
+ Default is *false*.
</div>
- <h3>[property:Integer blendEquation]</h3>
+ <h3>[property:Array clippingPlanes]</h3>
<div>
- 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.
+ 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:Boolean clipShadows]</h3>
+ <div>
+ Defines whether to clip shadows according to the clipping planes specified on this material. Default is *false*.
+ </div>
+
+ <h3>[property:Boolean colorWrite]</h3>
+ <div>
+ 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:Integer depthFunc]</h3>
@@ -135,90 +112,122 @@
<h3>[property:Boolean depthWrite]</h3>
<div>
- Whether rendering this material has any effect on the depth buffer. Default is *true*.
+ Whether rendering this material has any effect on the depth buffer. Default is *true*.<br /><br />
+
+ 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 fog]</h3>
+ <div>Whether the material is affected by fog. Default is *true*.</div>
+
+ <h3>[property:Integer id]</h3>
+ <div>Unique number for this material instance.</div>
+
+ <h3>[property:Boolean isMaterial]</h3>
<div>
- 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.
+ Used to check whether this or derived classes are materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
</div>
- <h3>[property:Array clippingPlanes]</h3>
+ <h3>[property:Boolean lights]</h3>
+ <div>Whether the material is affected by lights. Default is *true*.</div>
+
+ <h3>[property:String name]</h3>
+ <div>Optional name of the object (doesn't need to be unique). Default is an empty string.</div>
+
+ <h3>[property:Boolean needsUpdate]</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.
- See the [example:webgl_clipping_intersection WebGL / clipping /intersection] example.
- Default is *null*.
+ 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>
- <h3>[property:Boolean clipIntersection]</h3>
+ <h3>[property:Float opacity]</h3>
<div>
- Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union.
- Default is *false*.
+ 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>
- <h3>[property:Boolean clipShadows]</h3>
+ <h3>[property:Float overdraw]</h3>
<div>
- Defines whether to clip shadows according to the clipping planes specified on this material. Default is *false*.
+ 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 colorWrite]</h3>
+ <h3>[property:Boolean polygonOffset]</h3>
<div>
- 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*.
+ Whether to use polygon offset. Default is *false*. This corresponds to the *GL_POLYGON_OFFSET_FILL* WebGL feature.
</div>
+ <h3>[property:Integer polygonOffsetFactor]</h3>
+ <div>Sets the polygon offset factor. Default is *0*.</div>
+
+ <h3>[property:Integer polygonOffsetUnits]</h3>
+ <div>Sets the polygon offset units. Default is *0*.</div>
+
<h3>[property:String precision]</h3>
<div>
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.
+ Defaults is *null*.
</div>
- <h3>[property:Boolean polygonOffset]</h3>
+ <h3>[property:Boolean premultipliedAlpha]</h3>
<div>
- Whether to use polygon offset. Default is *false*. This corresponds to the *GL_POLYGON_OFFSET_FILL* WebGL feature.
+ 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:Integer polygonOffsetFactor]</h3>
+ <h3>[property:Integer shading]</h3>
<div>
- Sets the polygon offset factor. Default is *0*.
+ Defines how the material is shaded.
+ This can be either [page:Materials THREE.SmoothShading] (default) or [page:Materials THREE.FlatShading].
</div>
- <h3>[property:Integer polygonOffsetUnits]</h3>
+ <h3>[property:Integer side]</h3>
<div>
- Sets the polygon offset units. Default is *0*.
+ 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:Float alphaTest]</h3>
+ <h3>[property:Boolean transparent]</h3>
<div>
- 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*.
+ 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. <br />
+ When set to true, the extent to which the material is transparent is
+ controlled by setting it's [property:Float opacity] property. <br />
+ Default is *false*.
</div>
- <h3>[property:Boolean premultipliedAlpha]</h3>
+ <h3>[property:String type]</h3>
<div>
- Whether to premultiply the alpha (transparency) value.
- See [Example:webgl_materials_transparency WebGL / Materials / Transparency] for an example of the difference.
- Default is *false*.
+ 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:Float overdraw]</h3>
+ <h3>[property:String uuid]</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*.
+ [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this material instance.
+ This gets automatically assigned, so this shouldn't be edited.
</div>
- <h3>[property:Boolean visible]</h3>
+ <h3>[property:Integer vertexColors]</h3>
<div>
- Defines whether this material is visible. Default is *true*.
+ 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: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.<br />
- This property is automatically set to *true* when instancing a new material.
+ Defines whether this material is visible. Default is *true*.
</div>
@@ -226,6 +235,18 @@
<h3>[page:EventDispatcher EventDispatcher] methods are available on this class.</h3>
+ <h3>[method:Material clone]( )</h3>
+ <div>Return a new materials with the same parameters as this material.</div>
+ Only the color of the texture is used, ignoring the alpha channel if one exists.
+ For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the
+ green channel when sampling this texture due to the extra bit of precision provided
+ for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and
+ luminance/alpha textures will also still work as expected.
</div>
- <h3>[property:Texture lightMap]</h3>
- <div>Set light map. Default is null. The lightMap requires a second set of UVs.</div>
-
- <h3>[property:Float lightMapIntensity]</h3>
- <div>Intensity of the baked light. Default is 1.</div>
-
<h3>[property:Texture aoMap]</h3>
- <div>Set ambient occlusion map. Default is null.</div>
+ <div>The ambient occlusion map. Default is null.</div>
<h3>[property:Float aoMapIntensity]</h3>
<div>Intensity of the ambient occlusion effect. Default is 1. Zero is no occlusion effect.</div>
- <h3>[property:Texture specularMap]</h3>
- <div>Set specular map. Default is null.</div>
+ <h3>[property:Color color]</h3>
+ <div>[page:Color] of the material, by default set to white (0xffffff).</div>
- <h3>[property:Texture alphaMap]</h3>
- <div>The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null.</div>
- <div>Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.</div>
+ <h3>[property:Integer combine]</h3>
+ <div>
+ How to combine the result of the surface's color with the environment map, if any.<br /><br />
+
+ Options are [page:Materials THREE.Multiply] (default), [page:Materials THREE.MixOperation],
+ [page:Materials THREE.AddOperation]. If mix is chosen, the [page:.reflectivity] is used to
+ blend between the two colors.
+ </div>
+
+ <h3>[property:Boolean isMeshBasicMaterial]</h3>
+ <div>
+ Used to check whether this or derived classes are mesh basic materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
+ </div>
<h3>[property:TextureCube envMap]</h3>
- <div>Set env map. Default is null.</div>
+ <div>The environment map. Default is null.</div>
- <h3>[property:Integer combine]</h3>
- <div>How to combine the result of the surface's color with the environment map, if any.</div>
+ <h3>[property:Texture lightMap]</h3>
+ <div>The light map. Default is null. The lightMap requires a second set of UVs.</div>
+
+ <h3>[property:Float lightMapIntensity]</h3>
+ <div>Intensity of the baked light. Default is 1.</div>
+
+ <h3>[property:Boolean lights]</h3>
+ <div>Whether the material is affected by lights. Default is *false*.</div>
+
+ <h3>[property:Texture map]</h3>
+ <div>The color map. Default is null.</div>
+
+ <h3>[property:Boolean morphTargets]</h3>
+ <div>Define whether the material uses morphTargets. Default is false.</div>
- <div>Options are [page:Materials THREE.Multiply] (default), [page:Materials THREE.MixOperation], [page:Materials THREE.AddOperation]. If mix is chosen, the reflectivity is used to blend between the two colors.</div>
<h3>[property:Float reflectivity]</h3>
- <div>How much the environment map affects the surface; also see "combine".</div>
+ <div>How much the environment map affects the surface; also see [page:.combine].</div>
<h3>[property:Float refractionRatio]</h3>
<div>The index of refraction for an environment map using [page:Textures THREE.CubeRefractionMapping]. Default is *0.98*.</div>
- <h3>[property:Boolean fog]</h3>
- <div>Define whether the material color is affected by global fog settings.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h3>[property:Boolean skinning]</h3>
+ <div>Define whether the material uses skinning. Default is false.</div>
- <h3>[property:String shading]</h3>
- <div>Define shading type. Default is THREE.SmoothShading.</div>
+ <h3>[property:Texture specularMap]</h3>
+ <div>Specular map used by the material. Default is null.</div>
<h3>[property:Boolean wireframe]</h3>
- <div>Render geometry as wireframe. Default is false (i.e. render as flat polygons).</div>
-
- <h3>[property:Float wireframeLinewidth]</h3>
- <div>Controls wireframe thickness. Default is 1.</div>
- <div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+ <div>Render geometry as wireframe. Default is *false* (i.e. render as flat polygons).</div>
<h3>[property:String wireframeLinecap]</h3>
- <div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ <div>
+ Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.<br /><br />
+
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2D Canvas lineCap]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
<h3>[property:String wireframeLinejoin]</h3>
- <div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ <div>
+ Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.<br /><br />
- <h3>[property:Integer vertexColors]</h3>
- <div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineJoin 2D Canvas lineJoin]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
- <h3>[property:Boolean skinning]</h3>
- <div>Define whether the material uses skinning. Default is false.</div>
+ <h3>[property:Float wireframeLinewidth]</h3>
+ <div>Controls wireframe thickness. Default is 1.<br /><br />
- <h3>[property:Boolean morphTargets]</h3>
- <div>Define whether the material uses morphTargets. Default is false.</div>
+ Due to limitations in the [link:https://code.google.com/p/angleproject ANGLE layer],
+ on Windows platforms linewidth will always be 1 regardless of the set value.
+ </div>
<h2>Methods</h2>
+ <div>See the base [page:Material] class for common methods.</div>
+ Only the color of the texture is used, ignoring the alpha channel if one exists.
+ For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the
+ green channel when sampling this texture due to the extra bit of precision provided
+ for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and
+ luminance/alpha textures will also still work as expected.
</div>
- <h3>[property:Texture map]</h3>
- <div>Set color texture map. Default is null.</div>
+ <h3>[property:Texture aoMap]</h3>
+ <div>The ambient occlusion map. Default is null.</div>
- <h3>[property:Texture lightMap]</h3>
- <div>Set light map. Default is null. The lightMap requires a second set of UVs.</div>
+ <h3>[property:Float aoMapIntensity]</h3>
+ <div>Intensity of the ambient occlusion effect. Default is 1. Zero is no occlusion effect.</div>
- <h3>[property:Float lightMapIntensity]</h3>
- <div>TODO</div>
+ <h3>[property:Color color]</h3>
+ <div>[page:Color] of the material, by default set to white (0xffffff).</div>
- <h3>[property:Texture aoMap]</h3>
- <div>Set ambient occlusion map. Default is null. The aoMap requires a second set of UVs.</div>
+ <h3>[property:Integer combine]</h3>
+ <div>
+ How to combine the result of the surface's color with the environment map, if any.<br /><br />
- <h3>[property:Float aoMapIntensity]</h3>
- <div>TODO</div>
+ Options are [page:Materials THREE.Multiply] (default), [page:Materials THREE.MixOperation],
+ [page:Materials THREE.AddOperation]. If mix is chosen, the [page:.reflectivity] is used to
+ blend between the two colors.
+ </div>
<h3>[property:Color emissive]</h3>
<div>
- Emissive (light) color of the material, essentially a solid color unaffected by other lighting. Default is black.<br />
+ Emissive (light) color of the material, essentially a solid color unaffected by other lighting.
+ Default is black.
</div>
<h3>[property:Texture emissiveMap]</h3>
- <div>Set emisssive (glow) map. Default is null. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than black.</div>
+ <div>
+ Set emisssive (glow) map. Default is null. The emissive map color is modulated by
+ the emissive color and the emissive intensity. If you have an emissive map, be sure to
+ set the emissive color to something other than black.
+ </div>
<h3>[property:Float emissiveIntensity]</h3>
<div>Intensity of the emissive light. Modulates the emissive color. Default is 1.</div>
- <h3>[property:Texture specularMap]</h3>
- <div>Since this material does not have a specular component, the specular value affects only how much of the environment map affects the surface. Default is null.</div>
+ <h3>[property:TextureCube envMap]</h3>
+ <div>The environment map. Default is null.</div>
- <h3>[property:Texture alphaMap]</h3>
- <div>The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null.</div>
- <div>Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.</div>
+ Used to check whether this or derived classes are mesh Lambert materials. Default is *true*.<br /><br />
- <h3>[property:TextureCube envMap]</h3>
- <div>Set env map. Default is null.</div>
+ You should not change this, as it used internally for optimisation.
+ </div>
- <h3>[property:Integer combine]</h3>
- <div>How to combine the result of the surface's color with the environment map, if any.</div>
+ <h3>[property:Texture lightMap]</h3>
+ <div>The light map. Default is null. The lightMap requires a second set of UVs.</div>
- <div>Options are [page:Materials THREE.Multiply] (default), [page:Materials THREE.MixOperation], [page:Materials THREE.AddOperation]. If mix is chosen, the reflectivity is used to blend between the two colors.</div>
+ <h3>[property:Float lightMapIntensity]</h3>
+ <div>Intensity of the baked light. Default is 1.</div>
+
+ <h3>[property:Texture map]</h3>
+ <div>The color map. Default is null.</div>
+
+ <h3>[property:boolean morphNormals]</h3>
+ <div>
+ Defines whether the material uses morphNormals. Set as true to pass morphNormal
+ attributes from the [page:Geometry] to the shader. Default is *false*.
+ </div>
+
+ <h3>[property:Boolean morphTargets]</h3>
+ <div>Define whether the material uses morphTargets. Default is false.</div>
<h3>[property:Float reflectivity]</h3>
- <div>How much the environment map affects the surface; also see "combine".</div>
+ <div>How much the environment map affects the surface; also see [page:.combine].</div>
<h3>[property:Float refractionRatio]</h3>
<div>The index of refraction for an environment map using [page:Textures THREE.CubeRefractionMapping]. Default is *0.98*.</div>
- <h3>[property:Boolean fog]</h3>
- <div>Define whether the material color is affected by global fog settings. Default is *true*.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h3>[property:Boolean skinning]</h3>
+ <div>Define whether the material uses skinning. Default is false.</div>
- <h3>[property:Boolean wireframe]</h3>
- <div>Whether the triangles' edges are displayed instead of surfaces. Default is *false*.</div>
+ <h3>[property:Texture specularMap]</h3>
+ <div>Specular map used by the material. Default is null.</div>
- <h3>[property:Float wireframeLinewidth]</h3>
- <div>Line thickness for wireframe mode. Default is *1.0*.</div>
- <div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+ <h3>[property:Boolean wireframe]</h3>
+ <div>Render geometry as wireframe. Default is *false* (i.e. render as flat polygons).</div>
<h3>[property:String wireframeLinecap]</h3>
- <div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ <div>
+ Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.<br /><br />
- <h3>[property:String wireframeLinejoin]</h3>
- <div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2D Canvas lineCap]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
- <h3>[property:Integer vertexColors]</h3>
- <div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h3>[property:String wireframeLinejoin]</h3>
+ <div>
+ Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.<br /><br />
- <h3>[property:Boolean skinning]</h3>
- <div>Define whether the material uses skinning. Default is *false*.</div>
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineJoin 2D Canvas lineJoin]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
- <h3>[property:Boolean morphTargets]</h3>
- <div>Define whether the material uses morphTargets. Default is *false*.</div>
+ <h3>[property:Float wireframeLinewidth]</h3>
+ <div>Controls wireframe thickness. Default is 1.<br /><br />
- <h3>[property:boolean morphNormals]</h3>
- <div>
- Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry]
- to the shader. Default is *false*.
+ Due to limitations in the [link:https://code.google.com/p/angleproject ANGLE layer],
+ on Windows platforms linewidth will always be 1 regardless of the set value.
</div>
-
<h2>Methods</h2>
+ <div>See the base [page:Material] class for common methods.</div>
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
+ Any property of the material (including any property inherited from [page:Material]) can be passed in here.<br /><br />
+ The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
+ string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
</div>
-
<h2>Properties</h2>
<div>See the base [page:Material] class for common properties.</div>
- <h3>[property:Color color]</h3>
- <div>
- Diffuse color of the material. Default is white.<br />
- </div>
-
- <h3>[property:Color specular]</h3>
- <div>
- Specular color of the material, i.e., how shiny the material is and the color of its shine. Setting this the same color as the diffuse value (times some intensity) makes the material more metallic-looking; setting this to some gray makes the material look more plastic. Default is dark gray.<br />
+ <h3>[property:Texture alphaMap]</h3>
+ <div>The alpha map is a grayscale texture that controls the opacity across the surface
+ Only the color of the texture is used, ignoring the alpha channel if one exists.
+ For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the
+ green channel when sampling this texture due to the extra bit of precision provided
+ for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and
+ luminance/alpha textures will also still work as expected.
</div>
- <h3>[property:Float shininess]</h3>
- <div>How shiny the specular highlight is; a higher value gives a sharper highlight. Default is *30*.</div>
-
- <h3>[property:Texture map]</h3>
- <div>Set color texture map. Default is null. The texture map color is modulated by the diffuse color.</div>
-
- <h3>[property:Texture lightMap]</h3>
- <div>Set light map. Default is null. The lightMap requires a second set of UVs.</div>
-
- <h3>[property:Float lightMapIntensity]</h3>
- <div>TODO</div>
-
<h3>[property:Texture aoMap]</h3>
- <div>Set ambient occlusion map. Default is null. The aoMap requires a second set of UVs.</div>
+ <div>The ambient occlusion map. Default is null.</div>
<h3>[property:Float aoMapIntensity]</h3>
- <div>TODO</div>
-
- <h3>[property:Color emissive]</h3>
- <div>
- Emissive (light) color of the material, essentially a solid color unaffected by other lighting. Default is black.<br />
- </div>
-
- <h3>[property:Texture emissiveMap]</h3>
- <div>Set emisssive (glow) map. Default is null. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than black.</div>
-
- <h3>[property:Float emissiveIntensity]</h3>
- <div>Intensity of the emissive light. Modulates the emissive color. Default is 1.</div>
+ <div>Intensity of the ambient occlusion effect. Default is 1. Zero is no occlusion effect.</div>
<h3>[property:Texture bumpMap]</h3>
<div>
@@ -131,99 +86,155 @@
</div>
<h3>[property:Float bumpScale]</h3>
- <div>
- How much the bump map affects the material. Typical ranges are 0-1. Default is 1.
- </div>
+ <div>How much the bump map affects the material. Typical ranges are 0-1. Default is 1.</div>
- <h3>[property:Texture normalMap]</h3>
- <div>
- The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
- the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
- </div>
- <h3>[property:Vector2 normalScale]</h3>
+ <h3>[property:Color color]</h3>
+ <div>[page:Color] of the material, by default set to white (0xffffff).</div>
+
+ <h3>[property:Integer combine]</h3>
<div>
- How much the normal map affects the material. Typical ranges are 0-1. Default is (1,1).
+ How to combine the result of the surface's color with the environment map, if any.<br /><br />
+
+ Options are [page:Materials THREE.Multiply] (default), [page:Materials THREE.MixOperation],
+ [page:Materials THREE.AddOperation]. If mix is chosen, the [page:.reflectivity] is used to
+ blend between the two colors.
</div>
<h3>[property:Texture displacementMap]</h3>
<div>
- The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry.
- The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
+ The displacement map affects the position of the mesh's vertices. Unlike other maps
+ which only affect the light and shade of the material the displaced vertices can cast shadows,
+ block other objects, and otherwise act as real geometry. The displacement texture is
+ an image where the value of each pixel (white being the highest) is mapped against,
+ and repositions, the vertices of the mesh.
</div>
<h3>[property:Float displacementScale]</h3>
<div>
- How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied. Default is 1.
+ How much the displacement map affects the mesh (where black is no displacement,
+ and white is maximum displacement). Without a displacement map set, this value is not applied.
+ Default is 1.
</div>
<h3>[property:Float displacementBias]</h3>
<div>
- The offset of the displacement map's values on the mesh's vertices. Without a displacement map set, this value is not applied. Default is 0.
+ The offset of the displacement map's values on the mesh's vertices.
+ Without a displacement map set, this value is not applied. Default is 0.
</div>
- <h3>[property:Texture specularMap]</h3>
- <div>The specular map value affects both how much the specular surface highlight contributes and how much of the environment map affects the surface. Default is null.</div>
+ <h3>[property:Color emissive]</h3>
+ <div>
+ Emissive (light) color of the material, essentially a solid color unaffected by other lighting.
+ Default is black.
+ </div>
- <h3>[property:Texture alphaMap]</h3>
- <div>The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null.</div>
- <div>Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.</div>
+ <h3>[property:Texture emissiveMap]</h3>
+ <div>
+ Set emisssive (glow) map. Default is null. The emissive map color is modulated by
+ the emissive color and the emissive intensity. If you have an emissive map, be sure to
+ set the emissive color to something other than black.
+ </div>
+
+ <h3>[property:Float emissiveIntensity]</h3>
+ <div>Intensity of the emissive light. Modulates the emissive color. Default is 1.</div>
<h3>[property:TextureCube envMap]</h3>
- <div>Set env map. Default is null.</div>
+ <div>The environment map. Default is null.</div>
- <h3>[property:Integer combine]</h3>
- <div>How to combine the result of the surface's color with the environment map, if any.</div>
+ <h3>[property:Boolean isMeshPhongMaterial]</h3>
+ <div>
+ Used to check whether this or derived classes are mesh Phong materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
+ </div>
+
+
+ <h3>[property:Texture lightMap]</h3>
+ <div>The light map. Default is null. The lightMap requires a second set of UVs.</div>
+
+ <h3>[property:Float lightMapIntensity]</h3>
+ <div>Intensity of the baked light. Default is 1.</div>
+
+ <h3>[property:Texture map]</h3>
+ <div>The color map. Default is null. The texture map color is modulated by the diffuse [page:.color].</div>
+
+ <h3>[property:boolean morphNormals]</h3>
+ <div>
+ Defines whether the material uses morphNormals. Set as true to pass morphNormal
+ attributes from the [page:Geometry] to the shader. Default is *false*.
+ </div>
+
+ <h3>[property:Boolean morphTargets]</h3>
+ <div>Define whether the material uses morphTargets. Default is false.</div>
+
+ <h3>[property:Texture normalMap]</h3>
+ <div>
+ The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
+ the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
+ </div>
+
+ <h3>[property:Vector2 normalScale]</h3>
+ <div>
+ How much the normal map affects the material. Typical ranges are 0-1.
+ Default is a [page:Vector2] set to (1,1).
+ </div>
- <div>Options are [page:Materials THREE.Multiply] (default), [page:Materials THREE.MixOperation], [page:Materials THREE.AddOperation]. If mix is chosen, the reflectivity is used to blend between the two colors.</div>
<h3>[property:Float reflectivity]</h3>
- <div>How much the environment map affects the surface; also see "combine".</div>
+ <div>How much the environment map affects the surface; also see [page:.combine].</div>
<h3>[property:Float refractionRatio]</h3>
<div>The index of refraction for an environment map using [page:Textures THREE.CubeRefractionMapping]. Default is *0.98*.</div>
- <h3>[property:Boolean fog]</h3>
- <div>Define whether the material color is affected by global fog settings. Default is *true*.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h3>[property:Float shininess]</h3>
+ <div>How shiny the [page:.specular] highlight is; a higher value gives a sharper highlight. Default is *30*.</div>
- <h3>[property:Integer shading]</h3>
- <div>How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.</div>
- <div>Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading].</div>
+ <h3>[property:Boolean skinning]</h3>
+ <div>Define whether the material uses skinning. Default is false.</div>
- <h3>[property:Boolean wireframe]</h3>
- <div>Whether the triangles' edges are displayed instead of surfaces. Default is *false*.</div>
+ <h3>[property:Texture specular]</h3>
+ <div>
+ Specular color of the material. Default is a [page:Color] set to *0x111111* (very dark grey).<br /><br />
- <h3>[property:Float wireframeLinewidth]</h3>
- <div>Line thickness for wireframe mode. Default is *1.0*.</div>
- <div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+ This defines how shiny the material is and the color of its shine.
+ </div>
+
+ <h3>[property:Texture specularMap]</h3>
+ <div>
+ The specular map value affects both how much the specular surface highlight
+ contributes and how much of the environment map affects the surface. Default is null.
+ </div>
+
+ <h3>[property:Boolean wireframe]</h3>
+ <div>Render geometry as wireframe. Default is *false* (i.e. render as flat polygons).</div>
<h3>[property:String wireframeLinecap]</h3>
- <div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ <div>
+ Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.<br /><br />
- <h3>[property:String wireframeLinejoin]</h3>
- <div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2D Canvas lineCap]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
- <h3>[property:Integer vertexColors]</h3>
- <div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h3>[property:String wireframeLinejoin]</h3>
+ <div>
+ Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.<br /><br />
- <h3>[property:Boolean skinning]</h3>
- <div>Define whether the material uses skinning. Default is *false*.</div>
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineJoin 2D Canvas lineJoin]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
- <h3>[property:Boolean morphTargets]</h3>
- <div>Define whether the material uses morphTargets. Default is *false*.</div>
+ <h3>[property:Float wireframeLinewidth]</h3>
+ <div>Controls wireframe thickness. Default is 1.<br /><br />
- <h3>[property:boolean morphNormals]</h3>
- <div>
- Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry]
- to the shader. Default is *false*.
+ Due to limitations in the [link:https://code.google.com/p/angleproject ANGLE layer],
+ on Windows platforms linewidth will always be 1 regardless of the set value.
</div>
<h2>Methods</h2>
+ <div>See the base [page:Material] class for common methods.</div>
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
+ Any property of the material (including any property inherited from [page:Material] and [page:MeshStandardMaterial]) can be passed in here.<br /><br />
+
+ The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
+ string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
</div>
<h2>Properties</h2>
<div>See the base [page:Material] and [page:MeshStandardMaterial] classes for common properties.</div>
- <h3>[property:Float reflectivity]</h3>
- <div>
- Degree of reflectivity, from *0.0* to *1.0*. Default is *0.5*.<br />
-
- This models the reflectivity of non-metallic materials. It has no effect when [page:MeshStandardMaterial.metalness metalness] is *1.0*
- </div>
-
<h3>[property:Float clearCoat]</h3>
<div>
ClearCoat level, from *0.0* to *1.0*. Default is *0.0*.
</div>
<h3>[property:Float clearCoatRoughness]</h3>
+ <div>How rough the clearCoat appears, from *0.0* to *1.0*. Default is *0.0*.</div>
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
+ Any property of the material (including any property inherited from [page:Material]) can be passed in here.<br /><br />
+ The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
+ string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
</div>
-
<h2>Properties</h2>
<div>See the base [page:Material] class for common properties.</div>
- <h3>[property:Color color]</h3>
- <div>
- Diffuse color of the material. Default is white.<br />
- </div>
-
- <h3>[property:Float roughness]</h3>
- <div>
- How rough the material appears. 0.0 means a smooth mirror reflection, 1.0 means fully diffuse.<br />
- </div>
-
- <h3>[property:Float metalness]</h3>
- <div>
- How much the material is like a metal. Non-metallic materials such as wood or stone use 0.0, metallic use 1.0, nothing in between. A value between 0.0 and 1.0 could be used for a rusty metal look.<br />
+ <h3>[property:Texture alphaMap]</h3>
+ <div>The alpha map is a grayscale texture that controls the opacity across the surface
+ Only the color of the texture is used, ignoring the alpha channel if one exists.
+ For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the
+ green channel when sampling this texture due to the extra bit of precision provided
+ for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and
+ luminance/alpha textures will also still work as expected.
</div>
- <h3>[property:Texture map]</h3>
- <div>Set color texture map. Default is null. The texture map color is modulated by the diffuse color.</div>
-
- <h3>[property:Texture lightMap]</h3>
- <div>Set light map, a texture that contains pre-baked diffuse lighting added to the surface. Default is null. The lightMap requires a second set of UVs.</div>
-
- <h3>[property:Float lightMapIntensity]</h3>
- <div>A scale factor for the light map's effect, higher being brighter.</div>
-
<h3>[property:Texture aoMap]</h3>
- <div>Set ambient occlusion map, a texture that contains pre-baked darkening due to crevices on the surface. Default is null. The aoMap requires a second set of UVs.</div>
+ <div>The ambient occlusion map. Default is null.</div>
<h3>[property:Float aoMapIntensity]</h3>
- <div>A scale factor for the ambient occlusion map's effect, higher being darker and more pronounced.</div>
-
- <h3>[property:Color emissive]</h3>
- <div>
- Emissive (light) color of the material, essentially a solid color unaffected by other lighting. Default is black.<br />
- </div>
-
- <h3>[property:Texture emissiveMap]</h3>
- <div>Set emisssive (glow) map. Default is null. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than black.</div>
-
- <h3>[property:Float emissiveIntensity]</h3>
- <div>Intensity of the emissive light. Modulates the emissive color. Default is 1.</div>
+ <div>Intensity of the ambient occlusion effect. Default is 1. Zero is no occlusion effect.</div>
<h3>[property:Texture bumpMap]</h3>
<div>
@@ -133,99 +110,154 @@
</div>
<h3>[property:Float bumpScale]</h3>
- <div>
- How much the bump map affects the material. Typical ranges are 0-1. Default is 1.
- </div>
+ <div>How much the bump map affects the material. Typical ranges are 0-1. Default is 1.</div>
- <h3>[property:Texture normalMap]</h3>
- <div>
- The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
- the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
- </div>
- <h3>[property:Vector2 normalScale]</h3>
- <div>
- How much the normal map affects the material. Typical ranges are 0-1. Default is (1, 1).
+ <h3>[property:Color color]</h3>
+ <div>[page:Color] of the material, by default set to white (0xffffff).</div>
+
+ <h3>[property:Object defines]</h3>
+ <div>An object of the form:
+ <code>
+ { 'STANDARD': '' };
+ </code>
+
+ This is used by the [page:WebGLRenderer] for selecting shaders.
</div>
<h3>[property:Texture displacementMap]</h3>
<div>
- The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry.
- The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
+ The displacement map affects the position of the mesh's vertices. Unlike other maps
+ which only affect the light and shade of the material the displaced vertices can cast shadows,
+ block other objects, and otherwise act as real geometry. The displacement texture is
+ an image where the value of each pixel (white being the highest) is mapped against,
+ and repositions, the vertices of the mesh.
</div>
<h3>[property:Float displacementScale]</h3>
<div>
- How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied. Default is 1.
+ How much the displacement map affects the mesh (where black is no displacement,
+ and white is maximum displacement). Without a displacement map set, this value is not applied.
+ Default is 1.
</div>
<h3>[property:Float displacementBias]</h3>
<div>
- The offset of the displacement map's values on the mesh's vertices. Without a displacement map set, this value is not applied. Default is 0.
+ The offset of the displacement map's values on the mesh's vertices.
+ Without a displacement map set, this value is not applied. Default is 0.
</div>
- <h3>[property:Texture roughnessMap]</h3>
- <div>The red channel of this texture is used to alter the roughness of the material.
+ <h3>[property:Color emissive]</h3>
+ <div>
+ Emissive (light) color of the material, essentially a solid color unaffected by other lighting.
+ Default is black.
</div>
- <h3>[property:Texture metalnessMap]</h3>
- <div>The red channel of this texture is used to alter the metalness of the material.
+ <h3>[property:Texture emissiveMap]</h3>
+ <div>
+ Set emisssive (glow) map. Default is null. The emissive map color is modulated by
+ the emissive color and the emissive intensity. If you have an emissive map, be sure to
+ set the emissive color to something other than black.
</div>
- <h3>[property:Texture alphaMap]</h3>
- <div>The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null.</div>
- <div>Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.</div>
+ <h3>[property:Float emissiveIntensity]</h3>
+ <div>Intensity of the emissive light. Modulates the emissive color. Default is 1.</div>
<h3>[property:TextureCube envMap]</h3>
- <div>Set env map. Default is null.</div>
+ <div>The environment map. Default is null.</div>
<h3>[property:Float envMapIntensity]</h3>
<div>Scales the effect of the environment map by multiplying its color.</div>
+ Used to check whether this or derived classes are mesh standard materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
+ </div>
+
+
+ <h3>[property:Texture lightMap]</h3>
+ <div>The light map. Default is null. The lightMap requires a second set of UVs.</div>
+
+ <h3>[property:Float lightMapIntensity]</h3>
+ <div>Intensity of the baked light. Default is 1.</div>
+
+ <h3>[property:Texture map]</h3>
+ <div>The color map. Default is null. The texture map color is modulated by the diffuse [page:.color].</div>
+
+ <h3>[property:Float metalness]</h3>
+ <div>
+ How much the material is like a metal. Non-metallic materials such as wood or stone use 0.0, metallic use 1.0, nothing in between. A value between 0.0 and 1.0 could be used for a rusty metal look.<br />
+ </div>
+
+ <h3>[property:Texture metalnessMap]</h3>
+ <div>The red channel of this texture is used to alter the metalness of the material.</div>
+
+ <h3>[property:boolean morphNormals]</h3>
+ <div>
+ Defines whether the material uses morphNormals. Set as true to pass morphNormal
+ attributes from the [page:Geometry] to the shader. Default is *false*.
+ </div>
+
+ <h3>[property:Boolean morphTargets]</h3>
+ <div>Define whether the material uses morphTargets. Default is false.</div>
+
+ <h3>[property:Texture normalMap]</h3>
+ <div>
+ The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
+ the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
+ </div>
+
+ <h3>[property:Vector2 normalScale]</h3>
+ <div>
+ How much the normal map affects the material. Typical ranges are 0-1.
+ Default is a [page:Vector2] set to (1,1).
+ </div>
+
<h3>[property:Float refractionRatio]</h3>
<div>The index of refraction for an environment map using [page:Textures THREE.CubeRefractionMapping]. Default is *0.98*.</div>
- <h3>[property:Boolean fog]</h3>
- <div>Define whether the material color is affected by global fog settings. Default is *true*.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h3>[property:Float roughness]</h3>
+ <div>
+ How rough the material appears. 0.0 means a smooth mirror reflection, 1.0 means fully diffuse.
+ </div>
- <h3>[property:Integer shading]</h3>
- <div>How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.</div>
+ <h3>[property:Texture roughnessMap]</h3>
+ <div>The red channel of this texture is used to alter the roughness of the material.</div>
- <div>Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading].</div>
+ <h3>[property:Boolean skinning]</h3>
+ <div>Define whether the material uses skinning. Default is false.</div>
<h3>[property:Boolean wireframe]</h3>
- <div>Whether the triangles' edges are displayed instead of surfaces. Default is *false*.</div>
-
- <h3>[property:Float wireframeLinewidth]</h3>
- <div>Line thickness for wireframe mode. Default is *1.0*.</div>
- <div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+ <div>Render geometry as wireframe. Default is *false* (i.e. render as flat polygons).</div>
<h3>[property:String wireframeLinecap]</h3>
- <div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ <div>
+ Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.<br /><br />
- <h3>[property:String wireframeLinejoin]</h3>
- <div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2D Canvas lineCap]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
- <h3>[property:Integer vertexColors]</h3>
- <div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+ <h3>[property:String wireframeLinejoin]</h3>
+ <div>
+ Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.<br /><br />
- <h3>[property:Boolean skinning]</h3>
- <div>Define whether the material uses skinning. Default is *false*.</div>
+ This corresponds to the [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineJoin 2D Canvas lineJoin]
+ property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
+ </div>
- <h3>[property:Boolean morphTargets]</h3>
- <div>Define whether the material uses morphTargets. Default is *false*.</div>
+ <h3>[property:Float wireframeLinewidth]</h3>
+ <div>Controls wireframe thickness. Default is 1.<br /><br />
- <h3>[property:boolean morphNormals]</h3>
- <div>
- Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry]
- to the shader. Default is *false*.
+ Due to limitations in the [link:https://code.google.com/p/angleproject ANGLE layer],
+ on Windows platforms linewidth will always be 1 regardless of the set value.
</div>
<h2>Methods</h2>
+ <div>See the base [page:Material] class for common methods.</div>
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
+ Any property of the material (including any property inherited from [page:Material] and [page:MeshStandardMaterial]) can be passed in here.<br /><br />
+
+ The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
+ string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
+ </div>
+
+
+ <h2>Properties</h2>
+ <div>See the base [page:Material] and [page:MeshPhongMaterial] classes for common properties.</div>
+
+ <h3>[property:Texture gradientMap]</h3>
+ <div>Gradient map for the toon shading. Default is *null*.</div>
+
+ <h3>[property:Boolean isMeshToonMaterial]</h3>
+ <div>
+ Used to check whether this or derived classes are mesh toon materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
+ </div>
+
+ <h3>[property:Object defines]</h3>
+ <div>An object of the form:
+ <code>
+ { 'TOON': '' };
+ </code>
+
+ This is used by the [page:WebGLRenderer] for selecting shaders.
+ </div>
+
+
+ <h2>Methods</h2>
+ <div>See the base [page:Material] and [page:MeshPhongMaterial] classes for common methods.</div>
+//This will add a starfield to the background of a scene
+var starsGeometry = new THREE.Geometry();
- <h3>[name]( [page:Object parameters] )</h3>
+for ( var i = 0; i < 10000; i ++ ) {
+
+ var star = new THREE.Vector3();
+ star.x = THREE.Math.randFloatSpread( 2000 );
+ star.y = THREE.Math.randFloatSpread( 2000 );
+ star.z = THREE.Math.randFloatSpread( 2000 );
+
+ geometry.vertices.push( star );
- <div>parameters is an object with one or more properties defining the material's appearance.</div>
+}
+var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } )
+
+var starField = new THREE.Points( geometry, starsMaterial );
+
+scene.add( starField );
+ </code>
+
+ <h3>[name]( [page:Object parameters] )</h3>
<div>
- color — Points color in hexadecimal. Default is 0xffffff.<br />
- map — a [page:Texture texture].If defined, then a point has the data from texture as colors. Default is null.<br />
- size — Define size of points. Default is 1.0.<br />
- sizeAttenuation — Enable/disable size attenuation with distance.<br />
- vertexColors — Define whether the material uses vertex colors, or not. Default is false.<br />
- fog — Define whether the material color is affected by global fog settings. Default is true.
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
+ Any property of the material (including any property inherited from [page:Material]) can be passed in here.<br /><br />
+
+ The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
+ string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
</div>
<h2>Properties</h2>
<div>See the base [page:Material] class for common properties.</div>
- <h3>[property:Number color]</h3>
+ <h3>[property:Color color]</h3>
+ <div>[page:Color] of the material, by default set to white (0xffffff).</div>
- <div>Sets the color of the points. Default is 0xffffff.</div>
+ <h3>[property:Boolean isPointsMaterial]</h3>
+ <div>
+ Used to check whether this or derived classes are points materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
+ </div>
+
+ <h3>[property:Boolean lights]</h3>
+ <div>Whether the material is affected by lights. Default is *false*.</div>
<h3>[property:Texture map]</h3>
- <div>Sets the color of the points using data from a texture.</div>
+ <div>Sets the color of the points using data from a [page:Texture].</div>
<h3>[property:Number size]</h3>
-
<div>Sets the size of the points. Default is 1.0.</div>
<h3>[property:Boolean sizeAttenuation]</h3>
-
<div>Specify whether points' size will get smaller with the distance. Default is true.</div>
- <h3>[property:Boolean vertexColors]</h3>
- <div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
-
- <h3>[property:Boolean fog]</h3>
- <div>Define whether the material color is affected by global fog settings.</div>
- <div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
- <div class="desc">This class works just like [page:ShaderMaterial], except that definitions of built-in uniforms and attributes are not automatically prepended to the GLSL shader code.</div>
-
+ <div class="desc">
+ This class works just like [page:ShaderMaterial], except that definitions of
+ built-in uniforms and attributes are not automatically prepended to the GLSL shader code.
- <div class="desc">Material rendered with custom shaders. A shader is a small program written in [link:https://www.opengl.org/documentation/glsl/ GLSL] to run on the GPU. You may want to use a custom shader if you need to:
+ <div class="desc">
+ A material rendered with custom shaders. A shader is a small program written in
+ [link:https://www.khronos.org/files/opengles_shading_language.pdf_ES GLSL] that runs on the GPU.
+ You may want to use a custom shader if you need to:
<ul>
<li>implement an effect not included with any of the built-in [page:Material materials]</li>
<li>combine many objects into a single [page:Geometry] or [page:BufferGeometry] in order to improve performance</li>
@@ -20,13 +23,64 @@
There are the following notes to bear in mind when using a *ShaderMaterial*:
<ul>
- <li>A *ShaderMaterial* will only be rendered properly by [page:WebGLRenderer], since the GLSL code in the *vertexShader* and *fragmentShader* properties must be compiled and run on the GPU using WebGL.</li>
- <li>As of THREE r72, directly assigning attributes in a *ShaderMaterial* is no longer supported. A [page:BufferGeometry] instance (instead of a [page:Geometry] instance) must be used instead, using [page:BufferAttribute] instances to define custom attributes.</li>
- <li>As of THREE r77, [page:WebGLRenderTarget] or [page:WebGLRenderTargetCube] instances are no longer supposed to be used as uniforms. Their [page:Texture texture] property must be used instead.</li>
+ <li>
+ A *ShaderMaterial* will only be rendered properly by [page:WebGLRenderer],
+ since the GLSL code in the [link:https://en.wikipedia.org/wiki/Shader#Vertex_shaders vertexShader]
+ and [link:https://en.wikipedia.org/wiki/Shader#Pixel_shaders fragmentShader] properties must
+ be compiled and run on the GPU using WebGL.
+ </li>
+ <li>
+ As of THREE r72, directly assigning attributes in a ShaderMaterial is no longer supported.
+ A [page:BufferGeometry] instance (instead of a [page:Geometry] instance) must be used instead,
+ using [page:BufferAttribute] instances to define custom attributes.
+ </li>
+ <li>
+ As of THREE r77, [page:WebGLRenderTarget] or [page:WebGLRenderTargetCube] instances
+ are no longer supposed to be used as uniforms. Their [page:Texture texture] property
+ must be used instead.
+ </li>
+ <li>
+ Built in attributes an uniforms are passed to the shaders along with your code.
+ If you don't want the [page:WebGLProgram] to add anything to your shader code, you can use
- <p>You can specify two different types of shaders for each material:</p>
- <ul>
- <li>The *vertex shader* runs first; it receives *attributes*, calculates/manipulates the position of each individual vertex, and passes additional data (*varying*s) to the fragment shader.</li>
- <li>The *fragment shader* runs second; it sets the color of each individual "fragment" (pixel) rendered to the screen.</li>
- </ul>
- <p>There are three types of variables in shaders: uniforms, attributes, and varyings:</p>
- <ul>
- <li>*Uniforms* are variables that have the same value for all vertices---lighting, fog, and shadow maps are examples of data that would be stored in uniforms. Uniforms can be accessed by both the vertex shader and the fragment shader.</li>
- <li>*Attributes* are variables associated with each vertex---for instance, the vertex position, face normal, and vertex color are all examples of data that would be stored in attributes. Attributes can <em>only</em> be accessed within the vertex shader.</li>
- <li>*Varyings* are variables that are passed from the vertex shader to the fragment shader. For each fragment, the value of each varying will be smoothly interpolated from the values of adjacent vertices.</li>
- </ul>
- <p>Note that <em>within</em> the shader itself, uniforms and attributes act like constants; you can only modify their values by passing different values to the buffers from your JavaScript code.</p>
- <h3>Built-in attributes and uniforms</h3>
- <p>
- [page:WebGLRenderer] provides many attributes and uniforms to shaders by default; definitions of these variables are prepended to your *fragmentShader* and *vertexShader* code by [page:WebGLProgram] when the shader is compiled; you don't need to declare them yourself. These variables are described in [page:WebGLProgram].
- </p>
- <p>
- Some of these uniforms or attributes (e.g. those pertaining lighting, fog, etc.) require properties to be set on the material in order for [page:WebGLRenderer] to copy the appropriate values to the GPU---make sure to set these flags if you want to use these features in your own shader.
- </p>
- <p>
- If you don't want [page:WebGLProgram] to add anything to your shader code, you can use [page:RawShaderMaterial] instead of this class.
- </p>
-
- <h3>Custom attributes and uniforms</h3>
- <p>Both custom attributes and uniforms must be declared in your GLSL shader code (within *vertexShader* and/or *fragmentShader*). Custom uniforms must be defined in <em>both</em> the *uniforms* property of your *ShaderMaterial*, whereas any custom attributes must be defined via [page:BufferAttribute] instances. Note that *varying*s only need to be declared within the shader code (not within the material).
- </p>
-
- <p>To declare a custom attribute, please reference the [page:BufferGeometry] page for an overview, and the [page:BufferAttribute] page for a detailed look at the *BufferAttribute* API.</p>
- <p>When creating your attributes, each typed array that you create to hold your attribute's data must be a multiple of your data type's size. For example, if your attribute is a [page:Vector3 THREE.Vector3] type, and you have 3000 vertices in your [page:BufferGeometry], your typed array value must be created with a length of 3000 * 3, or 9000 (one value per-component). A table of each data type's size is shown below for reference:</p>
- <p>Note that attribute buffers are <em>not</em> refreshed automatically when their values change. To update custom attributes, set the *needsUpdate* flag to true on the [page:BufferAttribute] of the geometry (see [page:BufferGeometry] for further details).</p>
-
- <p>
- To declare a custom [page:Uniform], use the *uniforms* property:
- <code>
- uniforms: {
- time: { value: 1.0 },
- resolution: { value: new THREE.Vector2() }
- }
- </code>
- </p>
+ <h2>Vertex shaders and fragment shaders</h2>
- <h2>Constructor</h2>
+ <div>
+ <p>You can specify two different types of shaders for each material:</p>
+ <ul>
+ <li>
+ The vertex shader runs first; it receives *attributes*, calculates / manipulates
+ the position of each individual vertex, and passes additional data (*varying*s) to the fragment shader.
+ </li>
+ <li>
+ The fragment ( or pixel ) shader runs second; it sets the color of each individual "fragment"
+ (pixel) rendered to the screen.
+ </li>
+ </ul>
+ <p>There are three types of variables in shaders: uniforms, attributes, and varyings:</p>
+ <ul>
+ <li>
+ *Uniforms* are variables that have the same value for all vertices - lighting, fog,
+ and shadow maps are examples of data that would be stored in uniforms.
+ Uniforms can be accessed by both the vertex shader and the fragment shader.
+ </li>
+ <li>
+ *Attributes* are variables associated with each vertex---for instance, the vertex position,
+ face normal, and vertex color are all examples of data that would be stored in attributes.
+ Attributes can <em>only</em> be accessed within the vertex shader.
+ </li>
+ <li>
+ *Varyings* are variables that are passed from the vertex shader to the fragment shader.
+ For each fragment, the value of each varying will be smoothly interpolated from the values of adjacent vertices.
+ </li>
+ </ul>
+ <p>
+ Note that <em>within</em> the shader itself, uniforms and attributes act like constants;
+ you can only modify their values by passing different values to the buffers from your JavaScript code.
+ </p>
+ </div>
+
+
+ <h2>Built-in attributes and uniforms</h2>
+
+ <div>
+ <p>
+ The [page:WebGLRenderer] provides many attributes and uniforms to shaders by default;
+ definitions of these variables are prepended to your *fragmentShader* and *vertexShader*
+ code by the [page:WebGLProgram] when the shader is compiled; you don't need to declare them yourself.
+ See [page:WebGLProgram] for details of these variables.
+ </p>
+ <p>
+ Some of these uniforms or attributes (e.g. those pertaining lighting, fog, etc.)
+ require properties to be set on the material in order for [page:WebGLRenderer] to copy
+ the appropriate values to the GPU - make sure to set these flags if you want to use these
+ features in your own shader.
+ </p>
+ <p>
+ If you don't want [page:WebGLProgram] to add anything to your shader code, you can use
+ [page:RawShaderMaterial] instead of this class.
+ </p>
+ </div>
+
+
+ <h2>Custom attributes and uniforms</h2>
- <h3>[name]( [page:Object parameters] )</h3>
<div>
- parameters -- An object containing various parameters setting up shaders and their uniforms.
+ <p>
+ Both custom attributes and uniforms must be declared in your GLSL shader code
+ (within *vertexShader* and/or *fragmentShader*). Custom uniforms must be defined in <em>both</em>
+ the *uniforms* property of your *ShaderMaterial*, whereas any custom attributes must be
+ defined via [page:BufferAttribute] instances. Note that *varying*s only need to
+ be declared within the shader code (not within the material).
+ </p>
+ <p>
+ To declare a custom attribute, please reference the [page:BufferGeometry] page for an overview,
+ and the [page:BufferAttribute] page for a detailed look at the *BufferAttribute* API.
+ </p>
+ <p>
+ When creating your attributes, each typed array that you create to hold your
+ attribute's data must be a multiple of your data type's size. For example, if your
+ attribute is a [page:Vector3 THREE.Vector3] type, and you have 3000 vertices in your
+ [page:BufferGeometry], your typed array value must be created with a length of 3000 * 3,
+ or 9000 (one value per-component). A table of each data type's size is shown below for reference:
+ Note that attribute buffers are <em>not</em> refreshed automatically when their values change. To update custom attributes,
+ set the *needsUpdate* flag to true on the [page:BufferAttribute] of the geometry (see [page:BufferGeometry]
+ for further details).
+ </p>
+
+ <p>
+ To declare a custom [page:Uniform], use the *uniforms* property:
+ <code>
+ uniforms: {
+ time: { value: 1.0 },
+ resolution: { value: new THREE.Vector2() }
+ }
+ </code>
+ </p>
+
</div>
+
+ <h2>Constructor</h2>
+
+ <h3>[name]( [page:Object parameters] )</h3>
<div>
- shading — Define shading type. Default is THREE.SmoothShading.<br />
- fog — Define whether the material color is affected by global fog settings. Default is true.<br />
- wireframe — render geometry as wireframe. Default is false.<br />
- wireframeLinewidth — Line thickness. Default is 1.<br />
- vertexColors — Define how the vertices gets colored. Default is THREE.NoColors.<br />
- skinning — Define whether the material uses skinning. Default is false.<br />
- morphTargets — Define whether the material uses morphTargets. Default is false.
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
+ Any property of the material (including any property inherited from [page:Material]) can be passed in here.
</div>
<h2>Properties</h2>
<div>See the base [page:Material] class for common properties.</div>
- <h3>[property:Object uniforms]</h3>
+ <h3>[property:Boolean clipping]</h3>
<div>
- Object specifying the uniforms to be passed to the shader code; keys are uniform names, values are definitions of the form
- <code>
- { value: 1.0 }
- </code>
- where *value* is the value of the uniform. Names must match the name of the uniform, as defined in the GLSL code. Note that uniforms are refreshed on every frame, so updating the value of the uniform will immediately update the value available to the GLSL code.
+ Defines whether this material supports clipping; true to let the renderer pass the clippingPlanes uniform. Default is false.
+ When the rendered geometry doesn't include these attributes but the material does,
+ these default values will be passed to the shaders. This avoids errors when buffer data is missing.
+
+ <code>
+this.defaultAttributeValues = {
+ 'color': [ 1, 1, 1 ],
+ 'uv': [ 0, 0 ],
+ 'uv2': [ 0, 0 ]
+};
+ </code>
+
</div>
+
<h3>[property:Object defines]</h3>
<div>
- Defines custom constants using *#define* directives within the GLSL code for both the vertex shader and the fragment shader; each key/value pair yields another directive:
+ Defines custom constants using *#define* directives within the GLSL code for both the
+ vertex shader and the fragment shader; each key/value pair yields another directive:
<code>
defines: {
FOO: 15,
@@ -170,78 +286,149 @@
in the GLSL code.
</div>
- <h3>[property:String vertexShader]</h3>
+ <h3>[property:Object extensions]</h3>
<div>
- Vertex shader GLSL code. This is the actual code for the shader. In the example above, the *vertexShader* and *fragmentShader* code is extracted from the DOM; it could be passed as a string directly or loaded via AJAX instead.
+ An object with the folowing properties:
+ <code>
+this.extensions = {
+ derivatives: false, // set to use derivatives
+ fragDepth: false, // set to use fragment depth values
+ drawBuffers: false, // set to use draw buffers
+ shaderTextureLOD: false // set to use shader texture LOD
+};
+ </code>
</div>
- <h3>[property:String fragmentShader]</h3>
+
+ <h3>[property:Boolean fog]</h3>
<div>
- Fragment shader GLSL code. This is the actual code for the shader. In the example above, the *vertexShader* and *fragmentShader* code is extracted from the DOM; it could be passed as a string directly or loaded via AJAX instead.
+ Define whether the material color is affected by global fog settings; true to pass
+ fog uniforms to the shader. Default is false.
</div>
- <h3>[property:Number shading]</h3>
+
+ <h3>[property:String fragmentShader]</h3>
<div>
- Define shading type, which determines whether normals are smoothed between vertices; possible values are [page:Materials THREE.SmoothShading] or [page:Materials THREE.FlatShading]. Default is THREE.SmoothShading.
+ Fragment shader GLSL code. This is the actual code for the shader. In the example above,
+ the *vertexShader* and *fragmentShader* code is extracted from the DOM; it could be passed
+ as a string directly or loaded via AJAX instead.
</div>
- <h3>[property:Number linewidth]</h3>
- <div>Controls line thickness; only effective if the material is attached to a [page:Line]. Default is 1.</div>
- <div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+ <h3>[property:String index0AttributeName]</h3>
+ <div>
+ If set, this calls [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindAttribLocation gl.bindAttribLocation]
+ to bind a generic vertex index to an attribute variable.
+ Default is undefined.
- <h3>[property:Boolean wireframe]</h3>
+ </div>
+
+ <h3>[property:Boolean isShaderMaterial]</h3>
<div>
- Render geometry as wireframe (using GL_LINES instead of GL_TRIANGLES). Default is false (i.e. render as flat polygons).
+ Used to check whether this or derived classes are shader materials. Default is *true*.<br /><br />
+
+ You should not change this, as it used internally for optimisation.
</div>
- <h3>[property:Number wireframeLinewidth]</h3>
- <div>Controls wireframe thickness; only effective if the material is attached to a [page:Mesh] and *wireframe* is true. Default is 1.</div>
- <div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
- <h3>[property:Boolean fog]</h3>
- <div>Define whether the material color is affected by global fog settings; true to pass fog uniforms to the shader. Default is false.</div>
+
<h3>[property:Boolean lights]</h3>
<div>
Defines whether this material uses lighting; true to pass uniform data related to lighting to this shader. Default is false.
</div>
- <h3>[property:Boolean clipping]</h3>
+ <h3>[property:Float linewidth]</h3>
+ <div>Controls wireframe thickness. Default is 1.<br /><br />
+
+ Due to limitations in the [link:https://code.google.com/p/angleproject ANGLE layer],
+ on Windows platforms linewidth will always be 1 regardless of the set value.
+ </div>
+
+
+ <h3>[property:Boolean morphTargets]</h3>
<div>
- Defines whether this material supports clipping; true to let the renderer pass the clippingPlanes uniform. Default is false.
+ Defines whether the material uses morphTargets; true morphTarget attributes to this shader
</div>
- <h3>[property:Number vertexColors]</h3>
+ <h3>[property:boolean morphNormals]</h3>
<div>
- Define how the vertices are colored, by defining how the *colors* attribute gets populated. Possible values are [page:Materials THREE.NoColors], [page:Materials THREE.FaceColors] and [page:Materials THREE.VertexColors]. Default is THREE.NoColors.
+ Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry]
+ to the shader. Default is *false*.
</div>
+
+ <h3>[property:WebGLProgram program]</h3>
+ <div>
+ The compiled shader program associated with this material, generated by [page:WebGLRenderer].
+ You should not need to access this property.
+ </div>
+
+ <h3>[property:Number shading]</h3>
+ <div>
+ Define shading type, which determines whether normals are smoothed between vertices;
+ possible values are [page:Materials THREE.SmoothShading] or [page:Materials THREE.FlatShading]. Default is THREE.SmoothShading.
+ </div>
+
+
<h3>[property:Boolean skinning]</h3>
<div>
Define whether the material uses skinning; true to pass skinning attributes to the shader. Default is false.
</div>
- <h3>[property:Boolean morphTargets]</h3>
+ <h3>[property:Object uniforms]</h3>
<div>
- Defines whether the material uses morphTargets; true morphTarget attributes to this shader
- Generates a shallow copy of this material. Note that the vertexShader and fragmentShader are copied <em>by reference</em>, as are the definitions of the *attributes*; this means that clones of the material will share the same compiled [page:WebGLProgram]. However, the *uniforms* are copied <em>by value</em>, which allows you to have different sets of uniforms for different copies of the material.
+ Generates a shallow copy of this material. Note that the vertexShader and fragmentShader
+ are copied <em>by reference</em>, as are the definitions of the *attributes*; this means
+ that clones of the material will share the same compiled [page:WebGLProgram]. However, the
+ *uniforms* are copied <em>by value</em>, which allows you to have different sets of uniforms
"gl_FragColor = vec4( outgoingLight, diffuseColor.a );", // TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
+var $jscomp={scope:{},checkStringArgs:function(a,g,e){if(null==a)throw new TypeError("The 'this' value for String.prototype."+e+" must not be null or undefined");if(g instanceof RegExp)throw new TypeError("First argument to String.prototype."+e+" must not be a regular expression");return a+""}};
+$jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(a,g,e){if(e.get||e.set)throw new TypeError("ES3 does not support getters and setters.");a!=Array.prototype&&a!=Object.prototype&&(a[g]=e.value)};$jscomp.getGlobal=function(a){return"undefined"!=typeof window&&window===a?a:"undefined"!=typeof global&&null!=global?global:a};$jscomp.global=$jscomp.getGlobal(this);
+$jscomp.polyfill=function(a,g,e,l){if(g){e=$jscomp.global;a=a.split(".");for(l=0;l<a.length-1;l++){var k=a[l];k in e||(e[k]={});e=e[k]}a=a[a.length-1];l=e[a];g=g(l);g!=l&&null!=g&&$jscomp.defineProperty(e,a,{configurable:!0,writable:!0,value:g})}};
+$jscomp.polyfill("String.prototype.repeat",function(a){return a?a:function(a){var g=$jscomp.checkStringArgs(this,null,"repeat");if(0>a||1342177279<a)throw new RangeError("Invalid count value");a|=0;for(var l="";a;)if(a&1&&(l+=g),a>>>=1)g+=g;return l}},"es6-impl","es3");
+h!==b?(h=z(),h===b&&(h=null),h!==b?(x=d,d=a={x:a,y:f}):(c=d,d=b)):(c=d,d=b)):(c=d,d=b)):(c=d,d=b)):(c=d,d=b)):(c=d,d=b);if(d===b&&(d=c,a=v(),a!==b?(a=c,g.substr(c,3)===Aa?(f=Aa,c+=3):(f=b,0===n&&k(fb)),f!==b&&(x=a,f=!0),f!==b?(a=v(),a!==b?(a=t(),a!==b?(x=d,d=R[a],void 0===d?(console.log(a+" not found in nodeDefinitions"),a=d):a="function"===typeof d.clone?d.clone():d,d=a):(c=d,d=b)):(c=d,d=b)):(c=d,d=b)):(c=d,d=b),d===b)){var e;n++;a=c;d=J();if(d!==b){d=[];f=z();f===b&&(f=w(),f===b&&(f=c,h=r(),h!==
+b(a)})}var d=Array(a.length),e;for(e=0;e<a.length;e++)d[e]=a[e].description;d=1<a.length?d.slice(0,-1).join(", ")+" or "+d[a.length-1]:d[0];e=b?'"'+c(b)+'"':"end of input";return"Expected "+d+" but "+e+" found."}null!==c&&d(c);return new a(null!==b?b:f(c,e),c,e,g)}(null,ba,I<g.length?g.charAt(I):null,I<g.length?l(I,I+1):l(I,I));}}}();var TWEEN=TWEEN||function(){var a=[];return{getAll:function(){return a},removeAll:function(){a=[]},add:function(g){a.push(g)},remove:function(g){g=a.indexOf(g);-1!==g&&a.splice(g,1)},update:function(g,e){if(0===a.length)return!1;var l=0;for(g=void 0!==g?g:TWEEN.now();l<a.length;)a[l].update(g)||e?l++:a.splice(l,1);return!0}}}();
+TWEEN.Tween=function(a){var g={},e={},l={},k=1E3,y=0,A=!1,D=!1,C=0,q=null,p=TWEEN.Easing.Linear.None,H=TWEEN.Interpolation.Linear,m=[],t=null,r=!1,F=null,O=null,u=null,N;for(N in a)g[N]=parseFloat(a[N],10);this.to=function(a,g){void 0!==g&&(k=g);e=a;return this};this.start=function(k){TWEEN.add(this);D=!0;r=!1;q=void 0!==k?k:TWEEN.now();q+=C;for(var m in e){if(e[m]instanceof Array){if(0===e[m].length)continue;e[m]=[a[m]].concat(e[m])}void 0!==g[m]&&(g[m]=a[m],!1===g[m]instanceof Array&&(g[m]*=1),
+z)if(0<y){isFinite(y)&&y--;for(w in l)"string"===typeof e[w]&&(l[w]+=parseFloat(e[w],10)),A&&(z=l[w],l[w]=e[w],e[w]=z),g[w]=l[w];q=u+C}else{null!==O&&O.call(a);u=0;for(w=m.length;u<w;u++)m[u].start(q+k);return!1}return!0}};
+VrmlParser.Renderer.ThreeJs.Animation.prototype={update:function(a){for(var g in this.animations)if(this.animations.hasOwnProperty(g))(0,this.animations[g])(a)},addAnimation:function(a,g){this.animations[a]=g},removeAnimation:function(a){delete this.animations[a]},getRoutesForEvent:function(a){a=scene.userData.routes[a];for(var g=0;g<a.length;g++);return a},findTargetRoutes:function(a){var g=[];if("undefined"===typeof a)return g;var e=scene.userData.routes;if("undefined"===typeof e[a.target.name])return a;
+a=e[a.target.name];for(e=0;e<a.length;e++){var l=this.findTargetRoutes(a[e]);g.push(l)}return g},log:function(a){this.debug&&console.log(a)},findSensor:function(a,g){if(null===a)return this.log("Cannot find a sensor of type "+g+" in null"),!1;var e;a:{if(void 0!==a.children)for(e=0;e<a.children.length;e++){var l=a.children[e];if(void 0!==l&&"undefined"!==typeof l.userData.originalVrmlNode&&g===l.userData.originalVrmlNode.node){e=l.name;this.log(g+": "+e);break a}}e=!1}if(e)return e;this.log("No "+
+g+" found amongst the children of the following node:");this.log(a);if("undefined"===typeof a.parent||null===a.parent)return this.log("We cannot go up the tree any further"),!1;this.log("Searching up the tree");return this.findSensor(a.parent,g)},addClickSupport:function(a,g){projector=new THREE.Projector;var e=this;g.domElement.addEventListener("mousedown",function(l){var k=void 0==l.offsetX?l.layerX:l.offsetX;l=void 0==l.offsetY?l.layerY:l.offsetY;var y=new THREE.Vector3;y.set(k/g.domElement.width*
+2-1,2*-(l/g.domElement.height)+1,.5);y.unproject(a);k=(new THREE.Raycaster(a.position,y.sub(a.position).normalize())).intersectObjects(scene.children,!0);if(k.length){var A=e.findSensor(k[0].object,"TouchSensor");if(!1!==A){k=e.getRoutesForEvent(A).slice(0);for(k=e.findTargetRoutes(k.pop());"function"===typeof k.pop;)if(k=k.pop(),"undefined"===typeof k){e.log("no target route found for "+A);return}e.log(k);l=scene.getObjectByName(k.source.name).userData.originalVrmlNode;void 0===VrmlParser.Renderer.ThreeJs.Animation[l.node]?
+e.log(l.node+" is not yet supported"):(l=new VrmlParser.Renderer.ThreeJs.Animation[l.node](l,e.debug),k=scene.getObjectByName("surrounding_"+k.target.name),k=l.getCallback(k,function(){e.removeAnimation(A)}),e.addAnimation(A,k))}}},!1)}};VrmlParser.Renderer.ThreeJs.VrmlNode=VrmlParser.Renderer.ThreeJs.VrmlNode||{};VrmlParser.Renderer.ThreeJs.Animation.OrientationInterpolator=function(a,g){this.key=a.key;this.keyValue=a.keyValue;this.debug=g?!0:!1;this.index=1;this.tweenObj=this.target=this.finish=null};
+VrmlParser.Renderer.ThreeJs.Animation.OrientationInterpolator.prototype={log:function(a){this.debug&&console.log(a)},complete:function(){this.index++;this.index>=this.keyValue.length?(this.log("finish at index "+this.index),this.finish()):this.tween()},tween:function(){var a=this,g=this.keyValue[this.index],e=g.radians;this.log("Animating from "+this.target.rotation.y+" to "+e);var l=new THREE.Quaternion,g=new THREE.Vector3(g.x,g.y,g.z);l.setFromAxisAngle(g,e);this.tweenObj=(new TWEEN.Tween(this.target.quaternion)).to(l).start(+new Date).onComplete(function(){a.complete()})},
+this.keyValue[a];return new THREE.Vector3(a.x,a.y,a.z)}};VrmlParser.Renderer.ThreeJs.VrmlNode.NavigationInfo=function(a,g){this.debug=g;this.node=a;this.node.has=function(a){return"undefined"!==typeof this[a]&&null!==this[a]};this.controls=null};