【three.js詳細の2】レンダラー編

6956 ワード

レンダリング webGL httml 5

この文章ではthreeについて詳しく説明する.jsでのレンダラーの設定方法.
three.jsドキュメントのレンダラーのブランチは次のとおりです.
Renderers
CanvasRenderer
DOMRenderer
SVGRenderer
WebGLRenderer
WebGLRenderTarget
WebGLRenderTargetCube
WebGLShaders
threeが見えます.jsは多くのレンダリング方法を提供しています.もちろんWebGLRendererを選択しますが、ここではCanvasRendererとWebGLRendererの2つのレンダリング方法を比較します.
前の記事の例では、WebGLレンダラーを完全に使用できます.
renderer=new THREE.WebGLRenderer();
Canvasレンダラーに置き換え:
renderer=new THREE.CanvasRenderer();
これによりcanvasは2 dでレンダリングされ、以下は効果の比較(前者はWebGLRendererでレンダリング)です.
明らかに、WebGLはレンダリング効果に優れており、WebGLのレンダリングはあなたが美しいシーンを作ることを最大限に表現することができます.デバイスがそれをサポートしている場合、このレンダラーはCanvasRendererよりも優れた性能を持っています.逆に、CanvasRendererはより良い互換性を持っています.

//  Three.js   :WebGLRenderer
　　　　　　　//      
             var renderer;              function initThree() {                 //       
                width = document.getElementById('canvas3d').clientWidth;//    「canvas3d」  
                height = document.getElementById('canvas3d').clientHeight;//    「canvas3d」  
                //       ：WebGLRenderer
                renderer=new THREE.WebGLRenderer({                     antialias:true,//antialias:true/false       
                    precision:"highp",//precision:highp/mediump/lowp      
                    alpha:true,//alpha:true/false           
                    premultipliedAlpha:false,//?
                    stencil:false,//?
                    preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false        
                    maxLights:1//maxLights:     
                    });                 //        （        ）
                renderer.setSize(width, height );                 //   【canvas】     【canvas3d】    。
                document.getElementById('canvas3d').appendChild(renderer.domElement);                 //  canvas   (clearColor)       （clearAlpha）
                renderer.setClearColor(0x000000,0.5);               }

これは、前回の記事でレンダラーを設定したjsコードです.次の手順があります.
1.レンダラーオブジェクトを宣言し、new THREEを使用します.WebGLRenderer()を使用して、WebGLレンダラーを新規作成します.
WebGLRenderer()には、公式ドキュメントから設定できるパラメータがあります.
antialias:
値:true/false
意味:アンチエイリアシングをオンにするかどうか、trueに設定してアンチエイリアシングをオンにします.
precision:
値:highp/mediump/lowp
意味:シェーディング精度選択.
alpha:
値:true/false
意味:背景色の透明度を設定できますか.
premultipliedAlpha:
値:true/false
意味:?
stencil:
値:true/false
意味:?
preserveDrawingBuffer:
値:true/false
意味:図面バッファを保存するかどうか、trueに設定するとcanvas図面のバッファを抽出できます.
maxLights:
値:数値int
意味:最大ライト数、シーンに追加できるライトの数.
2.レンダラーの幅を設定し、renderer.を使用します.setSize(width,height)を設定します.

3.生成したcanvas要素をコンテナ要素に追加します.canvasオブジェクトの取得方法はrenderer.domElement;
4.canvas背景色(clearColor)と背景色透明度(clearAlpha)を設定し、renderer.setClearColor(clearColor,clearAlpha);
では以上three.jsレンダラーのいくつかの一般的な設定は、さまざまなパラメータが果たす役割を実際に確認することができます.

3 D回転万丈光牢

js配列削除要素