عند استخدام مكتبة ThreeJS للعرض في المستعرض ، يكون المثال الأول عادةً مكعبًا أو كائنًا أوليًا آخر ، ويتم إنشاؤه باستخدام فئات BoxGeometry أو SphereGeometry الخاصة المحددة مسبقًا. ثم ، عادة ما يتم النظر في استخدام النماذج الجاهزة المستوردة والعمل معها.
لكن في بعض الأحيان تحتاج إلى إنشاء كائن ثلاثي الأبعاد لعرضه في المستعرض تمامًا من البداية - فقط باستخدام الهندسة التحليلية. تتناول هذه المقالة مثل هذا النهج لإنشاء نماذج قابلة للتخصيص بشكل تفاعلي وعرضها اللاحق في المستعرض.
في حالة استخدام OpenGL و C / C ++ لعرض الكائنات خارج المستعرض ، فهناك مكتبات جاهزة للوظائف المناظرة ، ومن الصعب جدًا العثور على مكتبة مناسبة في JavaScript . تهدف المكتبات الحالية ، مثل glMatrix ، بشكل رئيسي إلى التحولات الهندسية - التناوب ، الحركة ، تحجيم النماذج. لإنشاء كائنات ثلاثية الأبعاد من نقطة الصفر باستخدام طرق هندسية تحليلية ، هناك حاجة إلى وظائف مختلفة تمامًا يمكن أن تؤدي ، على سبيل المثال ، الإجراءات التالية - العثور على نقطة تقاطع خطوط على المستوى ، والعثور على نقاط التقاطع بين دائرتين على المستوى ، وإنشاء طائرة من متجهها ونقطة وضعها الطبيعي ، والعثور على نقطة التقاطع ثلاث طائرات وما شابه ذلك. تحقيقًا لهذه الغاية ، تم إنشاء مكتبة WebGeometry صغيرة.
منذ عام ونصف ، نشرت مقالة قصيرة عنها. يمكن العثور عليها
على الرابط .
منذ حوالي ستة أشهر ، قررت العودة إلى هذا الموضوع وأقول بالتفصيل قدر الإمكان مع الكثير من الأمثلة حول إنشاء نماذج من نقطة الصفر باستخدام WebGeometry . في البداية افترضت أنني سأدير حوالي ثلاثة مقالات ، لكن في هذه العملية قررت التوقف عن كتابة المقالات وإنشاء موقع على شبكة الإنترنت. وكانت النتيجة عبارة عن موقع إلكتروني يتكون من ثلاثين درسًا (دعوتهم فصولًا):
Three.js والهندسة
جميع النماذج ثلاثية الأبعاد المعروضة باستخدام ThreeJS مصنوعة بطريقة تفاعلية قدر الإمكان ويتم تضمينها مباشرة في نص الموقع. إذا كنت تقرأ عن كيفية صنع هذا النموذج أو ذاك ، فيمكنك الاطلاع على رقم قمة الرأس ، المذكور في النص واسم وجه النموذج وزوايا ميل الوجوه وحتى إحداثيات أي نقطة في النموذج المعني دون ترك الموقع مباشرة على النموذج النص على الموقع.
يناقش الفصلان الأولان المعروضان على الموقع بعض جوانب استخدام مكتبة ThreeJS المطبقة على الطرز المستقبلية. من المفترض أن يكون القارئ معتادًا بالفعل على كيفية إنشاء برامج بسيطة تستند إلى ThreeJS .
يصف الفصلان التاليان العمل مع الدالات ثنائية الأبعاد لمكتبة WebGeometry . يتم إعطاء العديد من الأمثلة ذات الصلة. جميع الأمثلة تفاعلية ويتم عرض نتيجة عملهم باستخدام HTML5 Canvas . قد يكون من المثير للاهتمام النظر إلى الرسومات التفاعلية في الفصول 14 و 18 و 20 و 23 و 28.
بدءًا من الفصل الخامس ، يمكنك رؤية تطبيق وظائف مكتبة WebGeometry لإنشاء نماذج ثلاثية الأبعاد معقدة. تم اختيار Polyhedra كنماذج ، وبشكل أكثر دقة ، جوانب من الأحجار الكريمة. في رأيي ، لا توجد كائنات أخرى يمكن من خلالها إظهار أفضل لتطبيق الوظائف التي تنفذ أساليب الهندسة التحليلية. يمكن الإدلاء بهذا البيان لعدة أسباب.
- يتم تطوير كل هذه الوجوه المتعددة بدقة صارمة وفقًا للقوانين الرياضية.
- لا تملك هذه الأشكال المتعددة الأشكال بنية منتظمة تمامًا ، مثل المواد الصلبة الأفلاطونية (المكعب ، رباعي السطوح ، ...) ، على الرغم من أنها تتمتع بالتماثل وهي جميلة جدًا.
- نظرًا لعدم وجود هيكل منتظم لهذه الأشكال المتعددة ، فمن الضروري استخدام مجموعة واسعة من الحسابات الهندسية لتحديد إحداثيات رؤوسها ، بدلاً من حصر أنفسنا في مهمة صعبة في برنامج الإحداثيات لرؤوس النموذج المأخوذة من مصادر مختلفة.
- لا تحتاج إلى معرفة أي معلومات أولية حول الخفض. من الضروري فقط أن نتذكر أن الجزء العلوي من الشكل المتعدد السطوح يسمى التاج ، والجزء الأوسط - الحزام ، والجناح السفلي. ويسمى الوجه العلوي منصة ، وأقل ذروة هو calet.
يمكن تغيير جميع الأشكال المتعددة السطوح (والرسومات) على الموقع من خلال تعيين معلمات النموذج. يجب أن تكون نقطة واحدة فقط. من المفترض أن تظل جميع النماذج تقريبًا (مع استثناءات قليلة) محدبة مع أي تغيير في قيم المعلمات. لذلك ، فإن بعض الأشكال المتعددة الأشكال تغير شكلها إلى حدٍ كبير. للتحقق من محدب ، وظيفة خاصة هي المسؤولة. إذا قمت بإلغاء هذا الفحص ، فيمكنك الحصول على أشكال غير متوقعة تمامًا من الكائنات (من الصعب تسمية أشكال متعددة الوجوه). قد تكون بعض هذه الأشكال موضع اهتمام ، ربما ، لفنانين من لوحات الخيال العلمي (انظر لقطات في نهاية الفصلين 10 و 13).
يتم إجراء معظم وظائف مكتبة WebGeometry باستخدام تحويلات المصفوفة. ولكن لبناء النماذج ، من غير المرجح أن تكون معرفة المصفوفات مطلوبة ، حيث يتم إخفاء المصفوفات داخل الوظائف الأخرى المستخدمة. على سبيل المثال ، دالة تحدد نقطة تقاطع ثلاث طائرات.
سأدلي بملاحظة واحدة ، والتي تبدو للوهلة الأولى زائدة عن الحاجة وتافهة للغاية ، لكن ربما سيكون ذلك مفيدًا لشخص ما في المستقبل. يكمن في حقيقة أنه من خلال ثلاث نقاط لا تكذب على نفس الخط ، يمكنك رسم طائرة واحدة فقط. لنفترض أن وجه متعدد السطوح هو رباعي الزوايا. يتم تحديد معادلة الطائرة التي يكمن فيها هذا الوجه بثلاث نقاط. لا يتم تضمين إحداثيات النقطة الرابعة من هذا الرباعي في هذه المعادلة ، ولكن النقطة الرابعة نفسها تنتمي إلى وجه آخر من متعدد السطوح ، والتي يتم حسابها أيضًا. من الصعب في بعض الأحيان ملاحظة أن رباعي الطائرة الأولى (أو الثانية) قد تم كسره نظرًا لحقيقة أنه يبدو بصريًا أن هذه النقطة الرابعة تخص طائرتين في وقت واحد ، لكن في الواقع هذا ليس كذلك. يصعب ملاحظة هذا الخطأ عند النظر في نموذج تم إنشاؤه بالفعل. انها فجأة يزحف بعد فترة طويلة وبشكل غير متوقع تماما. جئت عبر هذا عدة مرات.
شكرا لكم جميعا على اهتمامكم! بالإضافة إلى عرض الموقع ، يمكنك الذهاب إلى
مستودع بلدي .