Three.js：レンダリングキャンバスのサイズを変更する（GPUの空腹のフラグメントシェーダ）

Question

リソースが浪費されているfragment shaderをthree.jsで実行しています。ローダーカードでもシェーダーを滑らかに保つためにレンダリングサイズを800 * 600に設定しました。

私はこのような私のレンダリングキャンバス設定しています：body要素で

var canvas1 = document.getElementById('canvas1') ; 
renderer = new THREE.WebGLRenderer(canvas1); 
renderer.setSize(800, 600); 
renderer.autoClear = false; 
document.body.appendChild(renderer.domElement); 

を私はその後、CSSヘッダーの幅をやっている

<canvas id='canvas1' style=" position: absolute; left: 0; top: 0; z-index: -10; background-color: #000000; "></canvas> 

持っている：100％;高さ：100％;

Three.jsがcanvas1の上にサイズ800 * 600の新しいキャンバスを作成するので、これはあまり役に立ちません。 レンダリングサイズに触れることなく、Three.jsレンダリングキャンバスをズームしてWebブラウザのウィンドウサイズに一致させる最良の方法はありますか？

Answer 1

renderer = new THREE.WebGLRenderer({ canvas: canvas1 }); 

レンダリング対象としてcanvas1〜WebGLRendererを渡します。

次に、削除します。 document.body.appendChild（renderer.domElement）; 私たちは既にdomのcanvas1要素を持っています。

時々、3つのドキュメントがちょっと変わって、 {キャンバス：}、 がパラメータを渡すことがあります。