🔥 تصميم تأثير أنابيب ضوئية تفاعلية باستخدام Three.js

في عالم تصميم الواجهات الحديثة، أصبحت التأثيرات البصرية التفاعلية جزءًا أساسيًا لجذب الزوار وإضفاء لمسة احترافية على المواقع والتطبيقات. أحد هذه التأثيرات المميزة هو تأثير الأنابيب الضوئية (Tubes Cursor)، الذي يعتمد على مكتبة Three.js لإنشاء حركة سلسة وواقعية للأنابيب الضوئية على الشاشة استجابة لتفاعل المستخدم.

في هذا المقال، سنشرح كيف يمكنك إنشاء هذا التأثير التفاعلي بالكامل باستخدام Three.js، مع تخصيص الألوان والإضاءة والنصوص، حتى لو كنت مبتدئًا في تصميم واجهات الويب ثلاثية الأبعاد.

ما هو تأثير الأنابيب الضوئية؟

تأثير الأنابيب الضوئية هو تصميم بصري ثلاثي الأبعاد يخلق خطوطًا ضوئية متحركة على كامل الشاشة، تتفاعل مباشرة مع حركة المؤشر أو النقرات.
هذا التأثير مناسب للاستخدام في:

• صفحات Landing Page جذابة

• مقدمة لموقع أو مشروع

• صفحات شخصية Portfolio

• صفحات عرض التطبيقات

• أي مشروع ويب يحتاج خلفية حديثة ومتحركة

مميزات التصميم

1. تأثير بصري ثلاثي الأبعاد جذاب

   • الخطوط الضوئية تتحرك بسلاسة على كامل الشاشة، مما يعطي تجربة ممتعة للزائر.

2. استجابة مباشرة للمؤشر والنقرات

   • أي حركة للمؤشر تُحدث تأثيرًا فوريًا على الأنابيب الضوئية.

   • عند النقر، تتغير ألوان الأنابيب بشكل عشوائي لتجربة تفاعلية مميزة.

3. خلفية Canvas ثابتة

   • يبقى التأثير دائمًا في الخلفية دون التأثير على المحتوى النصي أو الصور الموجودة في الموقع.

4. تكامل مع النصوص والعناوين

   • يمكنك وضع نصوص في وسط الشاشة مع تأثير Text Shadow لإبراز العناوين بشكل أنيق.

5. خفيف وسريع الأداء

   • يعتمد على مكتبة Three.js فقط، دون الحاجة لمكتبات إضافية معقدة، مما يجعل التحميل سريعًا حتى على الأجهزة المحمولة.

كيف يعمل التأثير؟

1. يتم إنشاء عنصر Canvas يغطي كامل الشاشة.

2. مكتبة TubesCursor تقوم برسم الأنابيب الضوئية وتوليد الحركة بشكل ديناميكي.

3. عند كل نقرة على الشاشة، يتم اختيار ألوان جديدة بشكل عشوائي عبر دالة randomColors() لتغيير شكل الأنابيب في الوقت الفعلي.

4. يمكن التحكم بسهولة في:

   • ألوان الأنابيب

   • ألوان الإضاءة

   • قوة الإضاءة

   • نوع الخط وحجم العناوين

الاكواد المستخدمة

HTML

<div id="app"> <canvas id="canvas"></canvas> <div class="hero"> <h1>Allito</h1> <h2>App</h2> <a target="_blank" href="https://www.framer.com/@kevin-levron/">Framer Component</a> </div> </div> نسخ الكود

CSS

body, html, #app { margin: 0; width: 100%; height: 100%; } body { touch-action: none; } #app { height: 100%; font-family: "Montserrat", serif; } #app a { text-decoration: none; color: #fff; } .hero { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } h1, h2, p { margin: 0; padding: 0; color: white; text-shadow: 0 0 20px rgba(0, 0, 0, 1); line-height: 100%; user-select: none; } h1 { font-size: 80px; font-weight: 700; text-transform: uppercase; } h2 { font-size: 60px; font-weight: 500; text-transform: uppercase; } #canvas { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } نسخ الكود

JS

import TubesCursor from "https://cdn.jsdelivr.net/npm/threejs-components@0.0.19/build/cursors/tubes1.min.js" const app = TubesCursor(document.getElementById('canvas'), { tubes: { colors: ["#f967fb", "#53bc28", "#6958d5"], lights: { intensity: 200, colors: ["#83f36e", "#fe8a2e", "#ff008a", "#60aed5"] } } }) document.body.addEventListener('click', () => { const colors = randomColors(3) const lightsColors = randomColors(4) console.log(colors, lightsColors) app.tubes.setColors(colors) app.tubes.setLightsColors(lightsColors) }) function randomColors (count) { return new Array(count) .fill(0) .map(() => "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')) } نسخ الكود