Paints any CSS background-image value behind the scene, a gradient or an image, by making
the scene's clear color transparent and styling the canvas.
The CSS background image value
The style that was applied
Paints a straight gradient between two colors behind the scene, in the given direction, with the stops as percentages along it.
The two colors, the direction and the two stops
The style that was applied
Paints a round gradient between two colors behind the scene, spreading out from position in
the given shape, with the stops as percentages from the center.
The two colors, the center position, the two stops and the shape
The style that was applied
Paints a straight gradient through several colors behind the scene, each at its own stop
percentage; colors and stops must be the same length, or an error object comes back
instead.
The colors, their stops and the direction
The style that was applied, or an error message when the lists differ in length
Paints a round gradient through several colors behind the scene, each at its own stop
percentage; colors and stops must be the same length, or an error object comes back
instead.
The colors, their stops, the center position and the shape
The style that was applied, or an error message when the lists differ in length
Shows an image behind the scene with the CSS background options for how it repeats, scales, sits and scrolls; the scene's clear color becomes transparent so the image shows through.
The image URL and the repeat, size, position, attachment, origin and clip options
The style that was applied
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 });
Fills the background of the scene with one plain color and removes any canvas background image or gradient set before.
The hex color
Makes a camera the one the scene renders through, detaching the controls of the camera that was active before.
The camera to activate
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 });
Gives the camera the scene currently renders through.
The active camera
Repositions the default orbiting camera, the one named Camera, and sets its limits and
sensitivities.
The camera is placed at position looking at lookAt; the radius, alpha and beta limits
fence how far it can zoom and orbit, angles in degrees, and the sensibilities set how fast it
reacts, lower being faster.
The position, the target and the optional limits and sensitivities
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 });
Removes everything drawn from the scene: meshes, materials, textures, lights other than the default hemispheric one, transform nodes, shadow generators, fog and the environment texture, and restores the default camera when another was active.
Surrounds the scene with one of the built-in skyboxes and uses it as the environment lighting that reflective materials pick up.
blur softens the visible sky, environmentIntensity scales how much it lights the scene,
and hideSkybox keeps the lighting while hiding the sky itself.
The built-in skybox, its size, blur, environment intensity and visibility
Surrounds the scene with a skybox loaded from your own texture and uses it as the environment lighting.
textureUrl may point to an .hdr file, an .env file or the root of six cube face images;
nothing happens without it. hideSkybox keeps the lighting while hiding the sky itself.
The texture URL and size, the skybox size, blur, environment intensity and visibility
Surrounds the scene with a skybox built from a cube texture you loaded yourself and uses it as the environment lighting.
texture may come from an .hdr or .env file. hideSkybox keeps the lighting while hiding
the sky; enableGroundProjection flattens the lower sky into a ground the model stands on.
The cube texture, the skybox size, blur, environment intensity, visibility and ground projection
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 });
Fades distant geometry into a color, the way haze does.
linear fades from start to end in scene units; exponential and exponentialSquared
fade by density instead, ignoring the distances; none turns fog off.
The fog mode, color, density and the start and end distances
Adds a point light to the scene, as drawPointLight does, without giving it back; for
scripts that only need the light to exist.
The light's position, colors, intensity, bulb radius and shadow settings
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 });
Lists the shadow generators of the lights created through this library, one per light with shadows enabled; drawn meshes are registered with them as casters.
The shadow generators, or an empty list
Adds a light that shines in every direction from a point, like a bulb, with an optional small glowing sphere at its position.
With enableShadows true a shadow generator is created and every mesh already in the scene
casts and receives shadows; intensity is luminous power, so values in the thousands are
normal.
The light's position, colors, intensity, bulb radius and shadow settings
The point light
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 });
Adds a directional light to the scene, as drawDirectionalLight does, without giving it
back; for scripts that only need the light to exist.
The light's direction, colors, intensity and shadow settings
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 });
Adds a light that shines the same way everywhere, like the sun, along direction.
With enableShadows true a shadow generator is created and every mesh already in the scene
casts and receives shadows; intensity is a plain factor where 1 is full strength.
The light's direction, colors, intensity and shadow settings
The directional light
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 });
Switches the scene between the left-handed coordinate system BabylonJS uses by default and a right-handed one, the convention of most CAD tools and of glTF; the active camera is refreshed to match.
Whether to use the right-handed system
The BabylonJS scene as a whole: the active camera and its limits, lights with shadows, the skybox and environment lighting, fog, physics, pointer events, the canvas background and clearing everything drawn. A scene holds every mesh, light and camera; most scripts touch it to set up lighting and the camera once and then draw into it.