|
@@ -9,35 +9,36 @@
|
|
<body>
|
|
<body>
|
|
<h1>[name]</h1>
|
|
<h1>[name]</h1>
|
|
|
|
|
|
- <div class="desc">The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL,
|
|
|
|
- but draws it using the (slower) <a href="http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/">Canvas 2D Context</a> API.</div>
|
|
|
|
- <div class="desc">This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:</div>
|
|
|
|
- <code>
|
|
|
|
- function webglAvailable() {
|
|
|
|
- try {
|
|
|
|
- var canvas = document.createElement( 'canvas' );
|
|
|
|
- return !!( window.WebGLRenderingContext && (
|
|
|
|
- canvas.getContext( 'webgl' ) ||
|
|
|
|
- canvas.getContext( 'experimental-webgl' ) )
|
|
|
|
- );
|
|
|
|
- } catch ( e ) {
|
|
|
|
- return false;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if ( webglAvailable() ) {
|
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
|
- } else {
|
|
|
|
- renderer = new THREE.CanvasRenderer();
|
|
|
|
- }
|
|
|
|
- </code>
|
|
|
|
<div class="desc">
|
|
<div class="desc">
|
|
|
|
+ The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL, but draws it using the (slower) <a href="http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/">Canvas 2D Context</a> API.<br /><br />
|
|
|
|
+ This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:
|
|
|
|
+
|
|
|
|
+ <code>
|
|
|
|
+ function webglAvailable() {
|
|
|
|
+ try {
|
|
|
|
+ var canvas = document.createElement( 'canvas' );
|
|
|
|
+ return !!( window.WebGLRenderingContext && (
|
|
|
|
+ canvas.getContext( 'webgl' ) ||
|
|
|
|
+ canvas.getContext( 'experimental-webgl' ) )
|
|
|
|
+ );
|
|
|
|
+ } catch ( e ) {
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if ( webglAvailable() ) {
|
|
|
|
+ renderer = new THREE.WebGLRenderer();
|
|
|
|
+ } else {
|
|
|
|
+ renderer = new THREE.CanvasRenderer();
|
|
|
|
+ }
|
|
|
|
+ </code>
|
|
|
|
+
|
|
Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 <canvas> tag.
|
|
Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 <canvas> tag.
|
|
- The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br />
|
|
|
|
|
|
+ The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br /><br />
|
|
|
|
+
|
|
Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
|
|
Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
-
|
|
|
|
<h2>Constructor</h2>
|
|
<h2>Constructor</h2>
|
|
|
|
|
|
|
|
|
|
@@ -45,63 +46,56 @@
|
|
<div>parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.</div>
|
|
<div>parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.</div>
|
|
|
|
|
|
<div>
|
|
<div>
|
|
- canvas — A [page:Canvas] where the renderer draws its output.<br />
|
|
|
|
- devicePixelRatio — The device its pixelRatio.<br />
|
|
|
|
|
|
+ canvas — A [page:Canvas] where the renderer draws its output.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2>Properties</h2>
|
|
<h2>Properties</h2>
|
|
|
|
|
|
|
|
+ <h3>[property:Object info]</h3>
|
|
|
|
|
|
- <h3>[property:Object info]</h3>
|
|
|
|
-
|
|
|
|
- <div>An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</div>
|
|
|
|
<div>
|
|
<div>
|
|
- <ul>
|
|
|
|
- <li>render:
|
|
|
|
- <ul>
|
|
|
|
- <li>vertices</li>
|
|
|
|
- <li>faces</li>
|
|
|
|
- </ul>
|
|
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
|
|
+ An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</div>
|
|
|
|
+ <ul>
|
|
|
|
+ <li>render:
|
|
|
|
+ <ul>
|
|
|
|
+ <li>vertices</li>
|
|
|
|
+ <li>faces</li>
|
|
|
|
+ </ul>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <h3>[property:DOMElement domElement]</h3>
|
|
|
|
-
|
|
|
|
- <div>A [page:Canvas] where the renderer draws its output.<br />
|
|
|
|
- This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.</div>
|
|
|
|
|
|
+ <h3>[property:DOMElement domElement]</h3>
|
|
|
|
|
|
- <h3>[property:number devicePixelRatio]</h3>
|
|
|
|
<div>
|
|
<div>
|
|
- The pixel ration of the devices.
|
|
|
|
- </div>
|
|
|
|
|
|
+ A [page:Canvas] where the renderer draws its output.<br />
|
|
|
|
+ This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.
|
|
|
|
+ </div>
|
|
|
|
|
|
<h3>[property:Boolean autoClear]</h3>
|
|
<h3>[property:Boolean autoClear]</h3>
|
|
<div>
|
|
<div>
|
|
- Defines whether the renderer should automatically clear its output before rendering.
|
|
|
|
- </div>
|
|
|
|
|
|
+ Defines whether the renderer should automatically clear its output before rendering.
|
|
|
|
+ </div>
|
|
|
|
|
|
<h3>[property:Boolean sortObjects]</h3>
|
|
<h3>[property:Boolean sortObjects]</h3>
|
|
<div>
|
|
<div>
|
|
- Defines whether the renderer should sort objects. Default is true.
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- Note: Sorting is used to attempt to properly render objects that have some degree of transparency. By definition, sorting objects may not work in all cases. Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
|
|
|
|
- </div>
|
|
|
|
|
|
+ Defines whether the renderer should sort objects. Default is true.<br />
|
|
|
|
+ Note: Sorting is used to attempt to properly render objects that have some degree of transparency. By definition, sorting objects may not work in all cases. Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
|
|
|
|
+ </div>
|
|
|
|
|
|
<h3>[property:boolean sortElements]</h3>
|
|
<h3>[property:boolean sortElements]</h3>
|
|
<div>
|
|
<div>
|
|
- Defines whether the renderer should sort the face of each object. Default is true.
|
|
|
|
- </div>
|
|
|
|
|
|
+ Defines whether the renderer should sort the face of each object. Default is true.
|
|
|
|
+ </div>
|
|
|
|
|
|
- <h2>Methods</h2>
|
|
|
|
|
|
|
|
|
|
+ <h2>Methods</h2>
|
|
|
|
|
|
- <h3>[method:null render]( [page:Scene scene], [page:Camera camera])</h3>
|
|
|
|
|
|
+ <h3>[method:null render]([page:Scene scene], [page:Camera camera])</h3>
|
|
<div>
|
|
<div>
|
|
- scene -- The scene to render. <br />
|
|
|
|
- camera -- the camera to view the scene.
|
|
|
|
|
|
+ scene -- The scene to render. <br />
|
|
|
|
+ camera -- the camera to view the scene.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
Render a scene using a camera.
|
|
Render a scene using a camera.
|
|
@@ -109,48 +103,47 @@
|
|
|
|
|
|
<h3>[method:null clear]()</h3>
|
|
<h3>[method:null clear]()</h3>
|
|
<div>
|
|
<div>
|
|
- Tells the renderer to clear its color drawing buffer with the clearcolor.
|
|
|
|
|
|
+ Tells the renderer to clear its color drawing buffer with the clearcolor.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>[method:null setClearColor]([page:Color color], [page:number alpha])</h3>
|
|
<h3>[method:null setClearColor]([page:Color color], [page:number alpha])</h3>
|
|
<div>
|
|
<div>
|
|
- color -- The color to clear the canvas with. <br />
|
|
|
|
- alpha -- The alpha channel to clear the canvas with.
|
|
|
|
|
|
+ color -- The color to clear the canvas with. <br />
|
|
|
|
+ alpha -- The alpha channel to clear the canvas with.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- This set the clearColor and the clearAlpha.
|
|
|
|
|
|
+ This set the clearColor and the clearAlpha.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
- <h3>[method:null setSize]([page:Number width], [page:Number height], [page:boolean updateStyle])</h3>
|
|
|
|
|
|
+ <h3>[method:null setSize]([page:Number width], [page:Number height])</h3>
|
|
<div>
|
|
<div>
|
|
- width -- The width of the drawing canvas. <br />
|
|
|
|
- height -- The height of the drawing canvas. <br />
|
|
|
|
- updateStyle -- If set, update the css of the canvas too.
|
|
|
|
|
|
+ width -- The width of the drawing canvas. <br />
|
|
|
|
+ height -- The height of the drawing canvas.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
|
|
|
|
|
|
+ This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>[method:null setClearColorHex]([page:number hex], [page:number alpha])</h3>
|
|
<h3>[method:null setClearColorHex]([page:number hex], [page:number alpha])</h3>
|
|
<div>
|
|
<div>
|
|
- hex -- The the hexadecimal value of the color to clear the canvas with. <br />
|
|
|
|
- alpha -- The alpha channel to clear the canvas with.
|
|
|
|
|
|
+ hex -- The the hexadecimal value of the color to clear the canvas with. <br />
|
|
|
|
+ alpha -- The alpha channel to clear the canvas with.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- This set the clearColor and the clearAlpha.
|
|
|
|
|
|
+ This set the clearColor and the clearAlpha.
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
<h3>[method:number getClearColorHex]()</h3>
|
|
<h3>[method:number getClearColorHex]()</h3>
|
|
<div>
|
|
<div>
|
|
- Returns the [page:number hex] color.
|
|
|
|
|
|
+ Returns the [page:number hex] color.
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
<h3>[method:number getClearAlpha]()</h3>
|
|
<h3>[method:number getClearAlpha]()</h3>
|
|
<div>
|
|
<div>
|
|
- Returns the alpha value.
|
|
|
|
|
|
+ Returns the alpha value.
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
<h2>Empty Methods to Maintain Compatibility with [page:WebglRenderer]</h2>
|
|
<h2>Empty Methods to Maintain Compatibility with [page:WebglRenderer]</h2>
|
|
<div>
|
|
<div>
|
|
[method:null clearColor]()<br/>
|
|
[method:null clearColor]()<br/>
|