Instructables universum i Three.js
Vad är Instructables?
När du kommer till oss på Instructables, ser du en gigantisk pekskärm som har till uppgift att bistå förklaringen. På denna touchscreen är cirka 20.000 poäng av ljus, som representerar ett projekt på Instructables, den mest framgångsrika av alla våra presenterade innehåll. Det är där för att besvara denna fråga för besökare som inte vet eller känner till det alls, och att ge en uppfattning av passioner ren bredd i vår gemenskap. Instructables galaxen är en del data-visualisering, och en del interaktiva utställning. Det har inte betytt att gräva i varje projekt, men att införa dem alla, och deras relationer till varandra.
Galaxen projektet har pågått under större delen av året på denna punkt. Det har gått igenom många iterationer. För första gången är det nu tillräckligt liten för att arbeta på webben. Behöver du Chrome. Denna helt interaktiv 3D demonstration kommer att ta allt din dator har att erbjuda.
Ange GALAXEN
Denna Instructable handlar om hur Galaxy är gjord. Jag tar dig på min resa. Det har inte varit linjär. Jag började i Kinetic.js, och sedan övergav det för Three.js så att jag kunde få alla stjärnor flyttar, och få lite mer whiz-bang rörelse när någon rör vid skärmen. Här är där vi kommer:
-Bearbetning: en skiss som genererar bakgrundsbilder
-Kinetic.js: Hur "stjärnorna" är grupperade
-Kinetic.js: Hur man skapar suggestiva utseende konstellationer
-Kinetic.js: Hit-prestanda med 20.000 enskilda poäng, återges i canvas
-Three.js: Komma igång
-Three.js: Partikelsystem
-Three.js: Partikelsystem i rörelse
-Three.js: En annan ljusstyrka för varje stjärna: WebGL Shaders
-Three.js: Hit-prestanda med 20.000 enskilda punkter i 3D
-TweenMax: Lätt Animation
-Three.js: Kamerarörelserna
-Three.js: Efterbehandling & effekter: mörkläggning, oskärpa
-Andra bibliotek (speciellt tack)