three.jsの背景を透明色または他の色に変更する

私はキャンバスのデフォルトの背景色のように見えるものを黒から透明/その他の色に変更しようとしていますが、運が悪いです。

私のHTML：

<canvas id="canvasColor">

私のCSS：

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

次のオンラインの例でわかるように、キャンバスにアニメーションを追加しているので、不透明度だけを行うことはできません。ID上。

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

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

three.jsを使い始めたときも、この問題に遭遇しました。これは実際にはJavaScriptの問題です。あなたは現在持っています：

renderer.setClearColorHex( 0x000000, 1 );

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

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 );

完全な回答：（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

詳細については、ドキュメントをご覧ください。

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

three.jsエディターでシーンを作成したときに、正しい回答のコード（上記）を使用するだけでなく、アルファ値と明確な色でレンダラーを設定する必要があったため、アプリにアクセスする必要がありました。 .jsonファイルを見つけて、「Scene」オブジェクトの「background」属性を見つけて、次のように設定します "background: null"。

Three.jsエディターからのエクスポートでは、元々「バックグラウンド」に設定されていました：0

2020年にr115を使用すると、次のように非常にうまく機能します。

const renderer = new THREE.WebGLRenderer({ alpha: true }); const scene = new THREE.Scene(); scene.background = null;

また、three.jsエディターを使用する場合は、index.htmlでも背景色をクリアに設定することを忘れないでください。

background-color:#00000000