6

リソースを大量に消費するフラグメント シェーダーを three.js で実行しています。ローエンドのカードでもシェーダーをスムーズに実行できるように、レンダリング サイズを 800 * 600 に設定しました。

レンダリング キャンバスを次のように設定しています。

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

私が持っているbody要素について

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

次に、css ヘッダーで width: 100%; を実行しています。高さ: 100%;

Three.js は canvas1 の上にサイズ 800*600 の新しいキャンバスを作成するため、これはあまり役に立ちません。レンダリング サイズに触れずに、Three.js レンダリング キャンバスを Web ブラウザのウィンドウ サイズに合わせてズームする最善の方法は何ですか?

4

1 に答える 1

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

canvas1 をレンダリング ターゲットとして WebGLRenderer に渡します。

次に削除します: document.body.appendChild( renderer.domElement ); DOM には既に canvas1 要素があるためです。

Three.js のドキュメントは、{canvas:} でパラメーターを渡すのが少し難しい場合があります。

于 2013-10-22T20:47:39.343 に答える