‏پورتفولیوی سه‌بعدی بدون حتی یک مدل سه‌بعدی

نویسنده صادقانه شروع می‌کنه: بلد نبود مدل‌سازی سه‌بعدی کنه و همین کل پروژه رو توضیح می‌ده. بعد از دیدنِ سایت‌هایی مثل پورتفولیوی Bruno Simon، دلش یه پورتفولیوی سه‌بعدی می‌خواست ولی نه مهارت Blender داشت نه علاقه‌ای به استفاده از مدل‌های دیگران. راه‌حلش این بود که شکل‌های تختِ ساده (مستطیل، صفحه، مکعب) رو کد کنه و با تکسچرهای دست‌کشیده بپوشونه؛ همون workaround تصادفاً شد کلِ هویت بصریِ کار.

طبق مقاله، پروژه دسامبر ۲۰۲۵ شروع شد و اولش قرار بود یه سایتِ دوبعدیِ تصویرسازی‌شده باشه، ولی نویسنده فهمید تختِ HTML جواب نمی‌ده و کل کار رو به Three.js و React Three Fiber برد. استک فنی شامل React 19، React Three Fiber 9، Three.js، GSAP برای همهٔ انیمیشن‌ها، Vite و شیدرهای سفارشی GLSL و تکسچرهای WebP تولیدشده با AI بود.

نویسنده می‌گه هستهٔ تعاملِ سایت یه افکتِ رنگ‌شدن است: هر عنصرِ قابل‌کلیک اول یه اسکچِ سیاه‌وسفیده و با hover با یه ضربه‌قلمِ براش‌مانند رنگ می‌شه. این افکت با گسترشِ MeshBasicMaterial از طریق onBeforeCompile و تزریق منطقِ فرگمنت‌شیدر ساخته شده که با نویزِ رویه‌ای بین تکسچرِ اسکچ و رنگی بلند می‌کنه؛ نویسنده تأکید می‌کنه به‌جای نوشتن شیدر از صفر، اون رو گسترش داده تا خطِ لوله‌ٔ استاندارد تکسچرِ Three.js (نگاشت UV، فضای رنگ، شفافیت) دست‌نخورده بمونه.

ساختارِ فضا یه راهروی بی‌نهایته که از سگمنت‌های تکرارشونده ساخته شده و همیشه فقط سه سگمنت mount هستن (جلو، عقب و همون‌جا که دوربینه). به گفتهٔ نویسنده سخت‌ترین بخشِ کل پروژه، سیستمِ دوربین برای ورود و خروج از اتاق‌ها بود؛ فایلِ مربوطه ۵۰۰ خط شد و تقریباً هر خطش به‌خاطر یه باگ نوشته شده، چون دوربین باید هم‌زمان چند کار (اسکرول، parallaxِ ماوس، auto-glance به سمت درها و کنترلِ GSAP موقع باز/بستهٔ در) رو مدیریت می‌کرد.

بخشِ جالبِ مقاله، بحران کاراییه. وقتی نویسنده اولین نسخه رو تو گروه‌های توسعه‌دهنده گذاشت، بازخورد این بود که «قشنگه ولی مثل اسلایدشو کار می‌کنه». علتش دو تا نورِ directional و یه نورِ ambient بود که روی صحنه‌ای که کاملاً از صفحه‌های تختِ تکسچردار ساخته شده بود، سایهٔ real-time حساب می‌کردن، بی‌آنکه تفاوت بصری‌ای دیده بشه. نویسنده همهٔ نورها رو حذف کرد و به‌جاش یه تِینتِ کوچیک مستقیم تو تکسچرها گذاشت؛ نتیجه از نظر بصری تقریباً بی‌تغییر ولی از نظر کارایی زمین‌تا‌آسمون بود. یه ترفندِ دیگه هم پیش‌کامپایلِ شیدرها با gl.compileAsync() موقع preloader بود تا موقع بازکردنِ در دیگه لگ نخوره. جمع‌بندی نویسنده اینه: اول فیلم‌نامه رو بنویس، بعد مکانیک‌ها رو با شکل‌های ساده بساز و آخر دنیا رو بپوشون؛ چون مانع هیچ‌وقت تکنولوژی نیست، تخیله.

نکات کلیدی:

• ساختِ پورتفولیوی سه‌بعدی با شکل‌های تخت و تکسچرِ دست‌کشیده به‌جای مدل سه‌بعدی
• استک React Three Fiber + Three.js + GSAP و شیدرهای GLSL سفارشی
• افکت رنگ‌شدنِ hover با گسترش MeshBasicMaterial از طریق onBeforeCompile
• راهروی بی‌نهایت با mount فقط سه سگمنت هم‌زمان برای کارایی
• حذف نورهای سایه‌سازِ بی‌فایده و پیش‌کامپایل شیدرها؛ رمز رفعِ بحران کارایی