Show HN : un framework 3D pour le Web basé sur Svelte et Three.js

• Threlte est un framework open source qui superpose le modèle de composants réactifs de Svelte à Three.js afin de créer rapidement des apps 3D interactives sur le Web
• Il permet de composer des objets Three.js avec des composants déclaratifs comme <T.Mesh>, et de gérer les abonnements aux événements ainsi que les changements d’état via le cycle de vie de Svelte
• Il fournit d’emblée le moteur physique Rapier, l’outil d’animation Theatre.js, @threlte/gltf et @threlte/extras, ce qui réduit la configuration initiale d’une app 3D
• Les comportements que les seuls composants <T> ne suffisent pas à couvrir peuvent être étendus avec des Plugins typés, qui ajoutent des props et événements personnalisés
• Dans l’écosystème Svelte, sa documentation et son ergonomie sont considérées comme des atouts pour les développeurs qui cherchent une bibliothèque THREE déclarative et des outils de création d’apps WebGL

---

Composer des scènes Three.js à la manière de Svelte

• Threlte est un framework 3D pour le Web construit sur Svelte et Three.js
• Il met l’accent sur la création rapide d’apps 3D interactives avec des composants déclaratifs et réactifs
• En s’appuyant sur le cycle de vie des composants Svelte, il permet de gérer les tâches suivantes
  • Abonnement aux événements
  • Gestion des changements d’état
  • Connexion de comportements basés sur les composants
• L’exemple de code place une géométrie et un matériau dans <T.Mesh>, et définit directement des props et événements comme scale, position.x et onclick
• La création d’une première scène est présentée dans Make Your First Scene

Outils fournis et mode d’extension

• Threlte met en avant une approche « batteries included » et fournit les outils nécessaires à la création d’apps 3D
  • Rapier : moteur physique
  • Theatre.js : bibliothèque d’animation avec une suite d’outils professionnelle de motion design
  • @threlte/gltf : outil qui convertit les fichiers GLTF en composants Threlte
  • @threlte/extras : collection de composants et d’utilitaires nécessaires pour démarrer
• L’exemple Rapier combine RigidBody, AutoColliders et <T.Mesh> pour composer un collider sphérique et un mesh
• L’exemple @threlte/extras charge le modèle /models/flower.glb avec les composants Float et GLTF, puis définit les ombres, la position et l’échelle
• L’utilisation de @threlte/extras est décrite dans la Documentation
• Les Plugins sont un mécanisme d’extension qui ajoute à <T> des props et événements personnalisés de manière type-safe
  • L’exemple de plugin enregistre une prop lookAt avec injectPlugin, puis appelle args.ref.lookAt(args.props.lookAt) dans $effect
  • Les usages avancés sont détaillés dans la documentation Plugins
• Des documents de démarrage et des liens vers la communauté sont également fournis
  • Getting Started
  • Discord

[GN⁺]

Commentaires sur Hacker News

• Je suis l’auteur de Threlte. Merci de l’avoir posté, et si vous vous demandez ce que nous faisons en ce moment, vous pouvez regarder la présentation que je viens de faire au Svelte Summit Spring : https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...
  En gros, nous travaillons sur deux choses. La première, c’est la prise en charge de Svelte 5 : Threlte a davantage de travail qu’une bibliothèque Svelte classique, car nous avons beaucoup modifié l’intérieur des composants pour rendre la gestion des événements plus efficace ou pour appliquer les transitions Svelte à des composants plutôt qu’à des éléments du DOM. Une bonne partie de cela est désormais intégrée à Svelte 5, et pour le reste, comme les transitions, il va falloir le mettre de côté pour le moment
  La seconde, c’est Threlte Studio. Je ne sais pas encore très bien comment le présenter, mais on peut dire que c’est un éditeur qui permet de modifier visuellement le code. Il est extensible, donc chacun peut l’adapter à son propre workflow, et je suis curieux de voir jusqu’où ça peut aller. Si ça vous intéresse, vous pouvez nous suivre sur Discord http://chat.threlte.xyz ou sur X https://twitter.com/threlte
  • Je me demande comment Threlte se compare à React-Three-Fiber, que ce soit en parité fonctionnelle ou en performances
  • J’ai justement terminé hier le tutoriel Svelte, et je cherchais si on pouvait intégrer Three.js à Svelte
    Comme Svelte est vraiment intuitif, j’ai naturellement pensé qu’il permettrait aussi de gérer efficacement un environnement 3D, donc j’ai fini par chercher « Svelte + three.js »
    Ayant utilisé PlayCanvas et Babylon.js, j’attends avec beaucoup d’intérêt le développement de Threlte Studio. J’aime le fait que DREI expose tout comme un répertoire, mais ça m’a fait penser à un « outil studio » plus familier. Je me demande quel est le calendrier prévu pour Threlte Studio
• J’ai utilisé react-three-fiber et react-three-drei, donc on peut voir ça comme la version React de ce projet. Les exemples sont incroyablement nombreux et excellents : https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
  Celui que je préfère, c’est l’exemple de galerie d’images. Je l’ai modifié pour qu’un clic sur une image fasse entrer dans une autre pièce, donc dans une autre galerie
  https://github.com/pmndrs/drei est une collection d’exemples et d’utilitaires
  Ce qui m’a le plus marqué, c’est l’exemple qui utilise des modèles GLTF, une texture vidéo sur du texte, des reflets, etc., et sa version autonome est ici : https://bfplr.csb.app/
  Encore plus impressionnant, il y a ce sandbox qui montre que le code n’est pas si long : https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
  Ajouter une couche au-dessus de three.js demande beaucoup de travail et peut être assez prise de tête, mais le potentiel est énorme. three.js a complètement changé ma façon de voir le développement web, et si vous utilisez Svelte, ça vaut vraiment le coup d’y jeter un œil
  • Je suis curieux de savoir en quoi exactement « three.js a complètement changé ma façon de voir le développement web »
  • Vraiment superbe. Il y a clairement une ambiance Yugop, et on voit bien comment ce genre d’outils pourrait créer un style totalement nouveau pour les médias en ligne. Le potentiel est évident
• En fouillant un peu, je suis tombé sur une application de démonstration qui montre Threlte v6 : https://github.com/grischaerbe/threlter, https://threltemania.xyz/
  Le Technical Outline, en particulier l’explication simplifiée de la physique automobile, est assez instructif. C’est essentiellement un clone de Trackmania avec en plus un éditeur de circuits, et ça semble être un exemple qui exploite au maximum les avantages de Svelte/Threlte
  • Quand vous dites « exploite au maximum les avantages de Svelte/Threlte », quels sont selon vous ces avantages ?
• Ça a l’air intéressant. Cela dit, si vous voulez faire de la 3D déclarative et des composants sans Svelte ni React, il y a aussi A-Frame ou X3D
  Je me demande si les gens veulent vraiment de la 3D déclarative. X3D/VRML existe depuis plus de 25 ans et A-Frame depuis 8 ans, mais aucun des deux n’est devenu vraiment grand public, et beaucoup d’autres formats sont apparus puis ont disparu. En revanche, three.js et la 3D impérative/procédurale semblent globalement bien se porter ; je me demande pourquoi
  • La 3D déclarative sous forme d’intégration de framework pour Three.js est très populaire, au point qu’on peut sans doute dire que c’est aujourd’hui la configuration experte la plus utilisée sur le site de Three.js. La plus populaire d’entre elles est react-three-fiber. Le caractère déclaratif de ces frameworks facilite la réutilisation, et c’est ce qui sert de base à l’écosystème
  • Si des frameworks comme react-three-fibre sont populaires, c’est parce que les débutants peuvent assembler des composants existants sans presque connaître JavaScript. On voit souvent des influenceurs du domaine dire des choses comme « construisez ce configurateur en seulement 6 lignes de code ! ». Ce qui rend ces outils populaires, ce n’est pas la nature déclarative du code, mais la rapidité de création et la facilité d’usage perçue
• La combinaison Threlte/SvelteKit/Tauri est géniale. J’ai essayé Threlte récemment et j’ai fait ça : https://crusaders-ashy.vercel.app/
  Ce n’est pas extrêmement bien optimisé, et tous les modèles sont des modèles gratuits de Sketchfab. Comme c’est un environnement de jeu 3D, avoir un PC récent aide
• J’aime beaucoup Svelte et Threlte tous les deux. J’ai créé un échiquier 3D dans un environnement de parc et je l’ai même connecté à lichess, et tout a été étonnamment facile
  Je pense que beaucoup d’interfaces pourraient tirer parti d’un usage de la 3D
  • J’aimerais vraiment voir à quoi ça ressemble. Même un exemple simple utilisant ces bibliothèques me conviendrait
• Super projet. Si vous préférez une approche plus proche des fondamentaux, A-Frame est aussi très bien : https://aframe.io/
• La syntaxe est vraiment agréable. C’est aussi marquant que la première fois où j’ai vu Three.js en JSX avec react-three-fiber. Si un jour j’utilise Svelte + Three, c’est bon de savoir qu’une option comme celle-ci existe
• Je suis impressionné par la fluidité du défilement. J’ai souvent l’impression que les pages web avec des animations liées au scroll saccadent et manquent de fluidité, mais je ne savais pas que l’effet pouvait être aussi bon quand l’exécution suit réellement la fréquence de rafraîchissement de l’écran
• Je l’utilise depuis environ 2 ans. À chaque fois que je consulte la documentation, un nouvel extra a été ajouté, et le travail de legrisch est aussi excellent. Le Discord est également assez actif. C’est une boîte à outils étonnante, et j’ai hâte de voir jusqu’où ça ira