147

キャンバスのデフォルトの背景色と思われるものを黒から透明/他の色に変更しようとしましたが、うまくいきません。

私のHTML：

<canvas id="canvasColor">

私のCSS：

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

次のオンラインの例でわかるように、キャンバスにいくつかのアニメーションが追加されているため、不透明度を行うことはできません: 0; IDで。

ライブ プレビュー: http://devsgs.com/preview/test/particle/

デフォルトの黒を上書きする方法はありますか?

4

7 に答える 7

286

three.jsも使い始めたときにこれに出くわしました。それは実際にはjavascriptの問題です。あなたは現在持っています:

renderer.setClearColorHex( 0x000000, 1 );

あなたのthreejsinit関数で。次のように変更します。

renderer.setClearColorHex( 0xffffff, 1 );

更新:更新されたソリューションを提供してくれた HdN8 に感謝します。

renderer.setClearColor( 0xffffff, 0);

更新 #2:別の同様の質問で WestLangley が指摘したように、setClearColor()関数と組み合わせて新しい WebGLRenderer インスタンスを作成するときに、以下のコードを使用する必要があります。

var renderer = new THREE.WebGLRenderer({ alpha: true });

更新 #3:r78 Mr.doobは、代わりに以下のコードを使用してシーンの背景色を設定できることを指摘しています。

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );
于 2013-04-23T19:02:20.457 に答える
28

完全な答え：（r71でテスト済み）

背景色を設定するには:

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

透明な背景が必要な場合は、最初にレンダラーでアルファを有効にする必要があります。

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

詳細については、ドキュメントを参照してください。

于 2015-07-26T11:01:36.007 に答える
21

透明性のために、これも必須です: three.js を使用した透明な背景renderer = new THREE.WebGLRenderer( { alpha: true } )経由

于 2014-02-04T21:45:51.403 に答える