PixiJS meshes: custom geometry, MeshPlane, MeshRope, PerspectiveMesh
Géométrie 2D personnalisée en PixiJS v8 — positions/uvs/indices de MeshGeometry, MeshSimple, déformation subdivisée, trails en rope et coins en perspective 2.5D
- Quoi
- Géométrie 2D personnalisée en PixiJS v8 — positions/uvs/indices de MeshGeometry, MeshSimple, déformation subdivisée, trails en rope et coins en perspective 2.5D
- Coût
- Gratuit
- Prérequis
- un projet PixiJS v8 (paquet npm pixi.js) ; rien d'autre — le skill est un guide plus des patterns de code, aucun compte ni clé requis
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill officiel de @pixijs pour la géométrie personnalisée en PixiJS v8 : la classe de base `Mesh` plus ses quatre sous-classes spécialisées — `MeshSimple` pour des formes texturées rapides avec animation de sommets par frame, `MeshPlane` pour la distorsion de rectangles texturés subdivisés (`verticesX`/`verticesY` contrôlent la douceur), `MeshRope` pour des rubans de texture suivant une polyligne, et `PerspectiveMesh` pour des plans 2D avec coins en projection perspective (2.5D, pas vraie 3D). Couvre `MeshGeometry` construit à la main (positions, uvs, indices, topology), quand préférer chaque variante, les règles de batching (les meshes se batchent seulement avec `MeshGeometry` et sans shader custom — les shaders custom se rendent toujours indépendamment), `shrinkBuffersToFit`, le hit test `containsPoint` sensible à la topologie, et le contrôle d'état via `State.for2d()`. Inclut des pièges classiques : les renommages v8 (`SimpleRope`→`MeshRope`, ...) avec constructeurs en objet d'options, et ne jamais ajouter d'enfants à un mesh (nœud feuille — envelopper dans un `Container`). Crédit : @pixijs. Bémols honnêtes : pour la vraie 3D utilisez une librairie 3D dédiée ; nécessite le modèle mental de pixijs-scene-core-concepts pour la règle des feuilles ; licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet PixiJS v8 (paquet npm pixi.js) ; rien d'autre — le skill est un guide plus des patterns de code, aucun compte ni clé requis Installe-moi « Mesh PixiJS : géométrie personnalisée, MeshPlane, MeshRope, PerspectiveMesh ». Il enseigne à un agent les skills mesh officiels de @pixijs pour PixiJS v8 : la Mesh de base plus MeshSimple, MeshPlane (distorsion subdivisée), MeshRope (rubans de texture sur un chemin), PerspectiveMesh (coins 2.5D) — MeshGeometry construit à la main (positions, uvs, indices, topology), quand utiliser chaque variante, règles de batching, shrinkBuffersToFit, hit test containsPoint, contrôle d'état, et les renommages v8/constructeurs en objet d'options. Licence MIT. Dépôt : https://github.com/pixijs/pixijs-skills/blob/main/skills/pixijs-scene-mesh/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « pixijs-scene-mesh ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — c'est une référence de géométrie personnalisée ; pour la vraie 3D utilisez une librairie 3D dédiée). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.