Pinta cualquier valor CSS de background-image detrás de la escena, un degradado o una imagen, haciendo
transparente el color de borrado de la escena y aplicando estilo al lienzo.
El valor CSS de la imagen de fondo
El estilo que se aplicó
Pinta un degradado recto entre dos colores detrás de la escena, en la dirección dada, con las paradas como porcentajes a lo largo de él.
Los dos colores, la dirección y las dos paradas
El estilo que se aplicó
Pinta un degradado redondo entre dos colores detrás de la escena, extendiéndose desde position con
la shape dada, con las paradas como porcentajes desde el centro.
Los dos colores, la posición del centro, las dos paradas y la forma
El estilo que se aplicó
Pinta un degradado recto a través de varios colores detrás de la escena, cada uno en su propio porcentaje de
parada; colors y stops deben tener la misma longitud, o en su lugar vuelve un objeto de
error.
Los colores, sus paradas y la dirección
El estilo que se aplicó, o un mensaje de error cuando las listas difieren en longitud
Pinta un degradado redondo a través de varios colores detrás de la escena, cada uno en su propio porcentaje de
parada; colors y stops deben tener la misma longitud, o en su lugar vuelve un objeto de
error.
Los colores, sus paradas, la posición del centro y la forma
El estilo que se aplicó, o un mensaje de error cuando las listas difieren en longitud
Muestra una imagen detrás de la escena con las opciones de fondo CSS para cómo se repite, se escala, se sitúa y se desplaza; el color de borrado de la escena se vuelve transparente para que la imagen se vea.
La URL de la imagen y las opciones de repetición, tamaño, posición, fijación, origen y recorte
El estilo que se aplicó
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 });
Rellena el fondo de la escena con un color liso y elimina cualquier imagen o degradado de fondo del lienzo establecido antes.
El color hexadecimal
Hace que una cámara sea aquella a través de la cual renderiza la escena, desvinculando los controles de la cámara que estaba activa antes.
La cámara que se va a activar
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 });
Da la cámara a través de la cual renderiza la escena actualmente.
La cámara activa
Recoloca la cámara orbital predeterminada, la llamada Camera, y establece sus límites y
sensibilidades.
La cámara se coloca en position mirando a lookAt; los límites de radio, alfa y beta
acotan cuánto puede acercarse y orbitar, ángulos en grados, y las sensibilidades establecen a qué velocidad
reacciona, siendo más baja más rápida.
La posición, el objetivo y los límites y sensibilidades opcionales
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 });
Elimina todo lo dibujado de la escena: mallas, materiales, texturas, luces distintas de la hemisférica predeterminada, nodos de transformación, generadores de sombras, niebla y la textura de entorno, y restaura la cámara predeterminada cuando otra estaba activa.
Rodea la escena con uno de los skyboxes integrados y lo usa como la iluminación de entorno que recogen los materiales reflectantes.
blur suaviza el cielo visible, environmentIntensity escala cuánto ilumina la escena,
y hideSkybox conserva la iluminación mientras oculta el cielo en sí.
El skybox integrado, su tamaño, desenfoque, intensidad de entorno y visibilidad
Rodea la escena con un skybox cargado desde tu propia textura y lo usa como la iluminación de entorno.
textureUrl puede apuntar a un archivo .hdr, un archivo .env o la raíz de seis imágenes de caras de cubo;
sin ella no ocurre nada. hideSkybox conserva la iluminación mientras oculta el cielo en sí.
La URL y el tamaño de la textura, el tamaño del skybox, el desenfoque, la intensidad de entorno y la visibilidad
Rodea la escena con un skybox construido a partir de una textura de cubo que cargaste tú mismo y lo usa como la iluminación de entorno.
texture puede provenir de un archivo .hdr o .env. hideSkybox conserva la iluminación mientras oculta
el cielo; enableGroundProjection aplana la parte inferior del cielo en un suelo sobre el que se apoya el modelo.
La textura de cubo, el tamaño del skybox, el desenfoque, la intensidad de entorno, la visibilidad y la proyección de suelo
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 });
Funde la geometría lejana en un color, como hace la bruma.
linear se funde de start a end en unidades de escena; exponential y exponentialSquared
se funden según density en su lugar, ignorando las distancias; none desactiva la niebla.
El modo, el color y la densidad de la niebla y las distancias de inicio y fin
Añade una luz puntual a la escena, como hace drawPointLight, sin devolverla; para
scripts que solo necesitan que la luz exista.
La posición, los colores, la intensidad, el radio de la bombilla y los ajustes de sombra de la luz
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 });
Lista los generadores de sombras de las luces creadas mediante esta biblioteca, uno por luz con sombras activadas; las mallas dibujadas se registran en ellos como proyectoras.
Los generadores de sombras, o una lista vacía
Añade una luz que brilla en todas las direcciones desde un punto, como una bombilla, con una pequeña esfera brillante opcional en su posición.
Con enableShadows en true se crea un generador de sombras y cada malla que ya está en la escena
proyecta y recibe sombras; intensity es potencia luminosa, así que valores de miles son
normales.
La posición, los colores, la intensidad, el radio de la bombilla y los ajustes de sombra de la luz
La luz puntual
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 });
Añade una luz direccional a la escena, como hace drawDirectionalLight, sin
devolverla; para scripts que solo necesitan que la luz exista.
La dirección, los colores, la intensidad y los ajustes de sombra de la luz
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 });
Añade una luz que brilla igual en todas partes, como el sol, a lo largo de direction.
Con enableShadows en true se crea un generador de sombras y cada malla que ya está en la escena
proyecta y recibe sombras; intensity es un factor simple donde 1 es la fuerza máxima.
La dirección, los colores, la intensidad y los ajustes de sombra de la luz
La luz direccional
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 });
Cambia la escena entre el sistema de coordenadas de mano izquierda que BabylonJS usa de forma predeterminada y uno de mano derecha, la convención de la mayoría de herramientas CAD y de glTF; la cámara activa se refresca para ajustarse.
Si usar el sistema de mano derecha
La escena de BabylonJS en su conjunto: la cámara activa y sus límites, las luces con sombras, el skybox y la iluminación de entorno, la niebla, la física, los eventos del puntero, el fondo del lienzo y el borrado de todo lo dibujado. Una escena contiene todas las mallas, luces y cámaras; la mayoría de los scripts la tocan para configurar la iluminación y la cámara una vez y después dibujar en ella.