Mengubah background three.js menjadi transparan atau warna lain

122

Saya telah mencoba untuk mengubah apa yang tampaknya menjadi warna latar belakang default kanvas saya dari hitam menjadi transparan / warna lain - tetapi tidak berhasil.

HTML saya:

<canvas id="canvasColor">

CSS saya:

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

Seperti yang Anda lihat pada contoh online berikut, saya memiliki beberapa animasi yang ditambahkan ke kanvas, jadi tidak bisa hanya melakukan opacity: 0; di id.

Pratinjau langsung: http://devsgs.com/preview/test/particle/

Ada ide bagaimana menimpa hitam default?

css html canvas html5-canvas three.js pengguna1231561
sumber
Pada awalnya function init() {, kanvas Anda berwarna merah! Three.js mengubahnya menjadi hitam dengan setClearColorHex!
Simon Sarris

Jawaban:

237

Saya menemukan ini ketika saya mulai menggunakan three.js juga. Ini sebenarnya masalah javascript. Anda saat ini memiliki:

renderer.setClearColorHex( 0x000000, 1 );

dalam threejsfungsi init Anda . Ubah menjadi:

renderer.setClearColorHex( 0xffffff, 1 );

Pembaruan: Terima kasih kepada HdN8 untuk solusi yang diperbarui:

renderer.setClearColor( 0xffffff, 0);

Pembaruan # 2: Seperti yang ditunjukkan oleh WestLangley di pertanyaan lain yang serupa - Anda sekarang harus menggunakan kode di bawah ini saat membuat instance WebGLRenderer baru dalam hubungannya dengan setClearColor()fungsi:

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

Pembaruan # 3: Mr. doob menunjukkan bahwa karena r78Anda dapat menggunakan kode di bawah ini untuk mengatur warna latar belakang adegan Anda:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );
Joe
sumber
Anda memang benar. Kanvasnya memang transparan pr. default, sangat memalukan saya. Terima kasih banyak telah menunjukkan di mana harus mengubahnya - ini terlihat bagus sekarang!
pengguna1231561
5
Bagus, ini sedikit mengganggu saya juga. Saya menemukan di skrip three.js metode ini segera usang, gunakan setClearColor (0xffffff, 1) sebagai gantinya.
HdN8
@ HdN8 - terima kasih atas pembaruannya, saya telah menambahkannya ke jawabannya.
Joe
1
setClearColor (0xffffff, 1) tidak berfungsi untuk saya (membuatnya putih) tetapi setClearColor (0xffffff, 0) berfungsi (membuatnya transparan)
Ronen Rabinovici
11
Karena r78Anda dapat melakukannyascene.background = new THREE.Color( 0xff0000 );
mrdoob
21

Jawaban lengkap: (Diuji dengan r71)

Untuk mengatur penggunaan warna latar belakang:

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

Jika Anda menginginkan latar belakang transparan, Anda harus mengaktifkan alfa di perender Anda terlebih dahulu:

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

Lihat dokumen untuk info lebih lanjut.

Yotam Omer
sumber
3

Saya menemukan bahwa ketika saya membuat adegan melalui editor three.js, saya tidak hanya harus menggunakan kode jawaban yang benar (di atas), untuk menyiapkan perender dengan nilai alfa dan warna yang jelas, saya harus masuk ke aplikasi .json dan temukan atribut "Scene" Object's "background" dan setel ke: "background: null" .

Ekspor dari editor Three.js awalnya disetel ke "background": 0

iethatis
sumber
3

Pada tahun 2020 menggunakan r115 ini bekerja sangat baik dengan ini:

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

Sayap gelap
sumber
-1

Saya juga ingin menambahkan bahwa jika menggunakan editor three.js jangan lupa untuk mengatur warna latar belakang menjadi jelas juga di index.html.

background-color:#00000000
Ty Irvine
sumber