← جميع التجاربLAB 001 / IMAGE → THREE.JS

صورة واحدة. كل الزوايا.

هل يمكن تحويل صورة منتج إلى نموذج ثلاثي الأبعاد مفيد دون إبطاء الموقع؟ استكشف نموذج AGIBOT C5 وتكلفة إنشائه وأداءه في المتصفح.

01 / الصورة المرجعيةAGIBOT C5
صورة أمامية لروبوت التنظيف AGIBOT C5
02 / النموذج ثلاثي الأبعادThree.js

استكشف النموذج

حمّل النموذج عندما تكون جاهزاً. اسحب للتدوير، ومرّر للتقريب، أو استخدم لوحة المفاتيح.

نموذج مبني على صورة واحدة. الواجهة تتبع صورة المنتج، أما العمق والخلف والأجزاء المخفية فتقديرية. هذه تجربة بصرية وليست ملف تصميم من الشركة المصنّعة.

التكلفة والتحميل

تكلفة الإنشاء مرة واحدة. ثم عرض الكود.

تكلفة API المسجّلة$0.0894

10 طلبات، تشمل إعادة المحاولة. هذه تكلفة النموذج دون التطوير والاستضافة.

تكلفة AI لكل مشاهدة$0

يعرض المتصفح الكود المحفوظ. مشاهدة النموذج لا ترسل طلباً إلى الذكاء الاصطناعي.

كود النموذج المضغوط3.0 KiB

ينشئ المتصفح المجسم من ملف الكود هذا.

تحميل العارض عند تشغيله180.8 KiB

يشمل النموذج ومكتبة Three.js وأدوات العرض، قبل التخزين المؤقت.

كيف تُقاس التكلفة

التكلفة المبلّغ عنها من مزوّد النموذج اللغوي المستخدم. 88,288 رمز إدخال و128,485 رمز إخراج، تشمل التفكير والمحاولات غير المكتملة.

تتغيّر أسعار النماذج بمرور الوقت. وهذا الرقم هو التكلفة المسجّلة لهذه التجربة، وليس سعراً حالياً.

الأثر على الموقع

العرض ثلاثي الأبعاد اختياري.

قبل التشغيل

صورة ثابتة وأدوات تحكم. لا يُحمّل كود التجربة ثلاثي الأبعاد إلا بعد الضغط على تحميل النموذج. صفحات الموقع الأخرى لا تستورده.

أثناء الاستكشاف

يستخدم العرض معالج الرسوم في جهازك. يعاد الرسم عند التفاعل، والتدوير المستمر يبدأ بطلبك. تظهر إحصاءات الرسم أسفل العارض.

عند ترك العارض

يتوقف التدوير خارج مجال الرؤية وعند إخفاء التبويب. إغلاق النموذج يحرر المجسم والخامات وسياق WebGL.

اختبار Chromium آلي: 17 إطاراً في الثانية أثناء التدوير، 5,174 مثلثاً، 22 عملية رسم. تختلف ظروف الاختبار الآلي عن المتصفح المسرّع بالعتاد؛ النتيجة ليست ضماناً للهواتف.

الطريقة

صورة ← أجزاء ← مجسم ← مراجعة

يوفر img2threejs خطوات إعادة البناء. يقرأ نموذج لغوي الصورة المرجعية ويحدد الأشكال والخامات. يمكن بعدها تدوير مجسم Three.js المحفوظ وفحصه وتعديله. لا تكشف الصورة الواحدة الأجزاء المخفية بدقة.

img2threejs ↗

تنزيل كود نموذج Three.js ↓