web-dev-qa-db-ja.com

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/

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

csshtml5canvashtml5-canvasthree.js
104
user1231561

Three.jsの使用を開始したときにもこの問題に出会いました。これは実際にはJavaScriptの問題です。現在、次のものがあります：

renderer.setClearColorHex( 0x000000, 1 );

threejs init関数で。次のように変更します。

renderer.setClearColorHex( 0xffffff, 1 );

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

renderer.setClearColor( 0xffffff, 0);

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

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

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

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

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

ドキュメントを表示 詳細については。

18
Yotam Omer

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

17
Peter Ehrlich

Three.jsエディターを使用してシーンを作成したとき、正しい答えのコード（上記）を使用するだけでなく、アルファ値とクリアカラーを使用してレンダラーを設定する必要があることに気付きました。 .jsonファイルで「Scene」オブジェクトの「background」属性を見つけ、"background: null"に設定します。

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

2
iethatis

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

background-color:#00000000
0
Ty Irvine