Three.js arka planını şeffaf veya başka bir renge değiştirme

Tuvalimin varsayılan arka plan rengini siyahtan şeffafa / başka bir renge değiştirmeye çalışıyorum - ama şans yok.

HTML'im:

<canvas id="canvasColor">

CSS'im:

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

Aşağıdaki çevrimiçi örnekte görebileceğiniz gibi, tuvale eklenmiş bir animasyon var, bu yüzden sadece bir opaklık yapamam: 0; kimlik üzerinde.

Canlı ön izleme: http://devsgs.com/preview/test/particle/

Varsayılan siyahın üzerine nasıl yazılacağına dair bir fikriniz var mı?

Three.js kullanmaya başladığımda bununla karşılaştım. Aslında bir javascript sorunu. Şu anda var:

renderer.setClearColorHex( 0x000000, 1 );

sizin de threejsinit fonksiyonu. Şununla değiştirin:

renderer.setClearColorHex( 0xffffff, 1 );

Güncelleme: Güncellenmiş çözüm için HdN8'e teşekkürler:

renderer.setClearColor( 0xffffff, 0);

Güncelleme # 2: WestLangley tarafından başka, benzer bir soruda belirtildiği gibi - şimdi setClearColor()fonksiyonla bağlantılı olarak yeni bir WebGLRenderer örneği oluştururken aşağıdaki kodu kullanmanız gerekir :

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

Güncelleme # 3: Bay doob r78, sahnenizin arka plan rengini ayarlamak için alternatif olarak aşağıdaki kodu kullanabileceğinizi belirtiyor :

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

Tam cevap: (r71 ile test edildi)

Arka plan rengi ayarlamak için şunları kullanın:

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

Şeffaf bir arka plan istiyorsanız, önce oluşturucunuzda alfa'yı etkinleştirmeniz gerekir:

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

Daha fazla bilgi için belgeleri görüntüleyin .

Şeffaflık için bu da zorunludur: three.jsrenderer = new THREE.WebGLRenderer( { alpha: true } ) ile Şeffaf arka plan aracılığıyla

Three.js editörü aracılığıyla bir sahne oluşturduğumda, oluşturucuyu bir alfa değeri ve net renkle ayarlamak için yalnızca doğru yanıt kodunu (yukarıda) kullanmak zorunda kalmadığımı, uygulamaya girmem gerektiğini öğrendim .json dosyası ve "Sahne" Nesnenin "arka plan" ayrıntısını bulup ayarlayın: "background: null".

Three.js düzenleyiciden dışa aktarma işlemi başlangıçta "arka plan" olarak ayarlanmıştı: 0

2020'de r115 kullanarak bununla çok iyi çalışıyor:

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

Ayrıca, three.js düzenleyicisini kullanıyorsanız, index.html'de arka plan rengini de temizlemek için ayarlamayı unutmayın.

background-color:#00000000