Create a Neon Cursor Effect with Three.js: HTML, CSS, and JavaScript Tutorial

Introduction

Dans ce tutoriel, nous allons apprendre à créer un effet de curseur néon impressionnant en utilisant Three.js, HTML, CSS, et JavaScript. Cet effet apporte une touche moderne et interactive à votre site web. Nous allons décomposer chaque partie du code pour que vous puissiez comprendre et personnaliser facilement cet effet pour vos propres projets.

Pourquoi Utiliser un Effet de Curseur Néon ?

L’effet de curseur néon est un ajout visuel élégant qui peut améliorer l’expérience utilisateur sur votre site web. Il suit le mouvement de la souris, créant une traînée lumineuse dynamique qui capte l’attention. Ce type d’effet est particulièrement adapté pour les sites de portfolio, les pages de destination ou tout autre site cherchant à offrir une interaction utilisateur unique et engageante. En utilisant des effets visuels modernes comme le curseur néon, vous pouvez différencier votre site et rendre la navigation plus immersive.

Outils et Technologies Requises

Pour créer cet effet de curseur néon, nous aurons besoin de plusieurs technologies et outils :

Three.js : une bibliothèque JavaScript puissante pour la création de graphiques 3D dans le navigateur.
HTML et CSS : pour structurer et styliser notre page web.
JavaScript : pour animer et gérer l’interaction de l’utilisateur avec l’effet de curseur.
Éditeur de Code (comme VS Code) : pour écrire et modifier le code.
Navigateurs Compatibles : Les navigateurs modernes comme Chrome, Firefox, ou Edge qui supportent WebGL, nécessaire pour faire fonctionner Three.js.

Cette combinaison d’outils vous permettra de mettre en place un curseur néon performant et esthétiquement plaisant.

HTML Page Structure

Pour commencer, nous allons établir la structure HTML de base qui servira de fondation à notre effet de curseur néon. Voici le code HTML de base :

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Cursor</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <div id="app">
        <section class="hero">
            <div class="wrap-content">
              <h1 class="main-title">Digital marketing agency <br> <strong>MonDesign Web</strong></h1>
            </div>
          </section>
    </div>
    <script src="index.js" type="module"></script>
</body>
</html>

Explanation of the HTML Structure

DOCTYPE et Structure HTML : Ce document commence par la déclaration <!DOCTYPE html> pour définir la version HTML. Ensuite, le langage du document est défini comme anglais avec lang="en".
Head Section :
- The meta charset="UTF-8" ensures that the document uses UTF-8 character encoding.
- meta http-equiv="X-UA-Compatible" ensures compatibility with Internet Explorer.
- meta name="viewport" rend la page responsive.
- Le lien vers la feuille de style styles.css définit les styles de la page.
- Le script de Three.js est inclus via un CDN pour faciliter la création des effets graphiques.
Body Section :
- Le div avec l’id app est le conteneur principal pour notre contenu.
- La section hero est l’endroit où nous plaçons le texte principal avec une mise en page centrée.
- Le script index.js est chargé à la fin pour assurer que le DOM est entièrement chargé avant que le JavaScript ne soit exécuté.

Mise en Place des Styles CSS

Ensuite, nous définissons les styles de base pour notre effet dans le fichier styles.css. Voici un exemple de code CSS :

				
					:root {
    --surface-900: #131320;
    --primary-100: #B89CFC;
}

body, html, #app {
    margin: 0;
    width: 100%;
    height: 100%;
}

#app {
    overflow: hidden;
    touch-action: pan-up;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    text-align: center;
}

#app canvas {
    display: block;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
}

.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}

.main-title {
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;
}

.main-title strong {
    color: var(--primary-100);
}

@media screen and (min-width: 640px) {
    .main-title {
        font-size: 34px;
    }
}

@media screen and (min-width: 1024px) {
    .main-title {
        font-size: 42px;
    }
}

@media screen and (min-width: 1536px) {
    .main-title {
        font-size: 60px;
    }
}

CSS Analysis:

Base Styles : Les marges par défaut sont supprimées, et la hauteur et la largeur sont définies à 100% pour le `body`, `html`, et `#app`, afin que le curseur occupe tout l’écran.
#app Styles : `overflow: hidden` empêche le défilement indésirable, tandis que `touch-action: pan-up` optimise le comportement sur les écrans tactiles. Le texte est centré avec `text-align: center`, et un fond sombre est utilisé pour mettre en valeur l’effet néon.
Canvas Positioning : Le `canvas` utilisé pour dessiner l’effet néon est positionné en arrière-plan avec `z-index: -1`, ce qui lui permet de rester derrière les autres éléments.
Variables CSS : Des variables CSS sont utilisées pour gérer facilement les couleurs et thèmes de la page.
Responsive Design : Les tailles de police pour `.main-title` s’ajustent en fonction de la largeur de l’écran pour une bonne lisibilité sur tous les appareils.

Introduction à Three.js

Three.js est une bibliothèque JavaScript qui simplifie la création de graphiques 3D complexes dans le navigateur. Elle est essentielle pour réaliser des effets visuels sophistiqués, comme le curseur néon, en exploitant le WebGL, une API pour le rendu 3D.

Pourquoi Choisir Three.js ?

Three.js est largement adopté pour sa simplicité d’utilisation par rapport à d’autres bibliothèques 3D plus complexes. Elle offre une grande flexibilité et un vaste éventail de fonctionnalités pour créer des animations et des graphiques interactifs. Pour notre curseur néon, Three.js permet de manipuler facilement les shaders et les objets 3D nécessaires pour produire des effets lumineux réalistes.

Implémentation du JavaScript pour l'Effet Néon

Le JavaScript est la clé pour animer et gérer le comportement du curseur néon. Nous allons utiliser Three.js pour initier et contrôler cet effet.

Code JavaScript de Base

Le script suivant doit être placé dans le fichier index.js :

				
					import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js';

const root = document.getElementById("app");

const options = {
    el: root,
    shaderPoints: 20,
    curvePoints: 88,
    curveLerp: 0.8,
    radius1: 5,
    radius2: 25,
    velocityTreshold: 10,
    sleepRadiusY: 200,
    sleepRadiusX: 200,
    sleepTimeCoefX: 0.0025,
    sleepTimeCoefY: 0.0025
};

neonCursor(options);

Explication du Code JavaScript :

Importation de Three.js : Nous importons la fonction neonCursor depuis la bibliothèque threejs-toys, un module qui simplifie l’utilisation de Three.js pour cet effet spécifique.
Options du Curseur : Le code utilise plusieurs paramètres pour définir le comportement et l’apparence du curseur néon, comme shaderPoints (nombre de points lumineux), curvePoints (nombre de points de la courbe), et radius1 et radius2 (rayons de la traînée du curseur). Ces options permettent de personnaliser l’effet de manière très précise.
Initialisation : En appelant neonCursor(options), nous appliquons l’effet néon sur l’élément HTML spécifié, ici le conteneur avec l’id app.

				
					const options = {
    el: root,
    shaderPoints: 20,
    curvePoints: 88,
    curveLerp: 0.8,
    radius1: 5,
    radius2: 25,
    velocityTreshold: 10,
    sleepRadiusY: 200,
    sleepRadiusX: 200,
    sleepTimeCoefX: 0.0025,
    sleepTimeCoefY: 0.0025
};

el: root : Indique l’élément HTML sur lequel l’effet néon sera appliqué (l’élément avec l’id « app »).
shaderPoints: 20 : Définit le nombre de points lumineux du curseur.
curvePoints: 88 : Définit le nombre de points qui forment la courbe suivie par le curseur.
curveLerp: 0.8 : Contrôle la fluidité de la transition des courbes pour un mouvement plus doux.
radius1: 5 : Détermine le rayon de la petite sphère qui représente le début du curseur.
radius2: 25 : Détermine le rayon de la grande sphère qui forme la traînée du curseur.
velocityTreshold: 10 : Fixe la vitesse minimum à partir de laquelle le curseur commence à bouger.
sleepRadiusY: 200 et sleepRadiusX: 200 : Spécifient la sensibilité du curseur lorsque la souris est immobile.
sleepTimeCoefX: 0.0025 et sleepTimeCoefY: 0.0025 : Contrôlent le temps de réaction du curseur lorsque la souris s’arrête de bouger.
neonCursor(options) : Applique l’effet néon en utilisant les options définies ci-dessus.

Dépannage et Optimisation

Même avec un code bien structuré, des ajustements peuvent être nécessaires pour optimiser les performances ou résoudre des problèmes spécifiques. Voici quelques conseils :

Vérification des Erreurs : Utilisez la console du navigateur pour identifier les erreurs JavaScript qui pourraient empêcher le curseur de fonctionner correctement.
Optimisation des Performances : Réduisez le nombre de points lumineux ou ajustez les paramètres pour alléger la charge sur le GPU, surtout sur les appareils mobiles.
Compatibilité Navigateur : Assurez-vous que votre effet fonctionne bien sur tous les navigateurs modernes. Testez régulièrement sur différentes plateformes pour éviter les incompatibilités.

Tests et Validation

Il est crucial de tester votre effet de curseur néon sur divers navigateurs et appareils pour garantir une expérience utilisateur cohérente et performante.

Tests de Performance : Utilisez des outils comme Google Lighthouse pour analyser les performances et l’impact sur le temps de chargement de votre page.
Tests de Compatibilité : Vérifiez l’affichage et le comportement de l’effet sur des navigateurs tels que Chrome, Firefox, Edge, et Safari.

Améliorations Avancées

Une fois que vous avez maîtrisé l’effet de base, vous pouvez aller plus loin en ajoutant des fonctionnalités avancées pour enrichir l’interactivité de votre site :

Interactions Personnalisées : Par exemple, changez la couleur de la traînée en fonction des clics de l’utilisateur ou en réponse à des événements spécifiques.
Intégration avec d’autres Bibliothèques : Combinez Three.js avec d’autres bibliothèques JavaScript pour ajouter des animations supplémentaires ou des interactions plus complexes.

Conclusion :

Ce tutoriel vous a guidé pas à pas pour créer un effet de curseur néon impressionnant en utilisant Three.js, HTML, CSS, et JavaScript. Cet effet apporte une touche moderne et dynamique à votre site web, rendant la navigation plus engageante. N’hésitez pas à personnaliser les paramètres et à expérimenter avec différentes configurations pour adapter cet effet à vos besoins spécifiques.

Create a Neon Cursor Effect with Three.js: HTML, CSS, and JavaScript Tutorial