Melukis nilai CSS background-image apa pun di belakang scene, gradien atau gambar, dengan membuat warna clear scene transparan dan menata gaya kanvas.
Nilai background image CSS
Gaya yang diterapkan
Melukis gradien lurus antara dua warna di belakang scene, ke arah yang diberikan, dengan titik hentinya sebagai persentase di sepanjangnya.
Kedua warna, arah dan kedua stop
Gaya yang diterapkan
Melukis gradien bulat antara dua warna di belakang scene, menyebar dari position dalam shape yang diberikan, dengan titik hentinya sebagai persentase dari pusat.
Kedua warna, posisi pusat, kedua stop dan bentuknya
Gaya yang diterapkan
Melukis gradien lurus melalui beberapa warna di belakang scene, masing-masing pada persentase titik hentinya sendiri; colors dan stops harus sama panjang, atau objek error yang dikembalikan.
Warna-warna, stop-nya dan arah
Gaya yang diterapkan, atau pesan kesalahan jika panjang daftarnya berbeda
Melukis gradien bulat melalui beberapa warna di belakang scene, masing-masing pada persentase titik hentinya sendiri; colors dan stops harus sama panjang, atau objek error yang dikembalikan.
Warna-warna, stop-nya, posisi pusat dan bentuknya
Gaya yang diterapkan, atau pesan kesalahan jika panjang daftarnya berbeda
Menampilkan gambar di belakang scene dengan opsi latar belakang CSS untuk cara pengulangan, penskalaan, penempatan dan pengguliran; warna clear scene menjadi transparan sehingga gambar tampak.
URL gambar serta opsi pengulangan, ukuran, posisi, attachment, origin dan clip
Gaya yang diterapkan
bitbybit.babylon.scene.canvasBackgroundImage({ imageUrl: "https://example.com/backdrop.jpg", repeat: Bit.Inputs.Base.backgroundRepeatEnum.noRepeat, size: Bit.Inputs.Base.backgroundSizeEnum.cover, position: Bit.Inputs.Base.gradientPositionEnum.center, attachment: Bit.Inputs.Base.backgroundAttachmentEnum.scroll, origin: Bit.Inputs.Base.backgroundOriginClipEnum.paddingBox, clip: Bit.Inputs.Base.backgroundOriginClipEnum.borderBox });
Mengisi latar belakang scene dengan satu warna polos dan menghapus gambar atau gradien latar belakang kanvas apa pun yang disetel sebelumnya.
Warna heksadesimal
Menjadikan sebuah kamera sebagai kamera yang dipakai scene untuk merender, dengan melepaskan kontrol kamera yang sebelumnya aktif.
Kamera yang akan diaktifkan
const camera = bitbybit.babylon.camera.arcRotate.create({ radius: 20, target: [0, 0, 0], alpha: 45, beta: 70, lowerBetaLimit: 1, upperBetaLimit: 179, angularSensibilityX: 1000, angularSensibilityY: 1000, panningSensibility: 1000, wheelPrecision: 3, maxZ: 1000 });
bitbybit.babylon.scene.activateCamera({ camera });
Memberikan kamera yang saat ini dipakai scene untuk merender.
Kamera aktif
Menempatkan ulang kamera orbit default, yang bernama Camera, dan menyetel batas-batas serta sensitivitasnya.
Kamera ditempatkan di position melihat lookAt; batas radius, alpha dan beta membatasi seberapa jauh kamera dapat men-zoom dan mengorbit, sudut dalam derajat, dan sensibilitasnya menyetel seberapa cepat kamera bereaksi, lebih rendah berarti lebih cepat.
Posisi, target serta batas dan sensitivitas opsional
bitbybit.babylon.scene.adjustActiveArcRotateCamera({ position: [20, 20, 20], lookAt: [0, 0, 0], lowerRadiusLimit: 5, upperRadiusLimit: 100, lowerBetaLimit: 1, upperBetaLimit: 179, angularSensibilityX: 1000, angularSensibilityY: 1000, panningSensibility: 1000, wheelPrecision: 3, maxZ: 1000 });
Mengelilingi scene dengan salah satu skybox bawaan dan memakainya sebagai pencahayaan lingkungan yang ditangkap material reflektif.
blur melembutkan langit yang terlihat, environmentIntensity menskalakan seberapa besar langit menerangi scene, dan hideSkybox mempertahankan pencahayaan sambil menyembunyikan langit itu sendiri.
Skybox bawaan, ukurannya, blur, intensitas lingkungan dan visibilitas
Mengelilingi scene dengan skybox yang dimuat dari tekstur Anda sendiri dan memakainya sebagai pencahayaan lingkungan.
textureUrl dapat menunjuk ke file .hdr, file .env atau root dari enam gambar muka kubus; tidak terjadi apa pun tanpanya. hideSkybox mempertahankan pencahayaan sambil menyembunyikan langit itu sendiri.
URL dan ukuran tekstur, ukuran skybox, blur, intensitas lingkungan dan visibilitas
Mengelilingi scene dengan skybox yang dibangun dari tekstur kubus yang Anda muat sendiri dan memakainya sebagai pencahayaan lingkungan.
texture dapat berasal dari file .hdr atau .env. hideSkybox mempertahankan pencahayaan sambil menyembunyikan langit; enableGroundProjection meratakan langit bagian bawah menjadi tanah tempat model berdiri.
Tekstur kubus, ukuran skybox, blur, intensitas lingkungan, visibilitas dan proyeksi tanah
const texture = new BABYLON.CubeTexture("https://example.com/env/studio", bitbybit.babylon.scene.getScene());
bitbybit.babylon.scene.enableSkyboxFromTexture({ texture, size: 1000, blur: 0.1, environmentIntensity: 0.7, hideSkybox: false, enableGroundProjection: true, projectedGroundRadius: 20, projectedGroundHeight: 3 });
Memudarkan geometri yang jauh ke dalam suatu warna, seperti kabut tipis.
linear memudar dari start sampai end dalam satuan scene; exponential dan exponentialSquared memudar menurut density, mengabaikan jarak; none mematikan kabut.
Mode kabut, warna, kepadatan serta jarak awal dan akhir
Menambahkan cahaya titik ke scene, seperti drawPointLight, tanpa mengembalikannya; untuk skrip yang hanya perlu cahaya itu ada.
Posisi, warna, intensitas, jari-jari bohlam dan pengaturan bayangan cahaya
bitbybit.babylon.scene.drawPointLightNoReturn({ position: [10, 20, 10], intensity: 2000, diffuse: "#ffffff", specular: "#ffffff", radius: 0.5, enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0.1, shadowRefreshRate: 1 });
Mencantumkan generator bayangan dari cahaya-cahaya yang dibuat melalui pustaka ini, satu per cahaya dengan bayangan aktif; mesh yang digambar didaftarkan padanya sebagai pemancar bayangan.
Generator bayangan, atau daftar kosong
Menambahkan cahaya yang bersinar ke segala arah dari sebuah titik, seperti bohlam, dengan bola kecil bercahaya opsional di posisinya.
Dengan enableShadows bernilai true, generator bayangan dibuat dan setiap mesh yang sudah ada di scene memancarkan dan menerima bayangan; intensity adalah daya cahaya, jadi nilai dalam ribuan adalah hal yang normal.
Posisi, warna, intensitas, jari-jari bohlam dan pengaturan bayangan cahaya
Cahaya titik
const light = bitbybit.babylon.scene.drawPointLight({ position: [10, 20, 10], intensity: 2000, diffuse: "#ffffff", specular: "#ffffff", radius: 0.5, enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0.1, shadowRefreshRate: 1 });
Menambahkan cahaya terarah ke scene, seperti drawDirectionalLight, tanpa mengembalikannya; untuk skrip yang hanya perlu cahaya itu ada.
Arah, warna, intensitas dan pengaturan bayangan cahaya
bitbybit.babylon.scene.drawDirectionalLightNoReturn({ direction: [-100, -100, -100], intensity: 0.5, diffuse: "#ffffff", specular: "#ffffff", enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0, shadowRefreshRate: 1 });
Menambahkan cahaya yang bersinar dengan cara yang sama di mana-mana, seperti matahari, sepanjang direction.
Dengan enableShadows bernilai true, generator bayangan dibuat dan setiap mesh yang sudah ada di scene memancarkan dan menerima bayangan; intensity adalah faktor polos di mana 1 berarti kekuatan penuh.
Arah, warna, intensitas dan pengaturan bayangan cahaya
Cahaya terarah
const sun = bitbybit.babylon.scene.drawDirectionalLight({ direction: [-100, -100, -100], intensity: 0.5, diffuse: "#ffffff", specular: "#ffffff", enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0, shadowRefreshRate: 1 });
Mengalihkan scene antara sistem koordinat tangan kiri yang dipakai BabylonJS secara default dan sistem tangan kanan, konvensi sebagian besar alat CAD dan glTF; kamera aktif disegarkan agar sesuai.
Apakah menggunakan sistem tangan kanan
Scene BabylonJS secara keseluruhan: kamera aktif dan batasnya, cahaya dengan bayangan, skybox dan pencahayaan lingkungan, kabut, fisika, event pointer, latar belakang kanvas dan pembersihan semua yang digambar. Sebuah scene menampung setiap mesh, cahaya dan kamera; sebagian besar skrip menyentuhnya untuk menyiapkan pencahayaan dan kamera sekali lalu menggambar ke dalamnya.