تعليق: لقد رأينا مدى تعبها لاستخدام واجهة برمجة تطبيقات WebGL الأصلية لتطويرها ، لأنه تم تطوير عدد كبير من أطر عمل WebGL. تغلف هذه الأطر عناصر مختلفة من إنشاء مشاهد ثلاثية الأبعاد بدرجات متفاوتة. يمكنك إنشاء المشاهد ثلاثية الأبعاد المطلوبة بسرعة. يمكن للأصدقاء المهتمين التعرف على ذلك. ربما سيكون هذا المقال مفيدًا لك.
لقد رأينا مدى تعبها لاستخدام تطوير واجهة برمجة تطبيقات WebGL الأصلية. لهذا السبب ، تم تطوير عدد كبير من أطر عمل الويب. مع هذه الأطر ، يمكنك إنشاء المشاهد ثلاثية الأبعاد المطلوبة بسرعة. تغلف هذه الأطر عناصر مختلفة من إنشاء مشاهد ثلاثية الأبعاد بدرجات متفاوتة ، مثل المشاهد ، والكاميرات ، والموديلات ، والإضاءة ، والمواد ، وما إلى ذلك ؛ باستخدام هذه الكائنات المغطاة ، يمكنك بسهولة إنشاء المشاهد ثلاثية الأبعاد المطلوبة ، بحيث تحتاج فقط إلى تركيز المزيد من الطاقة على المنطق.
في الوقت الحاضر ، لا أحد لديه ميزة الأطر الأخرى الساحقة. أي نوع من الإطار للاختيار يعتمد على تفضيلاتك الشخصية. ومع ذلك ، عند اختيار إطار عمل ، أعتقد شخصيا أنه من الأفضل أن ننظر إلى آخر وقت تحديث للإطار. يمكن أن يؤدي اختيار إطار محدث مستقر دائمًا إلى استخدام أحدث الميزات وجعل البرنامج أكثر استقرارًا.
يستخدم المثال التالي إطار عمل Three.js للتنمية.
Three.js هو إطار شامل مفتوح المصدر ، وهو مغلف بشكل جيد مع عناصر مختلفة من المشاهد ثلاثية الأبعاد. يمكنك استخدامه لإنشاء الكاميرات والموديلات والإضاءة والمواد والمزيد بسهولة. يمكنك أيضًا اختيار عارضين مختلفين. يوفر Three.js مجموعة متنوعة من طرق التقديم. يمكنك اختيار استخدام Canvas لتقديم أو استخدام WebGL أو SVG لتقديمه.
بالإضافة إلى ذلك ، يمكن لـ Three.js تحميل ملفات ثلاثية الأبعاد في العديد من التنسيقات ، ويمكن أن تأتي ملفات النموذج الخاصة بك من Blender و Maya و Chinema4D و 3Dmax ، وما إلى ذلك ، وتتميز بأشياء أساسية نسبيًا: (كرات) كرات ، (الطائرات) ، مكعبات (مكعبات) ، (أسطوانات). Three.js يخلق هذه الكائنات بسهولة شديدة.
حسنًا ، لا تتحدث هراء ، فقط انظر إلى الكود:
<! doctype html>
<html>
<head>
<title> threejsdemo </title>
<meta charset = "utf-8">
<style>
جسم
{
الهامش: 0px ؛
خلفية اللون:#B0B0B0 ؛
الحمل الزائد: مخفي.
}
</style>
</head>
<body>
<script src = "three.js"> </script>
<script>
var camera ، المشهد ، العارض ؛
فار شبكة
init () ؛
تحريك () ؛
وظيفة init () {
المشهد = جديد three.scene () ؛
كاميرا = جديدة three.perspectivecamera (70 ، window.innerwidth /window.innerheight،1،1000) ؛
camera.position.z = 400 ؛
المشهد. add (الكاميرا) ؛
هندسة = Three.Cubegeometry New (200،200،200) ؛
material = new three.meshbasicmaterial ({color: 0xFF0000 ، Wireframe: true}) ؛
شبكة = ثلاثة.
المشهد. add (شبكة) ؛
العارض = جديد three.webglrenderer () ؛
Renderer.SetSize (window.innerwidth ، window.innerheight) ؛
document.body.appendChild (Renderer.Domelement) ؛
}
دالة animate () {
requestAnimationFrame (تحريك) ؛
mesh.rotation.x += 0.05 ؛
mesh.rotation.y += 0.05 ؛
Renderer.render (المشهد ، الكاميرا) ؛
}
</script>
</body>
</html>
هذا هو كل الرمز ، مقارنة بالرمز السابق باستخدام WebGL API ، وهذا ببساطة بسيط للغاية.
الكود بديهي للغاية ، فقط بضع خطوات:
1. إنشاء مشهد مشهد.
2. إنشاء كاميرا كاميرا.
3. إنشاء/تحميل هندسة النموذج.
4. تحميل المادة.
5. جعل شبكة كائن النموذج (تتكون من الهندسة والمواد).
6. تمكين الرسوم المتحركة.
هذه ميزة توفرها كل إطار. إن استخدام أطر عمل مختلفة هو نفسه في الأساس باستثناء أن أسماء الوظائف قد تكون مختلفة. يسرد المرجع التالي العديد من مستندات التعلم الإطارية ، يمكنك اختيار عدة طرق للتعلم.
فيما يتعلق ببيانات النموذج ، أود أن أقول شيئًا واحدًا ، لأن JSON قصير وموجز ، فهو أكثر ملاءمة لنقل الشبكة. في المستقبل ، قد يصبح تنسيق بيانات النموذج الأنسب لـ WebGL ، حيث بدأت العديد من الأطر في دعم بيانات النموذج بتنسيق JSON.
المرجع العملي:
مركز التطوير: https://developer.mozilla.org/en/webgl
أدوات التطوير الممتازة عبر الإنترنت:
البرامج التعليمية الأساسية لمختلف الأطر:
البرنامج التعليمي الصيني WebGL:؟ P = 42
تعليمي OAK3D الصيني:؟ Cat = 57
الموقع الرسمي cubicvr3d:
مكتبة الرسومات Three.js: https://github.com/mrdoob/three.js
مشاركات جمع الإطارات المختلفة: