Wawa Sensei logo

Text

Starter pack

इस अध्याय में, हम React Three Fiber अनुभवों में 2D और 3D text जोड़ने का तरीका सीखेंगे।

हम जानेंगे कि custom fonts का उपयोग कैसे करें, सामान्य गलतियों से बचें, और कुछ उपयोगी तकनीकों का उपयोग करके अच्छे प्रभाव कैसे बनाएं।

यह पाठ HTML Canvas के माध्यम से दृश्य में सीधे टेक्स्ट जोड़ने के बारे में है जैसे अन्य 3D वस्तुएं। ऐसा करके, यह 3D दुनिया में पूरी तरह से एकीकृत हो जाता है क्योंकि यह रोशनी, छाया और कैमरे से प्रभावित होता है।

लेकिन लिखा हुआ टेक्स्ट चयनने योग्य नहीं है, सुलभ नहीं है, और खोज इंजन द्वारा अनुक्रमित नहीं है। यह कुछ ध्यान में रखने योग्य है कि जब आप अपने प्रोजेक्ट बना रहे होते हैं तो टेक्स्ट प्रदर्शित करने का सही तरीका चुनने के लिए।

जब आवश्यक हो तो HTML टेक्स्ट का उपयोग करने पर विचार करें।

2D Text

React Three Fiber scene में टेक्स्ट जोड़ने का सबसे सरल तरीका 2D टेक्स्ट प्रदर्शित करना है। ऐसा करने के लिए, हम drei लाइब्रेरी से Text component का उपयोग करेंगे।

हम लकड़ी के साइन में "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>
      {/* ... */}
    </>
  );
};

उस group में जिसमें लकड़ी का साइन शामिल है, हम child के रूप में प्रदर्शित करने के लिए वांछित टेक्स्ट के साथ एक Text component जोड़ते हैं। हम इसे लकड़ी जैसा दिखाने के लिए एक भूरे रंग का meshStandardMaterial भी जोड़ते हैं।

रंग खोजने की एक तकनीक जिसे मैं पसंद करता हूं वह है Chrome inspector पिकर का उपयोग करना। मैं <body> टैग में color: red; जोड़ता हूं, और फिर मैं पिकर का उपयोग उस रंग को खोजने के लिए कर सकता हूं जो मैं चाहता हूं।

Chrome color picker

फिर मैं दृश्य से वांछित रंग पर hover कर सकता हूं और हैक्साडेसीमल मूल्य कॉपी कर सकता हूं।

हां, इसके लिए टूल्स भी हैं, लेकिन मुझे Developer Tools की सादगी पसंद है।

अब तक, टेक्स्ट बहुत बड़ा है और सही ढंग से स्थित नहीं है।

Text too big

इसे ठीक करने के लिए, हम fontSize और position प्रॉप्स का उपयोग कर सकते हैं:

 <Text fontSize={0.3} position={[0, 1.2, 0.01]}>

Text with correct size and position

यह बेहतर है। जबकि आकार सही है, यह साइन को ओवरफ्लो करता है। अच्छा होगा कि टेक्स्ट मध्यित और लिपटा हुआ हो (अगली पंक्ति में जाने जब यह साइन के अंत तक पहुँचता है)।

हम इसे maxWidth और textAlign प्रॉप्स का उपयोग करके ठीक कर सकते हैं:

End of lesson preview

To get access to the entire lesson, you need to purchase the course.

Buy now - $85
< Html
Loading Screen >