ساخت بازرس سه‌بعدی خودرو real-time با Three.js و React

بازرسی بیمه قبلاً یعنی عکس‌های ثابت، زاویه‌های مبهم و رفت‌وبرگشت بی‌پایان بین راننده و کارشناس. در بیمه حافظ / بیم‌تک یک بازرس سه‌بعدی در مرورگر ساختیم تا کاربر آسیب را روی مدل خودرو علامت بزند، عکس و ویدیوی هدایت‌شده بگیرد و یک بسته خسارت ساخت‌یافته ارسال کند.

چرا Three.js به‌جای ابزار دوبعدی

ابزار حاشیه‌نویسی روی یک تصویر وقتی از پنج زاویه از یک سپر عکس گرفته می‌شود شکست می‌خورد. مدل GLTF سبک یک زبان فضایی مشترک می‌سازد.

• Raycasting و picking برای نگاشت لمس/کلیک روی ناحیه مش
• متادیتای ناحیه هم‌گام با Redux به‌عنوان annotation
• مدار دوربین محدود تا کاربر در فضای سه‌بعدی گم نشود
• مسیر جایگزین دوبعدی برای دستگاه‌های ضعیف

React برای UX؛ Three.js برای صحنه

مرز سخت نگه داشتیم: React ویزارد و UI بررسی را رندر می‌کرد؛ کنترلر صحنه فقط مش، نور و raycast را مدیریت می‌کرد. Redux وضعیت annotation را نگه می‌داشت تا canvas قابل dispose/remount باشد.

ثبت رسانه در WebView

بیمه بدنه به مدرک نیاز دارد. گام سه‌بعدی را با توالی ۸ عکس + ویدیو برای موبایل و WebView پیام‌رسان همراه کردیم — با بازیابی permission، فشرده‌سازی قبل از آپلود و پیشرفت مقاوم در شبکه ناپایدار.

حلقه بررسی ادمین

داشبورد ادمین امکان زوم رسانه، یادداشت، تأیید/رد و تطبیق annotation با نقشه پنل سه‌بعدی را داد و چرخه مشتری تا تصمیم عملیاتی را بست.

درس‌هایی که تکرار می‌کنم

1. بودجه GPU و main-thread را زود ببندید.
2. شناسه پنل‌ها را مثل API نسخه‌گذاری کنید.
3. قواعد کسب‌وکار را داخل صحنه نگذارید.
4. تجربه ادمین را همان اسپرینت capture طراحی کنید.