Wawa Sensei logo

Controls

Starter pack

Drei आपके दृश्य में नेविगेट करने और वस्तुओं के साथ इंटरैक्ट करने के लिए उपयोगी नियंत्रणों का एक सेट प्रदान करता है। आइए इन्हें जानें।

Orbit Controls

हमने अपने दृश्य में नेविगेट करने के लिए पहले से ही OrbitControls component का उपयोग किया है।

हालांकि हमने इसे बिना किसी props के उपयोग किया है, यह इसके व्यवहार को अनुकूलित करने के लिए उपयोगी विकल्प प्रदान करता है।

पहले, आप निम्नलिखित boolean props के साथ सुविधाओं को सक्षम या अक्षम करने का निर्णय ले सकते हैं:

  • enableZoom
  • enableRotate
  • enablePan

उदाहरण के लिए, यदि आपका अनुभव स्क्रॉल-आधारित है, तो आप माउस व्हील के उपयोग के समय कॉन्फ्लिक्ट को रोकने के लिए ज़ूम को अक्षम कर सकते हैं।

फिर, आप निम्नलिखित के साथ नियंत्रणों की गति को बदल सकते हैं:

  • zoomSpeed
  • rotateSpeed
  • panSpeed

अंत में, आप ज़ूम के न्यूनतम और अधिकतम मान बदल सकते हैं:

  • minZoom
  • maxZoom

...ऊपर और नीचे रोटेशन:

  • minPolarAngle
  • maxPolarAngle

...बाएँ और दाएँ रोटेशन:

  • minAzimuthAngle
  • maxAzimuthAngle

...और पैन के साथ:

  • minDistance
  • maxDistance

यदि आप स्टार्टर प्रोजेक्ट चलाते हैं, तो आप देख सकते हैं कि हम उन स्थितियों तक पहुँच सकते हैं जो गड़बड़ दिखती हैं। (जमीन के नीचे, mesh के माध्यम से, पैन करना ताकि लाइटहाउस न दिखे, आदि)

आइए इनमें से कुछ props को मिलाकर एक अधिक बाधित अनुभव बनाते हैं:

<OrbitControls
  enablePan={false}
  maxPolarAngle={Math.PI / 2}
  minAzimuthAngle={-Math.PI / 2}
  maxAzimuthAngle={Math.PI / 2}
  minDistance={3}
  maxDistance={10}
/>

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

ये छोटे विवरण आपके अनुभवों की गुणवत्ता में बड़ा फर्क ला सकते हैं।

चूंकि drei component सिर्फ OrbitControls class के चारों ओर एक wrapper है three.js से, तो सभी उपलब्ध props को देखने के लिए three.js documentation देखें।

प्रस्तुतीकरण नियंत्रण

PresentationControls, OrbitControls के विपरीत, wrapper objects की सामग्री के साथ इंटरैक्ट करते हैं, न कि कैमरा के साथ। इसके अलावा, वे बहुत समान हैं।

यहां drei दस्तावेज़ीकरण से सैम्पल कोड है:

End of lesson preview

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

Buy now - $85
< TypeScript
Events >