Bitbybit Docs
    Bereite Suchindex vor...

    Klasse BabylonScene

    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.

    Index

    Konstruktoren

    background

    • 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.

      Parameter

      Rückgabewert { backgroundImage: string }

      Der angewendete Stil

      bitbybit.babylon.scene.canvasCSSBackgroundImage({ cssBackgroundImage: "linear-gradient(to top, #1a1c1f 0%, #93aacd 100%)" });
      
    • Malt einen geraden Verlauf zwischen zwei Farben hinter die Szene, in der gegebenen Richtung, mit den Stopps als Prozentwerten entlang des Verlaufs.

      Parameter

      Rückgabewert { backgroundImage: string }

      Der angewendete Stil

      bitbybit.babylon.scene.twoColorLinearGradientBackground({ colorFrom: "#1a1c1f", colorTo: "#93aacd", direction: Bit.Inputs.Base.gradientDirectionEnum.toBottom, stopFrom: 0, stopTo: 100 });
      
    • 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.

      Parameter

      Rückgabewert { backgroundImage: string }

      Der angewendete Stil

      bitbybit.babylon.scene.twoColorRadialGradientBackground({ colorFrom: "#1a1c1f", colorTo: "#93aacd", position: Bit.Inputs.Base.gradientPositionEnum.center, stopFrom: 0, stopTo: 100, shape: Bit.Inputs.Base.gradientShapeEnum.circle });
      
    • 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.

      Parameter

      Rückgabewert { backgroundImage: string } | { error: string }

      Der angewendete Stil oder eine Fehlermeldung, wenn die Listen unterschiedlich lang sind

      bitbybit.babylon.scene.multiColorLinearGradientBackground({ colors: ["#1a1c1f", "#4a5a7a", "#93aacd"], stops: [0, 50, 100], direction: Bit.Inputs.Base.gradientDirectionEnum.toTop });
      
    • 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.

      Parameter

      Rückgabewert { backgroundImage: string } | { error: string }

      Der angewendete Stil oder eine Fehlermeldung, wenn die Listen unterschiedlich lang sind

      bitbybit.babylon.scene.multiColorRadialGradientBackground({ colors: ["#1a1c1f", "#93aacd"], stops: [0, 100], position: Bit.Inputs.Base.gradientPositionEnum.center, shape: Bit.Inputs.Base.gradientShapeEnum.circle });
      
    • 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.

      Parameter

      Rückgabewert {
          backgroundImage: string;
          backgroundRepeat: string;
          backgroundSize: string;
          backgroundPosition: string;
          backgroundAttachment: string;
          backgroundOrigin: string;
          backgroundClip: string;
      }

      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.

      Parameter

      Rückgabewert void

      bitbybit.babylon.scene.backgroundColour({ colour: "#1a1c1f" });
      

    camera

    • Macht eine Kamera zu der, durch die die Szene rendert, und löst die Steuerung der Kamera, die vorher aktiv war.

      Parameter

      Rückgabewert void

      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.

      Rückgabewert Camera

      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.

      Parameter

      Rückgabewert void

      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 });
      

    environment

    • 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.

      Rückgabewert void

      bitbybit.babylon.scene.clearAllDrawn();
      
    • 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.

      Parameter

      • inputs: SkyboxDto

        Die eingebaute Skybox, ihre Größe, Unschärfe, Umgebungsintensität und Sichtbarkeit

      Rückgabewert void

      bitbybit.babylon.scene.enableSkybox({ skybox: Bit.Inputs.Base.skyboxEnum.clearSky, size: 1000, blur: 0.1, environmentIntensity: 0.7, hideSkybox: false });
      
    • 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.

      Parameter

      • inputs: SkyboxCustomTextureDto

        Die Textur-URL und -Größe, die Skybox-Größe, die Unschärfe, die Umgebungsintensität und die Sichtbarkeit

      Rückgabewert void

      bitbybit.babylon.scene.enableSkyboxCustomTexture({ textureUrl: "https://example.com/env/studio.env", textureSize: 512, size: 1000, blur: 0.1, environmentIntensity: 0.7, hideSkybox: true });
      
    • 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.

      Parameter

      • inputs: SkyboxFromTextureDto

        Die Würfeltextur, die Skybox-Größe, die Unschärfe, die Umgebungsintensität, die Sichtbarkeit und die Bodenprojektion

      Rückgabewert void

      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.

      Parameter

      • inputs: FogDto

        Der Nebelmodus, die Farbe, die Dichte sowie der Start- und der Endabstand

      Rückgabewert void

      bitbybit.babylon.scene.fog({ mode: Bit.Inputs.Base.fogModeEnum.linear, color: "#ffffff", density: 0.1, start: 50, end: 300 });
      

    lights

    • 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.

      Parameter

      • inputs: PointLightDto

        Die Position, die Farben, die Intensität, der Leuchtkörperradius und die Schatteneinstellungen des Lichts

      Rückgabewert void

      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.

      Rückgabewert ShadowGenerator[]

      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.

      Parameter

      • inputs: PointLightDto

        Die Position, die Farben, die Intensität, der Leuchtkörperradius und die Schatteneinstellungen des Lichts

      Rückgabewert PointLight

      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.

      Parameter

      • inputs: DirectionalLightDto

        Die Richtung, die Farben, die Intensität und die Schatteneinstellungen des Lichts

      Rückgabewert void

      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.

      Parameter

      • inputs: DirectionalLightDto

        Die Richtung, die Farben, die Intensität und die Schatteneinstellungen des Lichts

      Rückgabewert DirectionalLight

      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 });
      

    system

    • 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.

      Parameter

      Rückgabewert void

      bitbybit.babylon.scene.useRightHandedSystem({ use: true });