[解決済み] three.jsで背景を透明にする
2022-02-10 10:15:21
質問
コードはうまくいくのですが、three.jsでキャンバスに透明な背景を設定するのに問題があります。私は使用しています。
Background.renderer.setClearColor(0xffffff, 0);
しかし、そうすると背景が黒くなってしまいます。どうしたら透明になりますか?
コードです。
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var p;
var windowHalfX = site.Width / 2;
var windowHalfY = site.Height / 2;
Background.camera = new THREE.PerspectiveCamera( 35, site.Width / site.Height, 1, 2000 );
Background.camera.position.z = 300;
//camera.position.y = 200;
// scene
Background.scene = new THREE.Scene();
// texture
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log('webgl, twice??');
//console.log( item, loaded, total );
};
// particles
var p_geom = new THREE.Geometry();
var p_material = new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 1
});
// model
var loader = new THREE.OBJLoader( manager );
loader.load( site.base_url + '/assets/models/head.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
// child.material.map = texture;
var scale = 6;
$(child.geometry.vertices).each(function() {
p_geom.vertices.push(new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale));
})
}
});
Background.scene.add(p)
});
p = new THREE.ParticleSystem(
p_geom,
p_material
);
Background.renderer = new THREE.WebGLRenderer();
Background.renderer.setSize( site.Width, site.Height );
Background.renderer.setClearColor(0xffffff, 0);
$('.particlehead').append(Background.renderer.domElement);
$('#content').on('mousemove', onDocumentMouseMove);
site.window.on('resize', onWindowResize);
function onWindowResize() {
windowHalfX = site.Width / 2;
windowHalfY = site.Height / 2;
//console.log(windowHalfX);
Background.camera.aspect = site.Width / site.Height;
Background.camera.updateProjectionMatrix();
Background.renderer.setSize( site.Width, site.Height );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
//console.log(mouseX)
}
Background.animate = function() {
//console.log('animate2');
Background.ticker = TweenMax.ticker;
Background.ticker.addEventListener("tick", Background.animate);
render();
}
function render() {
Background.camera.position.x += ( (mouseX * .5) - Background.camera.position.x ) * .05;
Background.camera.position.y += ( -(mouseY * .5) - Background.camera.position.y ) * .05;
Background.camera.lookAt( Background.scene.position );
Background.renderer.render( Background.scene, Background.camera );
}
render();
解決方法は?
three.jsで背景を透明にしたい場合は、背景を透明にするためのパラメータを
alpha
パラメータを
WebGLRenderer
のコンストラクタを使用します。
var renderer = new THREE.WebGLRenderer( { alpha: true } );
クリアカラーはデフォルト値のままでOKです。
renderer.setClearColor( 0x000000, 0 ); // the default
three.js r.71
関連
-
[解決済み】getElementByIdはnullを返す?[クローズド]
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] JavaScriptで2つの日付を比較する
-
[解決済み】Androidで透明なActivityを作成する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】Uncaught SyntaxError: JSON の位置 0 に予期しないトークン u があります。
-
[解決済み】module.exports "モジュールが定義されていません"
-
[解決済み] three.jsの背景を透明や他の色に変更する。