[解決済み] three.jsの背景を透明や他の色に変更する。

質問

キャンバスのデフォルトの背景色を黒から透明や他の色に変更しようとしていますが、うまくいきません。

私のHTML

<canvas id="canvasColor">

私のCSSです。

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

次のオンライン例でわかるように、私はキャンバスにアニメーションを追加しているので、idにopacity: 0;を適用することはできません。

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

デフォルトの黒を上書きする方法があれば教えてください。

解決方法は？

私もthree.jsを使い始めた頃、これに出会いました。実はこれ、javascriptの問題なんです。現在、あなたは

renderer.setClearColorHex( 0x000000, 1 );

を入力します。 threejs init関数を使用します。に変更してください。

renderer.setClearColorHex( 0xffffff, 1 );

更新しました。 HdN8さん、更新された解決策をありがとうございました。

renderer.setClearColor( 0xffffff, 0);

アップデートその2。 でWestLangleyさんが指摘されているように 別の、似たような質問 - を使用すると、新しい WebGLRenderer インスタンスを作成するときに、以下のコードを使用する必要があります。 setClearColor() 関数を使用します。

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

アップデートその3。 doob さんのご指摘により r78 シーンの背景色を設定するには、以下のようなコードを使用することもできます。

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );