توفر Drei مجموعة من أدوات التحكم المفيدة للتنقل في مشهدك والتفاعل مع الكائنات. لنكتشفها.

أدوات التحكم في المدار

لقد استخدمنا بالفعل مكون OrbitControls في الدروس السابقة للتنقل في مشهدنا.

بينما استخدمناه بدون أي props، فإنه يوفر خيارات مفيدة لتخصيص سلوكه.

أولاً، يمكنك تحديد تمكين أو تعطيل الميزات من خلال الخصائص البوليانية التالية:

• enableZoom
• enableRotate
• enablePan

على سبيل المثال، إذا كانت تجربتك تعتمد على التمرير، يمكنك تعطيل التقريب لمنع النزاعات عندما يستخدم المستخدم عجلة الماوس.

ثم، يمكنك تغيير سرعة أدوات التحكم بـ:

• zoomSpeed
• rotateSpeed
• panSpeed

أخيرًا، يمكنك تغيير القيم الدنيا والقصوى للتكبير:

• minZoom
• maxZoom

...والتدوير للأعلى والأسفل:

• minPolarAngle
• maxPolarAngle

...والتدوير لليسار واليمين:

• minAzimuthAngle
• maxAzimuthAngle

...والمسار بـ:

• minDistance
• maxDistance

إذا قمت بتشغيل مشروع البدء، يمكنك رؤية أننا يمكننا الوصول إلى مواضع تبدو بها أخطاء. (أسفل الأرض، من خلال الـmesh، التحريك لعدم إظهار المنارة، إلخ.)

لنقم بتجميع بعض هذه الخصائص لإنشاء تجربة أكثر تقييدًا:

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

انظر كيف تم تقييد الكاميرا الآن لعرض المنارة دائمًا بطريقة جذابة. يمنع المستخدم من الرؤية عبر الكائنات وأسفل الأرض.

تلك التفاصيل الصغيرة يمكن أن تحدث فرقًا كبيرًا في جودة تجاربك.

حيث أن مكون drei هو مجرد غلاف حول فئة OrbitControls من three.js، تحقق من توثيق three.js لرؤية جميع الخصائص المتاحة.

أدوات العرض

PresentationControls بخلاف OrbitControls تتفاعل مع محتوى الكائنات المغلفة، وليس مع الكاميرا. بخلاف ذلك، هما متشابهان جدًا.

إليك الكود النموذجي من توثيق drei