Three.js の背景を透明またはカスタムカラーにするにはどうすればよいですか?

透明またはカラフルな Three.js 背景: 解決策

デフォルトでは、Three.js キャンバスの背景は黒でレンダリングされます。ただし、ビジュアライゼーションを強化するために、透明またはカスタム色の背景が必要な場合があります。背景を変更しようとして失敗した場合、この記事では解決策を検討します。

問題

ユーザーが説明したように、CSS の不透明度を使用して背景色を設定するまた、背景のプロパティはキャンバスには影響しません。これは、黒い背景が Three.js 自体によってレンダリングされるためです。

解決策

解決策は、Three.js コード内で次の設定を操作することにあります。

renderer.setClearColorHex(0x000000, 1);

背景を透明にするには、上記の行を変更しますto:

renderer.setClearColor(0xffffff, 0);

ただし、この変更は透明性を確保するだけです。あなたのシーンは見えなくなります。シーンを透明な背景でレンダリングするには、alpha プロパティを true に設定して WebGLRenderer を使用する必要があります:

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

カスタム カラーの背景の場合は、次のコードを使用できます:

renderer.setClearColorHex(0xff0000, 1);

または、背景色を THREE.Color オブジェクトとして設定できます。

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

Byこれらの変更を実装すると、Three.js ビジュアライゼーションの背景を透明にするか任意の色にするか制御できるようになります。

以上がThree.js の背景を透明またはカスタムカラーにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。