أدى إدخال العرض ثلاثي الأبعاد إلى تحويل تفاعل المستخدم مع تقنيات الإنترنت. كبداية ، أصبحت تطبيقات الويب أكثر شمولاً ، مما يوفر تجربة تفاعلية وجذابة عبر متصفح الويب.
تم بالفعل اعتماد هذه التكنولوجيا بشغف من خلال مجالات الألعاب والواقع المعزز / الافتراضي. يوفر طريقة واقعية وغامرة للتفاعل مع العناصر الافتراضية.
تعرف على كيفية تصيير الكائنات ثلاثية الأبعاد في تطبيق React.
أساسيات البرمجة والنمذجة ثلاثية الأبعاد
قبل أن تبدأ بالعرض ثلاثي الأبعاد ، هناك بعض النقاط التي يجب أن تكون على دراية بها:
- تحتوي الكائنات ثلاثية الأبعاد على نقاط أو رؤوس فردية تحدد بنيتها في ثلاثة أبعاد. يؤدي ضم هذه النقاط إلى إنشاء وجوه تشكل شكل الكائن على الشاشة.
- تتمتع المتصفحات الحديثة بالقدرة المضمنة على عرض ثلاثي الأبعاد باستخدام تقنيات مثل WebGL. يفعلون ذلك من خلال الاستفادة من قوة وحدة المعالجة الرسومية في جهازك لعرض النماذج والمشاهد ثلاثية الأبعاد بسرعة.
- يتكون أي كائن ثلاثي الأبعاد يعرضه متصفحك من ثلاثة مكونات رئيسية. هذه هي المشهد والكاميرا والعارض ، وكلها تلعب دورًا مهمًا. يوفر المشهد المنصة الأساسية لإعداد جميع العناصر ثلاثية الأبعاد ، بما في ذلك الأضواء والكاميرات. تتيح لك الكاميرا عرض الكائن ثلاثي الأبعاد من زوايا مختلفة. أخيرًا ، يقوم العارض بتثبيت المشهد وعرضه أعلى عنصر HTML للوحة الرسم.
عرض ثلاثي الأبعاد باستخدام Three.js و React Three Fiber
Three.js هي مكتبة JavaScript يمكنك استخدامها لعرض كائنات ثلاثية الأبعاد في مستعرض ويب. باستخدام مكوناته المدمجة ، يمكنك بسهولة إنشاء وعرض كائنات ثلاثية الأبعاد في متصفحك جنبًا إلى جنب مع الميزات الأخرى لتطبيق React الخاص بك.
تعمل حزمة الألياف ثلاثية التفاعل أعلى Three.js. يبسط عملية استخدام مكونات Three.js لإنشاء وعرض كائنات ثلاثية الأبعاد في المستعرض. ومن المثير للاهتمام ، أنه يوفر أيضًا العرف رد فعل الخطافات مفيدة أثناء إنشاء كائنات ثلاثية الأبعاد في React.
عرض كائنات ثلاثية الأبعاد في تطبيق React
اتبع الخطوات أدناه لعرض شكل ثلاثي الأبعاد بسيط على متصفحك بالإضافة إلى نموذج ثلاثي الأبعاد تم إنشاؤه بواسطة Blender. إذا لم تكن معتادًا على Blender ، تعلم كيف تبدأ كمبتدئ.
أنشئ تطبيق React، قم بتشغيل الجهاز لتشغيل الأمر أدناه ، وقم بتثبيت التبعيات المطلوبة:
npm تثبيت ثلاثة @ رد فعل ثلاثة / ليف @ رد فعل ثلاثة / دريقم بتثبيت حزم Three.js و reaction-three-fiber و response-three-drei. تعمل مكتبة React-three-drei جنبًا إلى جنب مع ثلاثة ألياف تفاعلية لإنشاء مشاهد وكائنات ثلاثية الأبعاد.
تقديم شكل ثلاثي الأبعاد
يمكنك عرض شكل مربع ثلاثي الأبعاد بسيط في متصفح برمز صغير جدًا. افتح ال src / app.js file ، احذف كل كود boilerplate React ، وأضف ما يلي:
يستورد تتفاعل من"تتفاعل";
يستورد {اللوحة القماشية} من"@ رد فعل ثلاثة / الألياف";
يستورد {OrbitControls} من"@ رد فعل ثلاثة / دري";وظيفةصندوق() {
يعود (
<شبكة>
<boxBufferGeometryيربط ="الهندسة" />
<شبكة لامبرتيربط="مادة"لون="وردي فاقع" />
شبكة>
)
}
يصدّرتقصيروظيفةبرنامج() {
يعود (
<شعبةاسم الطبقة="برنامج">
<شعبةاسم الطبقة="عنوان التطبيق">
<اللوحة القماشية>
<OrbitControls />
<الإضاءة المحيطةشدة ={0.5} />
<بقعة ضوءموضع={[10,15,10]} زاوية={0.3} />
<صندوق />
اللوحة القماشية>
شعبة>
شعبة>
);
}
يقوم هذا الرمز بما يلي:
- ال صندوق يستخدم المكون الشبكة ، boxBufferGeometry ، و meshLambertMaterial المكونات من تفاعل ثلاثي الألياف لتقديم صندوق ثلاثي الأبعاد. تعمل هذه المكونات الثلاثة جنبًا إلى جنب لإنشاء شكل الصندوق.
- ينشئ مكون boxBufferGeometry المربع ويضبط هذا الرمز خاصية اللون لمكون meshLambertMaterial على اللون الوردي الساخن.
- ثم يعرض عنصر Canvas الذي يضم مكون الصندوق مع إضاءة محيطة وضوء موضعي ومجموعة خصائص مكون Orbit Controls.
- تضيف خاصية مكون الإضاءة المحيطة ضوءًا ناعمًا إلى اللوحة القماشية. يضيف مكون SpotLight ضوءًا مركّزًا من موضع معين بزاوية 0.3. أخيرًا ، يتيح لك مكون OrbitControls التحكم في الكاميرا حول الكائن ثلاثي الأبعاد.
قم باستيراد وعرض مكون app.js في ملف index.js وتشغيل خادم التطوير لعرض النتائج في المستعرض الخاص بك على http://localhost: 3000.
تقديم نموذج ثلاثي الأبعاد تم إنشاؤه بواسطة Blender
Blender هي أداة مفتوحة المصدر يستخدمها المبدعون في مجالات مختلفة لإنشاء نماذج ثلاثية الأبعاد وتأثيرات بصرية وتطبيقات تفاعلية ثلاثية الأبعاد. يمكنك استخدام Blender لإنشاء نماذج ثلاثية الأبعاد لتطبيق الويب الخاص بك.
في هذا البرنامج التعليمي ، سوف تجعل نموذج BMW ثلاثي الأبعاد من خلال أداء SRT متاحًا على سكتشفاب.
إسناد المشاع الإبداعي
للبدء ، قم بتنزيل النموذج من Sketchfab في GLTF (تنسيق GL Transmission). يسهل هذا التنسيق عرض النماذج ثلاثية الأبعاد على المستعرض. بمجرد اكتمال التنزيل ، افتح مجلد النموذج وانقل ملف النموذج إلى الدليل العام داخل تطبيق React الخاص بك.
الآن ، توجه إلى ملف app.js الخاص بك وقم بتعبئته بالكود أدناه.
- قم باستيراد المكونات التالية:
يستورد {useGLTF، Stage، PresentationControls} من"@ رد فعل ثلاثة / دري"; - أنشئ مكون النموذج وأضف الكود أدناه:
وظيفةنموذج(الدعائم){
مقدار ثابت {مشهد} = useGLTF ("/bmw.glb");
يعود<بدائيهدف={مشهد} {... الدعائم} />
}يصدّرتقصيروظيفةبرنامج() {
يعود (
<شعبةاسم الطبقة="برنامج">
<شعبةاسم الطبقة="عنوان التطبيق">
dpr = {[1،2]}
كاميرا الظلال = {{fav: 45}}
النمط = {{"موضع": "مطلق"}}
>
السرعة = {1.5}
عالمي تكبير = {0.5}
قطبي = {[-0.1, رياضيات.باي / 4]}
>
<منصةبيئة={باطل}>
<نموذجحجم={0.01} />
منصة>
عرض ضوابط>
اللوحة القماشية>
شعبة>
شعبة>
);
} - يعرّف الخطاف useGLTF من مكتبة React-three-drei متغير المشهد ويخصص له قيمة ملف النموذج الموجود في المسار "/bmw.glb". يقوم المكون بعد ذلك بإرجاع كائن بدائي يضع المشهد للنموذج ثلاثي الأبعاد.
- يعرض عنصر Canvas المكونات الرئيسية التي يتكون منها النموذج ، مع الخصائص المحددة ، مثل نسبة وحدات البكسل في الجهاز (DPR) والظلال وزاوية الكاميرا والنمط.
- ثم تحدد خصائص مكون PresentationControls مثل السرعة والتكبير العام. تحدد هذه الخصائص كيف ستتحكم في النموذج على الشاشة.
- أخيرًا ، قم بتكوين مكون المرحلة الذي يقوم بتركيب النموذج على شاشة المتصفح.
قم بتدوير خادم التطوير لتحديث التغييرات على التطبيق الخاص بك. يجب أن ترى النموذج معروضًا على متصفحك.
تقديم نماذج ثلاثية الأبعاد في تطبيق الويب الخاص بك
يمكن أن يوفر عرض النماذج ثلاثية الأبعاد في تطبيقات الويب العديد من المزايا ، مثل تحسين تجربة المستخدم من خلال توفير إحساس ثلاثي الأبعاد أكثر واقعية وتفاعلية. نتيجة لذلك ، يمكن للمستخدمين التفاعل بشكل أفضل مع المنتج.
ومع ذلك ، يمكن أن يكون لعرض العناصر ثلاثية الأبعاد سلبياتها مثل التأثير سلبًا على أداء التطبيق. تتطلب النماذج ثلاثية الأبعاد مزيدًا من الموارد لعرضها ، مما قد يتسبب في بطء تحميل تطبيقك.
