النص
في هذا الفصل، سنتعلم كيفية إضافة نصوص ثنائية الأبعاد و ثلاثية الأبعاد إلى تجارب React Three Fiber.
سنرى كيفية استخدام الخطوط المخصصة، تجنب المشاكل الشائعة، وبعض التقنيات المفيدة لخلق تأثيرات لطيفة.
هذه الدرس يتعلق بإضافة نص مباشر إلى المشهد من خلال HTML Canvas مثل الكائنات ثلاثية الأبعاد الأخرى. وبهذا الطريقة، يتم دمجها بشكل مثالي في العالم ثلاثي الأبعاد بتأثير الضوء والظلال والكاميرا.
ولكن النص المكتوب هو غير قابل للتحديد، غير قابل للوصول، وغير مفهرس بواسطة محركات البحث. يجب الانتباه لهذا لاختيار الطريقة الصحيحة لعرض النص عند إنشاء مشاريعك.
ضع في اعتبارك استخدام نصوص HTML عند الضرورة.
النص ثنائي الأبعاد
أسهل طريقة لإضافة النص إلى مشهد React Three Fiber هي عرض نص ثنائي الأبعاد. للقيام بذلك، سنستخدم مكون Text من مكتبة drei.
سنضيف نص "Hyrule Castle" إلى اللوحة الخشبية:
import { Text } from "drei"; // ... export const Experience = () => { const woodenSign = useGLTF("models/Wooden Sign.glb"); return ( <> <group position-x={-1.5} rotation-y={THREE.MathUtils.degToRad(15)}> <primitive object={woodenSign.scene} /> <Text> Hyrule Castle <meshStandardMaterial color={"#803d1c"} /> </Text> </group> {/* ... */} </> ); };
في المجموعة التي تحتوي على اللوحة الخشبية، نضيف مكون Text مع النص الذي نريد عرضه كـ طفل. نضيف أيضًا meshStandardMaterial بلون بني ليبدو كخشب.
أحد التقنيات التي أحب استخدامها لإيجاد الألوان هو استخدام أداة الاختيار في Chrome inspector. أضيف color: red; إلى علامة <body>، ثم أستطيع استخدام الأداة لإيجاد اللون الذي أريده.
ثم أستطيع التنقل فوق اللون الذي أريده من المشهد و نسخ القيمة السداسية العشرية.
نعم هناك أدوات للقيام بذلك، لكني أحب البساطة في استخدام أدوات المطورين.
حتى الآن النص كبير جدًا وليس موضوعًا بشكل صحيح.
لحل هذا، يمكننا استخدام خصائص fontSize و position:
<Text fontSize={0.3} position={[0, 1.2, 0.01]}>
هذا أفضل. على الرغم من أن الحجم صحيح، إلا أنه يفيض من اللوحة. مما سيكون جيدًا هو أن يكون النص مركزيًا و محتوى (ينتقل إلى السطر التالي عند بلوغه نهاية اللوحة).
يمكننا حل ذلك باستخدام خصائص maxWidth و textAlign:
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.
