Malt einen beliebigen CSS-background-image-Wert hinter die Szene, einen Verlauf oder ein Bild, indem
die Löschfarbe der Szene transparent gemacht und das Canvas gestylt wird.
Der Wert des CSS-Hintergrundbilds
Der angewendete Stil
Malt einen geraden Verlauf zwischen zwei Farben hinter die Szene, in der gegebenen Richtung, mit den Stopps als Prozentwerten entlang des Verlaufs.
Die beiden Farben, die Richtung und die beiden Stopps
Der angewendete Stil
Malt einen runden Verlauf zwischen zwei Farben hinter die Szene, der sich von position aus in
der gegebenen shape ausbreitet, mit den Stopps als Prozentwerten vom Mittelpunkt.
Die beiden Farben, die Mittelpunktposition, die beiden Stopps und die Form
Der angewendete Stil
Malt einen geraden Verlauf durch mehrere Farben hinter die Szene, jede an ihrem eigenen Stopp-
Prozentwert; colors und stops müssen gleich lang sein, sonst kommt stattdessen ein Fehlerobjekt
zurück.
Die Farben, ihre Stopps und die Richtung
Der angewendete Stil oder eine Fehlermeldung, wenn die Listen unterschiedlich lang sind
Malt einen runden Verlauf durch mehrere Farben hinter die Szene, jede an ihrem eigenen Stopp-
Prozentwert; colors und stops müssen gleich lang sein, sonst kommt stattdessen ein Fehlerobjekt
zurück.
Die Farben, ihre Stopps, die Mittelpunktposition und die Form
Der angewendete Stil oder eine Fehlermeldung, wenn die Listen unterschiedlich lang sind
Zeigt ein Bild hinter der Szene mit den CSS-Hintergrundoptionen dafür, wie es sich wiederholt, skaliert, sitzt und scrollt; die Löschfarbe der Szene wird transparent, damit das Bild durchscheint.
Die Bild-URL und die Optionen für Wiederholung, Größe, Position, Anhang, Ursprung und Beschnitt
Der angewendete Stil
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 });
Füllt den Hintergrund der Szene mit einer einfachen Farbe und entfernt jedes zuvor gesetzte Canvas-Hintergrund- bild oder jeden Verlauf.
Die Hex-Farbe
Macht eine Kamera zu der, durch die die Szene rendert, und löst die Steuerung der Kamera, die vorher aktiv war.
Die zu aktivierende Kamera
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 });
Gibt die Kamera, durch die die Szene gerade rendert.
Die aktive Kamera
Positioniert die Standard-Orbitkamera neu, die mit dem Namen Camera, und setzt ihre Grenzen und
Empfindlichkeiten.
Die Kamera wird bei position platziert und blickt auf lookAt; die Radius-, Alpha- und Beta-Grenzen
beschränken, wie weit sie zoomen und kreisen kann, Winkel in Grad, und die Empfindlichkeiten legen fest, wie schnell sie
reagiert, wobei niedriger schneller ist.
Die Position, das Ziel und die optionalen Grenzen und Empfindlichkeiten
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 });
Entfernt alles Gezeichnete aus der Szene: Meshes, Materialien, Texturen, Lichter außer dem standardmäßigen hemisphärischen, Transformationsknoten, Schattengeneratoren, Nebel und die Umgebungstextur, und stellt die Standardkamera wieder her, wenn eine andere aktiv war.
Umgibt die Szene mit einer der eingebauten Skyboxen und verwendet sie als Umgebungsbeleuchtung, die reflektierende Materialien aufnehmen.
blur weicht den sichtbaren Himmel auf, environmentIntensity skaliert, wie stark er die Szene beleuchtet,
und hideSkybox behält die Beleuchtung, während der Himmel selbst ausgeblendet wird.
Die eingebaute Skybox, ihre Größe, Unschärfe, Umgebungsintensität und Sichtbarkeit
Umgibt die Szene mit einer Skybox, die aus Ihrer eigenen Textur geladen wird, und verwendet sie als Umgebungs- beleuchtung.
textureUrl kann auf eine .hdr-Datei, eine .env-Datei oder die Wurzel von sechs Würfelseitenbildern zeigen;
ohne sie passiert nichts. hideSkybox behält die Beleuchtung, während der Himmel selbst ausgeblendet wird.
Die Textur-URL und -Größe, die Skybox-Größe, die Unschärfe, die Umgebungsintensität und die Sichtbarkeit
Umgibt die Szene mit einer Skybox, die aus einer selbst geladenen Würfeltextur gebaut wird, und verwendet sie als Umgebungsbeleuchtung.
texture kann aus einer .hdr- oder .env-Datei stammen. hideSkybox behält die Beleuchtung, während der
Himmel ausgeblendet wird; enableGroundProjection flacht den unteren Himmel zu einem Boden ab, auf dem das Modell steht.
Die Würfeltextur, die Skybox-Größe, die Unschärfe, die Umgebungsintensität, die Sichtbarkeit und die Bodenprojektion
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 });
Blendet entfernte Geometrie in eine Farbe aus, wie Dunst es tut.
linear blendet von start bis end in Szeneneinheiten aus; exponential und exponentialSquared
blenden stattdessen über density aus und ignorieren die Abstände; none schaltet den Nebel aus.
Der Nebelmodus, die Farbe, die Dichte sowie der Start- und der Endabstand
Fügt der Szene ein Punktlicht hinzu, wie drawPointLight es tut, ohne es zurückzugeben; für
Skripte, die nur wollen, dass das Licht existiert.
Die Position, die Farben, die Intensität, der Leuchtkörperradius und die Schatteneinstellungen des Lichts
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 });
Listet die Schattengeneratoren der durch diese Bibliothek erstellten Lichter auf, einen pro Licht mit aktivierten Schatten; gezeichnete Meshes werden bei ihnen als Schattenwerfer registriert.
Die Schattengeneratoren oder eine leere Liste
Fügt ein Licht hinzu, das von einem Punkt aus in jede Richtung scheint, wie eine Glühbirne, mit einer optionalen kleinen leuchtenden Kugel an seiner Position.
Mit enableShadows true wird ein Schattengenerator erstellt und jedes bereits in der Szene befindliche Mesh
wirft und empfängt Schatten; intensity ist die Lichtleistung, daher sind Werte in den Tausenden
normal.
Die Position, die Farben, die Intensität, der Leuchtkörperradius und die Schatteneinstellungen des Lichts
Das Punktlicht
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 });
Fügt der Szene ein gerichtetes Licht hinzu, wie drawDirectionalLight es tut, ohne es
zurückzugeben; für Skripte, die nur wollen, dass das Licht existiert.
Die Richtung, die Farben, die Intensität und die Schatteneinstellungen des Lichts
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 });
Fügt ein Licht hinzu, das überall gleich scheint, wie die Sonne, entlang direction.
Mit enableShadows true wird ein Schattengenerator erstellt und jedes bereits in der Szene befindliche Mesh
wirft und empfängt Schatten; intensity ist ein einfacher Faktor, bei dem 1 volle Stärke ist.
Die Richtung, die Farben, die Intensität und die Schatteneinstellungen des Lichts
Das gerichtete Licht
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 });
Schaltet die Szene zwischen dem linkshändigen Koordinatensystem, das BabylonJS standardmäßig verwendet, und einem rechtshändigen um, der Konvention der meisten CAD-Werkzeuge und von glTF; die aktive Kamera wird entsprechend aufgefrischt.
Ob das rechtshändige System verwendet wird
Die BabylonJS-Szene als Ganzes: die aktive Kamera und ihre Grenzen, Lichter mit Schatten, die Skybox und Umgebungsbeleuchtung, Nebel, Physik, Zeigerereignisse, der Canvas-Hintergrund und das Löschen alles Gezeichneten. Eine Szene enthält jedes Mesh, Licht und jede Kamera; die meisten Skripte greifen darauf zu, um Beleuchtung und Kamera einmal einzurichten, und zeichnen dann hinein.