Peint n'importe quelle valeur CSS background-image derrière la scène, un dégradé ou une image, en rendant
la couleur d'effacement de la scène transparente et en stylant le canevas.
La valeur CSS de l'image d'arrière-plan
Le style qui a été appliqué
Peint un dégradé linéaire entre deux couleurs derrière la scène, dans la direction donnée, avec les positions d'arrêt en pourcentages le long de celle-ci.
Les deux couleurs, la direction et les deux positions d'arrêt
Le style qui a été appliqué
Peint un dégradé radial entre deux couleurs derrière la scène, s'étendant depuis position dans
la shape donnée, avec les positions d'arrêt en pourcentages depuis le centre.
Les deux couleurs, la position du centre, les deux positions d'arrêt et la forme
Le style qui a été appliqué
Peint un dégradé linéaire à travers plusieurs couleurs derrière la scène, chacune à son propre pourcentage
d'arrêt ; colors et stops doivent avoir la même longueur, sinon un objet d'erreur est renvoyé
à la place.
Les couleurs, leurs positions d'arrêt et la direction
Le style qui a été appliqué, ou un message d'erreur quand les listes n'ont pas la même longueur
Peint un dégradé radial à travers plusieurs couleurs derrière la scène, chacune à son propre pourcentage
d'arrêt ; colors et stops doivent avoir la même longueur, sinon un objet d'erreur est renvoyé
à la place.
Les couleurs, leurs positions d'arrêt, la position du centre et la forme
Le style qui a été appliqué, ou un message d'erreur quand les listes n'ont pas la même longueur
Affiche une image derrière la scène avec les options de fond CSS pour la façon dont elle se répète, se met à l'échelle, se place et défile ; la couleur d'effacement de la scène devient transparente pour que l'image apparaisse.
L'URL de l'image et les options de répétition, de taille, de position, d'attachement, d'origine et de découpe
Le style qui a été appliqué
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 });
Remplit le fond de la scène d'une seule couleur unie et retire toute image ou tout dégradé de fond de canevas défini auparavant.
La couleur hexadécimale
Fait d'une caméra celle à travers laquelle la scène est rendue, en détachant les commandes de la caméra qui était active auparavant.
La caméra à activer
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 });
Donne la caméra à travers laquelle la scène est actuellement rendue.
La caméra active
Repositionne la caméra orbitale par défaut, celle nommée Camera, et règle ses limites et
sensibilités.
La caméra est placée à position regardant lookAt ; les limites de rayon, alpha et bêta
bornent jusqu'où elle peut zoomer et orbiter, angles en degrés, et les sensibilités règlent sa vitesse de
réaction, plus bas étant plus rapide.
La position, la cible et les limites et sensibilités facultatives
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 });
Retire de la scène tout ce qui a été dessiné : maillages, matériaux, textures, lumières autres que la lumière hémisphérique par défaut, nœuds de transformation, générateurs d'ombres, brouillard et texture d'environnement, et restaure la caméra par défaut quand une autre était active.
Entoure la scène de l'une des skybox intégrées et l'utilise comme éclairage d'environnement que les matériaux réfléchissants captent.
blur adoucit le ciel visible, environmentIntensity règle à quel point il éclaire la scène,
et hideSkybox garde l'éclairage tout en masquant le ciel lui-même.
La skybox intégrée, sa taille, son flou, l'intensité d'environnement et la visibilité
Entoure la scène d'une skybox chargée depuis votre propre texture et l'utilise comme éclairage d'environnement.
textureUrl peut pointer vers un fichier .hdr, un fichier .env ou la racine de six images de faces de cube ;
rien ne se passe sans elle. hideSkybox garde l'éclairage tout en masquant le ciel lui-même.
L'URL et la taille de la texture, la taille de la skybox, le flou, l'intensité d'environnement et la visibilité
Entoure la scène d'une skybox construite à partir d'une texture cube que vous avez chargée vous-même et l'utilise comme éclairage d'environnement.
texture peut provenir d'un fichier .hdr ou .env. hideSkybox garde l'éclairage tout en masquant
le ciel ; enableGroundProjection aplatit le bas du ciel en un sol sur lequel le modèle repose.
La texture cube, la taille de la skybox, le flou, l'intensité d'environnement, la visibilité et la projection au sol
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 });
Estompe la géométrie lointaine dans une couleur, comme le fait la brume.
linear estompe de start à end en unités de la scène ; exponential et exponentialSquared
estompent selon density à la place, en ignorant les distances ; none désactive le brouillard.
Le mode, la couleur, la densité du brouillard et les distances de début et de fin
Ajoute une lumière ponctuelle à la scène, comme le fait drawPointLight, sans la renvoyer ; pour
les scripts qui ont seulement besoin que la lumière existe.
La position, les couleurs, l'intensité, le rayon de l'ampoule et les réglages d'ombre de la lumière
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 });
Liste les générateurs d'ombres des lumières créées par cette bibliothèque, un par lumière avec les ombres activées ; les maillages dessinés y sont enregistrés comme projecteurs d'ombres.
Les générateurs d'ombres, ou une liste vide
Ajoute une lumière qui brille dans toutes les directions depuis un point, comme une ampoule, avec une petite sphère lumineuse facultative à sa position.
Avec enableShadows vrai, un générateur d'ombres est créé et chaque maillage déjà dans la scène
projette et reçoit les ombres ; intensity est une puissance lumineuse, des valeurs en milliers sont donc
normales.
La position, les couleurs, l'intensité, le rayon de l'ampoule et les réglages d'ombre de la lumière
La lumière ponctuelle
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 });
Ajoute une lumière directionnelle à la scène, comme le fait drawDirectionalLight, sans la
renvoyer ; pour les scripts qui ont seulement besoin que la lumière existe.
La direction, les couleurs, l'intensité et les réglages d'ombre de la lumière
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 });
Ajoute une lumière qui brille de la même façon partout, comme le soleil, le long de direction.
Avec enableShadows vrai, un générateur d'ombres est créé et chaque maillage déjà dans la scène
projette et reçoit les ombres ; intensity est un simple facteur où 1 est la pleine puissance.
La direction, les couleurs, l'intensité et les réglages d'ombre de la lumière
La lumière directionnelle
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 });
Bascule la scène entre le système de coordonnées main gauche que BabylonJS utilise par défaut et un système main droite, la convention de la plupart des outils de CAO et de glTF ; la caméra active est rafraîchie en conséquence.
S'il faut utiliser le système direct (main droite)
La scène BabylonJS dans son ensemble : la caméra active et ses limites, les lumières avec ombres, la skybox et l'éclairage d'environnement, le brouillard, la physique, les événements du pointeur, l'arrière-plan du canevas et l'effacement de tout ce qui est dessiné. Une scène contient chaque maillage, lumière et caméra ; la plupart des scripts y touchent pour configurer l'éclairage et la caméra une fois puis dessinent dedans.