يرسم أي قيمة CSS من نوع background-image خلف المشهد، تدرجًا لونيًا أو صورة، بجعل
لون مسح المشهد شفافًا وتنسيق لوحة الرسم.
قيمة صورة الخلفية في CSS
النمط الذي تم تطبيقه
يرسم تدرجًا لونيًا مستقيمًا بين لونين خلف المشهد، في الاتجاه المعطى، مع نقاط التوقف كنسب مئوية على طوله.
اللونان والاتجاه ونقطتا التوقف
النمط الذي تم تطبيقه
يرسم تدرجًا لونيًا دائريًا بين لونين خلف المشهد، ينتشر من position بالشكل
shape المعطى، مع نقاط التوقف كنسب مئوية من المركز.
اللونان وموضع المركز ونقطتا التوقف والشكل
النمط الذي تم تطبيقه
يرسم تدرجًا لونيًا مستقيمًا عبر عدة ألوان خلف المشهد، كل منها عند نسبة توقفه
المئوية الخاصة؛ يجب أن يكون colors وstops بالطول نفسه، وإلا يعود كائن خطأ
بدلًا من ذلك.
الألوان ونقاط توقفها والاتجاه
النمط الذي تم تطبيقه، أو رسالة خطأ عندما تختلف القوائم في الطول
يرسم تدرجًا لونيًا دائريًا عبر عدة ألوان خلف المشهد، كل منها عند نسبة توقفه
المئوية الخاصة؛ يجب أن يكون colors وstops بالطول نفسه، وإلا يعود كائن خطأ
بدلًا من ذلك.
الألوان ونقاط توقفها وموضع المركز والشكل
النمط الذي تم تطبيقه، أو رسالة خطأ عندما تختلف القوائم في الطول
يعرض صورة خلف المشهد مع خيارات خلفية CSS لكيفية تكرارها وتحجيمها وموضعها وتمريرها؛ يصبح لون مسح المشهد شفافًا لتظهر الصورة من خلاله.
عنوان URL للصورة وخيارات التكرار والحجم والموضع والتثبيت والأصل والقص
النمط الذي تم تطبيقه
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 });
يملأ خلفية المشهد بلون واحد بسيط ويزيل أي صورة خلفية أو تدرج لوني لوحة الرسم ضُبط من قبل.
اللون بصيغة hex
يجعل الكاميرا هي التي يصيّر المشهد من خلالها، مع فصل عناصر تحكم الكاميرا التي كانت نشطة من قبل.
الكاميرا المراد تفعيلها
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 });
يعطي الكاميرا التي يصيّر المشهد من خلالها حاليًا.
الكاميرا النشطة
يعيد وضع الكاميرا الدوّارة الافتراضية، وهي المسماة Camera، ويضبط حدودها
وحساسياتها.
توضع الكاميرا عند position ناظرة إلى lookAt؛ حدود نصف القطر وألفا وبيتا
تسيّج مدى التكبير والدوران، والزوايا بالدرجات، والحساسيات تضبط سرعة
استجابتها، والأقل يعني الأسرع.
الموضع والهدف والحدود والحساسيات الاختيارية
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 });
يحيط المشهد بأحد صناديق السماء المدمجة ويستخدمه كإضاءة البيئة التي تلتقطها المواد العاكسة.
blur ينعّم السماء المرئية، وenvironmentIntensity يحجّم مقدار إضاءته للمشهد،
وhideSkybox يحتفظ بالإضاءة مع إخفاء السماء نفسها.
صندوق السماء المدمج وحجمه وضبابيته وشدة البيئة ورؤيته
يحيط المشهد بصندوق سماء محمّل من نسيجك الخاص ويستخدمه كإضاءة البيئة.
textureUrl قد يشير إلى ملف .hdr أو ملف .env أو جذر ست صور لأوجه المكعب؛
لا يحدث شيء من دونه. hideSkybox يحتفظ بالإضاءة مع إخفاء السماء نفسها.
عنوان URL للنسيج وحجمه، وحجم صندوق السماء وضبابيته وشدة البيئة ورؤيته
يحيط المشهد بصندوق سماء مبني من نسيج مكعب حمّلته بنفسك ويستخدمه كإضاءة البيئة.
texture قد يأتي من ملف .hdr أو .env. hideSkybox يحتفظ بالإضاءة مع إخفاء
السماء؛ enableGroundProjection يسطّح الجزء السفلي من السماء إلى أرضية يقف عليها النموذج.
النسيج المكعب، وحجم صندوق السماء وضبابيته وشدة البيئة ورؤيته وإسقاط الأرضية
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 });
يُبهت الهندسة البعيدة إلى لون، كما يفعل الغبش.
linear يُبهت من start إلى end بوحدات المشهد؛ exponential وexponentialSquared
يُبهتان بحسب density بدلًا من ذلك، متجاهلين المسافات؛ none يوقف الضباب.
وضع الضباب ولونه وكثافته ومسافتا البداية والنهاية
يضيف ضوءًا نقطيًا إلى المشهد، كما يفعل drawPointLight، من دون إعادته؛
للسكربتات التي تحتاج فقط إلى وجود الضوء.
موضع الضوء وألوانه وشدته ونصف قطر المصباح وإعدادات الظل
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 });
يسرد مولّدات الظلال للأضواء المنشأة عبر هذه المكتبة، واحدًا لكل ضوء مفعّلة ظلاله؛ تُسجَّل الشبكات المرسومة لديها كملقيات للظلال.
مولدات الظل، أو قائمة فارغة
يضيف ضوءًا يشع في كل اتجاه من نقطة، مثل المصباح، مع كرة صغيرة متوهجة اختيارية عند موضعه.
عندما يكون enableShadows صحيحًا يُنشأ مولّد ظلال وكل شبكة موجودة أصلًا في المشهد
تلقي الظلال وتستقبلها؛ intensity هي القدرة الضوئية، لذلك القيم بالآلاف
طبيعية.
موضع الضوء وألوانه وشدته ونصف قطر المصباح وإعدادات الظل
الضوء النقطي
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 });
يضيف ضوءًا اتجاهيًا إلى المشهد، كما يفعل drawDirectionalLight، من دون
إعادته؛ للسكربتات التي تحتاج فقط إلى وجود الضوء.
اتجاه الضوء وألوانه وشدته وإعدادات الظل
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 });
يضيف ضوءًا يشع بالطريقة نفسها في كل مكان، مثل الشمس، على طول direction.
عندما يكون enableShadows صحيحًا يُنشأ مولّد ظلال وكل شبكة موجودة أصلًا في المشهد
تلقي الظلال وتستقبلها؛ intensity عامل بسيط حيث 1 هي القوة الكاملة.
اتجاه الضوء وألوانه وشدته وإعدادات الظل
الضوء الاتجاهي
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 });
يبدّل المشهد بين نظام الإحداثيات الأيسر الذي يستخدمه BabylonJS افتراضيًا ونظام أيمن، وهو اصطلاح معظم أدوات CAD وglTF؛ تُحدَّث الكاميرا النشطة لتتطابق.
ما إذا كان يستخدم النظام الأيمن
مشهد BabylonJS ككل: الكاميرا النشطة وحدودها والأضواء مع الظلال وصندوق السماء وإضاءة البيئة والضباب والفيزياء وأحداث المؤشر وخلفية لوحة الرسم ومسح كل ما رُسم. يحوي المشهد كل شبكة وضوء وكاميرا؛ وتلمسه معظم السكربتات لإعداد الإضاءة والكاميرا مرة واحدة ثم ترسم فيه.