الإضاءة
في الرسوميات ثلاثية الأبعاد، تُستخدم الأضواء لإضاءة الأجسام في المشهد. يمكن استخدامها لمحاكاة الضوء القادم من الشمس، مصباح، أو أي مصدر ضوء آخر.
قم بتشغيل الكود الابتدائي:
كما ترى، المشهد مظلم تمامًا.
هذا لأنه لم نضف أي ضوء إليه بعد والمواد المستخدمة هي <meshStandardMaterial />.
دعونا نكتشف الأنواع المختلفة من الأضواء المتوفرة في Three.js.
الضوء المحيط
أبسط أنواع الإضاءة هو الضوء المحيط. يضيء جميع الأجسام في المشهد بشكل متساوٍ، بغض النظر عن موقعها أو اتجاهها.
تعرف الخاصية intensity شدة سطوع الضوء. القيمة الافتراضية هي 1:
<ambientLight intensity={0.5} />
تحدد خاصية color لون الضوء. القيمة الافتراضية هي #ffffff (أبيض):
<ambientLight intensity={0.5} color={"royalblue"} />
الضوء الاتجاهي
الـ ضوء الاتجاهي هو ضوء بعيد بلا حدود.
يضيء جميع الكائنات في المشهد من اتجاه محدد.
يتم تحديد اتجاه الضوء بواسطة الـ position و target props.
بما أن القيمة الافتراضية لـ target هي (0, 0, 0)، يمكننا فقط استخدام خاصية position لتحديد اتجاه الضوء.
<directionalLight position={[3, 3, 3]} intensity={0.5} />
كما هو الحال مع الضوء المحيط، يحتوي الضوء الاتجاهي على خاصية color و intensity.
حاول أن تغيّر لون المكعب إلى الأبيض وتضيف أضواء اتجاهية متعددة بألوان مختلفة لترى كيف تتفاعل مع بعضها البعض:
React Three Fiber: The Ultimate Guide to 3D Web Development
✨ You have reached the end of the preview ✨
Go to the next level with Three.js and React Three Fiber!
Get full access to this lesson and the complete course when you enroll:
- 🔓 Full lesson videos with no limits
- 💻 Access to the final source code
- 🎓 Course progress tracking & completion
- 💬 Invite to our private Discord community
One-time payment. Lifetime updates included.
