في مشهد ثلاثي الأبعاد، تعتبر الكاميرا هي نقطة رؤية المستخدم. الكاميرا هي التي تحدد ما يراه المستخدم على الشاشة.

في threejs هناك أنواع مختلفة من الكاميرات. حاليًا سنغطي الأنواع الثلاثة الشائعة فقط: الكاميرا المنظورية و الكاميرا العمودية و الكاميرا المكعبة.

قبل التعمق في الأنواع المختلفة من الكاميرات المتاحة، دعونا نضيف OrbitControls إلى مشروعنا.

ضوابط المدارات

ضوابط المدارات هي مجموعة من الضوابط التي تسمح للمستخدم بتحريك الكاميرا حول المشهد.

سوف نرى كيفية استخدامها بعمق لاحقًا، لكننا سنبدأ باستخدامها من الآن حتى نتمكن من تحريك الكاميرا لفهم أفضل للأنواع المختلفة من الكاميرات.

استورد وأضف المكون OrbitControls من حزمة @react-three/drei إلى المكون Canvas:

Copy
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <>
      <Canvas>
        <OrbitControls />
      </Canvas>
    </>
  );
}

يمكنك الآن تحريك الكاميرا حول المشهد:

• انقر بالزر الأيسر مع السحب: لتدوير الكاميرا
• عجلة الماوس: للتكبير والتصغير
• انقر بالزر الأيمن مع السحب: لتحريك الكاميرا

كما أنه متوافق مع الأجهزة اللمسية:

• إصبع واحد مع السحب: لتدوير الكاميرا
• إصبعان مع القرص: للتكبير والتصغير
• إصبعان مع السحب: لتحريك الكاميرا

الكاميرا المنظورية

في r3f، تكون الكاميرا الافتراضية الكاميرا المنظورية. وهي الكاميرا الأكثر شيوعًا في التطبيقات ثلاثية الأبعاد لأنها تحاكي الطريقة التي يرى بها العين البشرية العالم.

لأنها الكاميرا الافتراضية، لا نحتاج إلى إضافتها إلى المشهد. فهي موجودة بالفعل ويمكننا التحكم بها عن طريق إضافة خاصية camera إلى مكون Canvas:

Copy
<Canvas camera={{ position: [3, 3, 3] }}>

ولكن يمكنك أيضًا إضافة كاميرا جديدة إلى المشهد يدويًا.

وإضافة مكون PerspectiveCamera في أي مكان في مكون Canvas مع خاصية makeDefault. ستجعل هذه الكاميرا الكاميرا الافتراضية للمشهد:

Copy
<Canvas>
  <PerspectiveCamera position={[0, 8, 0]} makeDefault />
</Canvas>

الآن الكاميرا في أعلى المشهد:

بشكل افتراضي، الكاميرا تنظر إلى مركز المشهد: [0, 0, 0]. سنرى في الدروس القادمة كيفية تغيير الهدف للكاميرا للرسوم المتحركة.

الكاميرا المنظورية تحتوي على مجال الرؤية، نسبة عرض إلى ارتفاع، ومستوى قطع قريب/بعيد.

مجال الرؤية

مجال الرؤية هو زاوية الكاميرا. إنها الزاوية من الجانب السفلي إلى العلوي للكاميرا.

يتم تحديد مجال الرؤية بالدرجات. القيمة الافتراضية هي 75 درجة.

هذا ما نراه حاليًا في مشهدنا:

الآن دعونا نغير مجال الرؤية إلى 30 درجة:

Copy
<Canvas camera={{ position: [3, 3, 3], fov: 30 }}>
{/* ... */}

أو

Copy
<Canvas>
  <PerspectiveCamera makeDefault position={[3, 3, 3]} fov={30} />
  {/* ... */}

هذا ما نراه الآن:

عن طريق تقليل مجال الرؤية، نرى الآن أقل من المشهد وتظهر الأجسام أكبر. إنه كما لو كنا نقوم بتكبير.

نسبة العرض إلى الارتفاع

نسبة العرض إلى الارتفاع هي النسبة بين عرض وارتفاع الكاميرا. ويتم تعريفها كـ width / height.

القيمة الافتراضية هي window.innerWidth / window.innerHeight.

لنقم بتغيير نسبة العرض إلى الارتفاع إلى 1. نستخدم الخاصية aspect ونحتاج إلى تعيين الخاصية manual إلى true لمنع r3f من حساب نسبة العرض إلى الارتفاع تلقائيًا: