يمكن تنفيذ الرسومات ثلاثية الأبعاد في المستعرض ليس فقط باستخدام WebGL أو
المكتبات بناءً على WebGL ، ولكن أيضًا من خلال العرض البسيط على قماش ثنائي الأبعاد باستخدام وظائف HTML5 Canvas لهذا الغرض .
هناك العديد من الكتب والمقالات والمعلومات على الإنترنت حول كيفية استخدام
HTML5 Canvas لعرض الرسومات والرسوم البيانية وحتى الرسوم المتحركة في بعض ألعاب المتصفح.
ومع ذلك ، فإن إمكانية استخدام اللوحة مباشرة لعرض الكائنات ثلاثية الأبعاد لا يتم اعتبارها تقريبًا.
دعونا نتناول هذا بمزيد من التفصيل.
إذا تم إنشاء لعبة كمبيوتر ثلاثية الأبعاد ، على سبيل المثال مطلق النار ثلاثي الأبعاد ، فإن المطورين يحاولون جعلها واقعية قدر الإمكان واستخدام مسرعات الرسومات لهذا الغرض. في هذه الحالة ، لن يكون من الممكن الاستغناء عن أدوات البرمجيات المناسبة. لمثل هذه الألعاب في المتصفح ، من المنطقي استخدام WebGL و Three.js . الأهم من ذلك ، بمساعدة أجهزة تظليل مصممة لأدوات البرامج هذه ، يمكنك تحقيق إضاءة واقعية للمشهد والأشياء الموجودة على المشهد.
لكن اذا كنت بحاجة فقط لاظهار كائن ثلاثي الأبعاد من جميع الجهات، ثم يمكنك القيام به دون تقنية WebGL و تظليل . على سبيل المثال ، بعض برامج CAD / CAM مخصصة فقط لنمذجة شكل الأشياء ولا تتضمن استخدام إضاءة واقعية.
في موقع Canvas and Geometry ، أشرح باستمرار وبتفصيل كبير كيفية استخدام لوحة HTML5 Canvas حصريًا ، يمكنك إنشاء صور لنماذج ثلاثية الأبعاد ثلاثية الأبعاد .
قبل ستة أشهر ، تم نشر مقالتي Three.js والهندسة ، التي تنتمي إلى سلسلة من 30 فصلاً (دروس) على موقع يحمل نفس الاسم Three.js والهندسة حيث
وصفت عرض نماذج ثلاثية الأبعاد ثلاثية الأبعاد باستخدام three.js . يتم الآن إنشاء جميع النماذج على الموقع الجديد باستخدام HTML5 Canvas فقط . ومع ذلك ، يتم حساب إحداثيات رؤوس النماذج على كلا الموقعين تمامًا. الاختلاف الوحيد هو في طريقة عرض الصورة على الشاشة.
— three.js . .
, -:
- , ..
- .
- .
- ( three.js RayCaster').
- .
- . / .
- 3D- . three.js .
- .
- .
- .
WebGL/three.js — Z-.
Canvas ( ) .
online- JavaScript.
, prototype WebGeometry, . prototype. JavaScript. «», . .
C/C++ JavaScript .
, ( Chrome Firefox) Notepad++ JavaScript — —
.
, .
.
( ) Visual Studio.
, ,
Visul C++ . Chrome Firefox .
JavaScript React, Angular, Vue.
. . ( ) ES6.
.
online- . , , , ( ) .
تم
إنشاء مكتبة canvas2D لتقديم النماذج وحجمها على اللوحة القماشية ،
التي هي في الواقع غلاف صغير حول وظائف HTML5 Canvas .
في الوقت نفسه ، يتم إجراء الوظائف المضمنة في مكتبة canvas2D بطريقة تجعلها أكثر ملاءمة للاستخدام مع الوظائف المضمنة في مكتبة
WebGeometry.
WebGeometry. , , 3D- . , . WebGeometry
, , .
. هندسة الويب . إذا كنت بحاجة إلى إجراء مثل هذه التحويلات ، فيمكن العثور على الوظائف المقابلة ، إذا كنت تستخدم three.js ، ثم في هذه المكتبة نفسها أو في مكتبة glMatrix الشائعة
ومع ذلك ، فإن هاتين المكتبتين المذكورين ليس لهما أي وظائف لحل مشاكل الهندسة التحليلية.
لذلك ، تم عمل مكتبة وظائف WebGeometry . تحتوي مكتبة
سيلفستر على بعض هذه الوظائف (ولكن ليس كلها مطلوبة) ، لذلك قررت أن أجعل مكتبة مناسبة تمامًا لمهماتي من البداية بناءً على الوظائف الموجودة في C / C ++ .
, three.js.
OpenGL OpenGL .
, , .
, ,
:
Three.js 16 WebGeometry ( ), three.js.
Diamond Cuts 7 WebGeometry three.js. .
three.js.
Diamond Cuts collection in environments
Diamond Cuts with Dispersion Light .
three.js.
Visual C++ . (three.js API WebGL).
الصفحات ، يمكنك الذهاب إلى صفحات هذا الموقع التي تحتوي على 36 نماذج من التخفيضات المختلفة.
يتم عرض هذه الصفحات باستخدام واجهة برمجة تطبيقات WebGL الخالصة.
يمكنك أيضًا من هنا تنزيلملف exe- الخاص ببرنامجي لنظام التشغيل Windows المصنوع في C / C ++
و OpenGL لعرض نماذج القطع. يتم تنزيل ملفات DLL الخاصة بالعديد من النماذج من نفس الصفحة.
- على الصفحات
تألقي ايتها الماسة المجنونة! على نفس الموقع ، يمكنكالانتقال على خشبة المسرحإلى موسيقى Pink Floyd والمجموعات الموسيقية الأخرى وإلقاء نظرة على نماذج القطع. التحكم في الحركة - الماوس ولوحة المفاتيح (← ، ← ، ↑ ، ↓ ، <،>) كما هو الحال في ألعاب الكمبيوتر. يتم العرض باستخدام three.js .
في رأيي ، تبين أنها مثيرة للاهتمام للغاية. لا تنس تشغيل الصوت عند المشاهدة!
آمل أن تساعد مواقعي أولئك الذين يدرسون ويستخدمون الرسومات ثلاثية الأبعاد والهندسة الحسابية. بالإضافة إلى تصفح المواقع ، يمكنك الذهاب إلى مستودعي .
شكرا للجميع على مشاهدة مقالتي!