Un projet Three.js
Un portail pour Arcanyst, inspiré de World of Warcraft. J'en ai fait trois versions en apprenant davantage de Three.js et de GLSL.
Comment je l'ai faitVersion 3 · Actuelle
La dernière version, avec des runes, de la brume et différents effets au clic.
Cliquez au milieu pour créer des ondulations, ou sur les anneaux pour un autre effet. Cliquez sur les runes pour les allumer. Sept runes allumées déclenchent une plus grosse animation.
Ce sont les portails de mes anciens sites, sans le reste des pages.
J'adore les mages et les portails, et ça colle bien à l'histoire d'Arcanyst.
World of Warcraft est mon jeu préféré. Je voulais m'inspirer de ses portails pour en faire un dans mon propre jeu et sur mon site.
J'ai aussi suivi les tutoriels de Three.js Journey ↗ pour apprendre davantage de Three.js et de GLSL. Le portail me permettait de mettre ça en pratique, et depuis je continue à l'améliorer.
J'ai commencé par le portail de mon ancien site Caesium Games. J'ai ensuite fait la version Arcanyst, puis celle de ce portfolio.
Caesium Games · Version 1
C'était la première version, sur l'ancien site de Caesium Games. Une lueur bleue entoure une image, avec des motifs qui bougent grâce aux shaders.
Shaders, particules et couches de lumière.
Arcanyst · Version 2
Pour le site Arcanyst, j'ai ajouté quatre arrière-plans qui changent automatiquement. Les anneaux tournent, des particules se déplacent autour et un clic sur le portail fait apparaître un lézard.
Changements d'arrière-plan, distorsion de surface, rotation des anneaux, animations et physique des lézards.
Portfolio · Version 3
C'est celui de mon portfolio. J'ai ajouté des runes, de la brume et davantage d'effets. Un clic au milieu crée des ondulations, et les anneaux ont leur propre effet au clic. Quand sept runes sont allumées, tout le portail réagit.
Réfraction, brume, sprites animés et effets pour les runes et le portail.
03 / Détails
Chaque rune a son propre fichier SVG. Elles sont noires pour que je puisse les réutiliser dans d'autres couleurs. Sur le portail, elles s'allument au hasard en bleu ou en violet. On peut aussi cliquer dessus. Quand sept sont allumées, la grosse animation se lance, puis le cycle recommence.
D'autres projets Arcanyst
Je trouve toujours quelque chose à changer ou à améliorer. C'est pour ça qu'il y a déjà trois versions.