lueur externe de three.js pour l'objet sphère?
Je construis une sorte de système planétaire dans three.js et j'ai passé quelques heures à chercher une solution décente pour obtenir un lueur extérieure sur une planète - un objet sphère avec une texture.
Je suis tombé sur cet exemple http://stemkoski.github.io/Three.js/Selective-Glow.html quel type de truc fait l'affaire, mais la chose est - cette forme de lueur affecte également la objet 3D principal entraînant un changement de couleur (comme on le voit ici).
Un autre bel exemple de lueur peut être trouvé ici http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html mais encore une fois, il brille toute la région, non seulement chose "extérieure".
J'ai lu un fil de discussion sur la propriété "overrideMaterial" sur GitHub mais cela semble expérimental, inutilisé et non documenté ... je ne sais même pas si cela pourrait résoudre mon problème.
Veuillez partager vos idées, merci!
J'ai travaillé un peu sur la séparation de la partie du code WebGL Globe (liée à ci-dessus) qui produit l'effet atmosphérique. Une version de travail préliminaire est ici:
http://stemkoski.github.io/Three.js/Atmosphere.html
Au meilleur de ma compréhension, il y a quelques choses intéressantes qui se passent dans le code original pour créer l'effet atmosphérique. Tout d'abord, la texture éclatante est placée sur une autre sphère - appelons-la Atmo Sphere :) - qui entoure la sphère avec l'image de la terre dessus. Le matériau de l'atmosphère est retourné de sorte que la face avant ne rend pas, seulement la face arrière, donc elle n'obscurcit pas la sphère terrestre même si elle l'entoure. Deuxièmement, l'effet d'éclairage dégradé est obtenu en utilisant un shader de fragment plutôt qu'une texture. Cependant, l'atmosphère changera d'apparence si vous effectuez un zoom avant ou arrière; cela n'était pas évident dans l'expérience WebGL Globe car le zoom était désactivé.
[mis à jour le 30 avril]
Ensuite, similaire au code source de
http://stemkoski.github.io/Three.js/Selective-Glow.html
la sphère avec la texture d'éclairage dégradé (et une autre sphère à texture noire) est placée dans une deuxième scène, puis les résultats de cette scène sont composés avec la scène d'origine à l'aide d'un mélangeur additif. Et juste pour que vous puissiez expérimenter avec les paramètres utilisés pour créer l'effet de lueur, j'ai inclus quelques curseurs afin que vous puissiez changer les valeurs et voir les différents effets de lueur qui en résultent.
J'espère que cela vous aide à démarrer. Bonne chance!
[mis à jour le 11 juin]
J'ai un nouvel exemple qui atteint le même effet d'une manière beaucoup plus simple, plutôt que d'utiliser le post-traitement et de mélanger additivement deux scènes, je viens de changer certaines des paramètres dans le matériau personnalisé. (Cela semble évident avec le recul.) Pour un exemple mis à jour, consultez:
http://stemkoski.github.io/Three.js/Shader-Halo.html
Cependant, je n'ai toujours pas compris les problèmes de panoramique/zoom.
[Mis à jour le 24 juillet]
J'ai résolu les problèmes de panoramique/zoom. Cela nécessite l'utilisation d'un shader; pour plus de détails sur les complexités, voir la question connexe Three.js - code shader pour effet de halo, les normales doivent être transformées et pour l'exemple de travail final, voir:
http://stemkoski.github.io/Three.js/Shader-Glow.html .
Je suis assez content du résultat final, donc je ne mettrai plus à jour cette réponse :)
Dans l'exemple auquel vous faites référence, j'ai utilisé une lueur bleue avec un mélange d'additifs - si vous avez utilisé une couleur blanche à la place, cela produirait peut-être l'effet souhaité.