في هذا الدرس سنتعرف على طرق ومكونات لتحسين تجاربنا ثلاثية الأبعاد لتبدو أكثر احترافية.

بينما يكون محتوى المشهد مهمًا، فإن الطريقة التي يُعرض بها يمكن أن تُحدث فرقًا كبيرًا. حتى أفضل النماذج ثلاثية الأبعاد يمكن أن تظهر بشكل عادي إذا لم تقدم بطريقة جيدة.

مشروعنا البدئي هو Tesla Model 3 معروض في منتصف الشاشة.

يحتوي المشهد على orbit control حتى نتمكن من التحرك حول السيارة. قمت بتكوين التحكم ليكون لدينا دائمًا عرض جيد للسيارة. هذا أيضًا جزء من عرض المشهد وتجربة احترافية المظهر.

يوجد مصدر ضوء واحد فقط: ضوء محيط. إنه بالكاد يضيء المشهد وتبدو السيارة مسطحة.

لنرى كيف يمكننا تحسين ذلك! أعدك بأن النتيجة النهائية ستبدو أفضل بكثير.

Stage

Stage من مكتبة Drei هو مكون غلاف يقوم بإنشاء إعداد إضاءة استديو مناسب لمشهدك.

لنقم بلف سيارتنا في مكون Stage:

Copy
import { Stage } from "@react-three/drei";
// ...

export const Experience = () => {
  return (
    <>
      {/* ... */}
      <Stage>
        <TeslaModel3 scale={0.012} position-z={0.6} />
      </Stage>
      {/* ... */}
    <>
  );
};

تبدو السيارة أفضل بكثير بالفعل! الإضاءة تبدو أكثر واقعية والسيارة تبدو أكثر ثلاثية الأبعاد. لدينا حتى ظلال!

يمكننا تخصيص مكون Stage بتمرير بعض الخصائص:

Copy
<Stage intensity={0.4} preset={"upfront"} environment={"studio"}>
  <TeslaModel3 scale={0.012} position-z={0.6} />
</Stage>

• intensity تتحكم في شدة الضوء. القيمة الافتراضية هي 0.5.
• preset تتحكم في إعداد الإضاءة. القيمة الافتراضية هي rembrandt.
• environment تتحكم في إعداد البيئة. القيمة الافتراضية هي city. (سنتناول البيئة لاحقًا في هذا الدرس)

هذا المكون مفيد جدًا وطريقة سريعة لجعل المشهد الخاص بك يبدو أفضل. كما أن لديه خصائص أخرى يمكنك التحقق منها في التوثيق.

في بعض الأحيان ستحتاج إلى مزيد من التحكم، لذلك سنستكشف طرقًا أخرى لإنشاء بيئات إضاءة.

لون الخلفية والضباب

حتى الآن في هذه الدورة، احتفظنا دائمًا بخلفية شفافة. مما أدى إلى خلفية بيضاء بسبب خلفية صفحة HTML الخاصة بنا.

هذا يعني أنه يمكنك تغيير لون الخلفية عن طريق ضبط لون خلفية body لصفحتك في CSS وحتى استخدام التدرجات أو الصور.

في index.css أضف التالي:

Copy
body {
  margin: 0;
  background-color: #d9afd9;
  background-image: linear-gradient(0deg, #d9afd9 0%, #97d9e1 100%);
}

هذا تدرج وجدته على Grabient.

الآن مشهدنا يحتوي على خلفية جميلة.

لا يمكننا دائمًا الاعتماد على خلفية الصفحة لضبط لون خلفية مشهدنا. على سبيل المثال إذا كنا نريد استخدام الضباب، فإنه يتطلب من المشهد أن يحتوي على لون خلفية.

لإضافة لون خلفية لمشهدنا، نحتاج إلى ربط مكون color بخصائص background للمشهد scene.

لنضف خلفية زرقاء داكنة لمشهدنا:

Copy
<Canvas camera={{ position: [-3, 1.5, 12], fov: 30 }}>
  <color attach="background" args={["#171720"]} />
  {/* ... */}
</Canvas>

الآن يحتوي مشهد 3D الخاص بنا على خلفية ويخفي تدرج الصفحة.

الآن لندع بعض الضباب في مشهدنا:

Copy
<Canvas camera={{ position: [-3, 1.5, 12], fov: 30 }}>
  <color attach="background" args={["#171720"]} />
  <fog attach="fog" args={["#171720", 20, 30]} />
  {/* ... */}
</Canvas>

مكون fog يأخذ 3 معاملات:

• color: لون الضباب.
• near: المسافة من الكاميرا حيث يبدأ الضباب **.
• far: المسافة من الكاميرا حيث ينتهي الضباب **.

يتلاشى بسلاسة بين المسافات near و far.