102.3K+Télécharger
Aller au guide d’utilisation
Three.js Lightingpar CloudAI-X

Three.js Lighting Skill.

Rendez un modèle lisible grâce à un éclairage pensé, plutôt qu'à une luminosité excessive.

  • 3D
  • Three.js
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · Three.js LightingSKILL.md
Tâche 3D Produit • Une disposition de lumières aux rôles définis • Des réglages d'émission et de réception des ombres • Un plan d'environnement et de performance Avant de commencer Un projet Three.js fonctionnel avec un moteur de rendu ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.
Résumé éditorial · source examinée le 2026-10-07 · pas un exemple généré

01 Fonctionnement

Three.js Lighting : modeler la lumière et les ombres

Choix des lumières, configuration des ombres, environnements HDR et dispositions d'éclairage pratiques.

Flux de travail issu de la sourcePas un test d'exécution

La méthode de travail

Three.js Lighting distingue les lumières ambiante, hémisphérique, directionnelle, ponctuelle, spot et surfacique rectangulaire. Ces choix diffèrent par la directionnalité, la prise en charge des ombres, la réponse des matériaux et le coût. La source couvre aussi l'éclairage d'environnement et les dispositions de studio ou d'extérieur.

La mise en place des ombres est une chaîne qui implique le moteur de rendu, la lumière et les objets. Une couverture serrée et une émission sélective comptent autant que la résolution. Certains exemples utilisent des API propres à une version. Vérifiez les types de lumière et les imports d'aides par rapport à la version de Three.js installée avant de les appliquer.

Livrables attendus

  • Une disposition de lumières aux rôles définis
  • Des réglages d'émission et de réception des ombres
  • Un plan d'environnement et de performance
Voir le brief d'exemple

Du brief à la revue

  1. 01
    Définir les rôles des lumières

    Choisissez un éclairage d'appoint, une lumière solaire directionnelle, un éclairage ciblé ou une source de type studio selon la scène.

  2. 02
    Configurer les ombres

    Vérifiez ensemble les réglages du moteur de rendu, de la lumière et des objets, puis contrôlez la couverture et le biais.

  3. 03
    Examiner la surface

    Évaluez les matériaux et l'environnement visés avant d'augmenter le nombre de lumières ou la résolution des ombres.

02 Cas d’usage

Quand l'utiliser

Un projet Three.js fonctionnel avec un moteur de rendu ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.

Bon cas d'usage

  • Présentation de produitUn rapport entre lumière principale, d'appoint et de contre-jour peut rendre la forme de l'objet lisible.
  • Scènes d'extérieurUne lumière solaire directionnelle et un appoint hémisphérique offrent un point de départ défini pour la lumière du jour.

Limites à vérifier

  • Prise en charge inégale des ombresLa source distingue les lumières dotées d'ombres natives de celles qui nécessitent une autre solution.
  • Aides dépendantes de la versionLes aides et imports avancés pour les ombres doivent être vérifiés par rapport à la version installée.

Apportez ces éléments

  • Échelle de la scèneIndiquez les dimensions des objets et la zone ombrée.
  • Choix des matériauxIdentifiez les surfaces dont la réponse compte.
  • Référence d'éclairageDécrivez l'ambiance de studio ou d'extérieur recherchée.

03 Décisions importantes

Les décisions importantes

  1. Diagnostic systématique des ombres

    Vérifier tous les participants est plus utile que d'augmenter aveuglément la taille de la carte d'ombre.

  2. Couverture ciblée

    Une caméra d'ombre à portée serrée concentre le détail sur la zone utile.

04 Exemple de brief

Essayer un brief ciblé

Le brief d'exemple ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examiner la configuration

Utilisez le répertoire threejs-skills concerné comme guide pour l'agent. Ce n'est pas l'environnement d'exécution Three.js et il n'installe pas de ressources de scène.

Fichier source amont
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-lighting/SKILL.md

Un projet Three.js fonctionnel avec un moteur de rendu ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.

Commencer par un seul livrable

Adaptez le périmètre, le matériel source et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple
Utilisez threejs-lighting pour créer une configuration de studio sobre pour ce produit. Expliquez le rôle de chaque lumière, vérifiez la compatibilité des matériaux et n'activez que les ombres nécessaires. Contrôlez l'acné d'ombre (artefacts d'auto-ombrage), les ombres détachées et le coût de rendu avant d'augmenter la résolution.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

  • Les surfaces importantes restent lisibles.
  • Les réglages d'ombres correspondent aux objets censés les projeter et les recevoir.
  • Les artefacts visibles et le coût de rendu sont examinés.

OpenDesign fournit un espace de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants ou ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage

05 Source et licence

Source et licence

Cette page décrit la révision de source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
CloudAI-X
Dépôt
CloudAI-X/threejs-skills
Fichier du skill
skills/threejs-lighting/SKILL.md
Licence
Non confirmée — consultez les conditions en amont avant toute réutilisation.
Instantané examiné
2026-10-07 · b1c623076c66
Résumé éditorial de la source
Choix des lumières, configuration des ombres, environnements HDR et dispositions d'éclairage pratiques.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

L'éclairage d'environnement est-il identique à l'arrière-plan ?

Non. La source utilise des affectations distinctes pour scene.environment et scene.background.

castShadow sur le mesh suffit-il ?

Non. Le moteur de rendu, la lumière et les surfaces réceptrices interviennent aussi.

Toutes les lumières doivent-elles projeter des ombres ?

La source recommande un usage sélectif des ombres et de limiter le nombre de lumières.

OpenDesign

Faites de la place à la prochaine itération de conception.

Gardez votre brief, vos documents source et votre travail de conception ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-lighting/SKILL.md