Instructables universum i Three.js (4 / 13 steg)
Steg 4: Kinetic.js: Hit-prestanda med 20.000 poäng, återges i Canvas
KineticJS är inte ens min favorit 2D canvas-bibliotek. Jag valde den inledningsvis över många många andra duk och SVG JavaScript-alternativ (staffli, papper, bearbetning, raphael, tyg, går listan) för ett enda skäl: denna demo.
Detta är bara en gif. Klicka för full demo!
Kinetic har inbyggda händelse delegation för objekt som lagts till dess dukar. Du registrerar dig bara en enda händelseavlyssnare för hela duken och Kinetic ger ett enkelt sätt att hämta den enda partikeln som klickade på. Detta gör det oerhört fort (canvas går ändå), även med 20.000 objekt på skärmen på en gång. Du kan göra detta:
Stage.on("Click",function(e) {
var noden = e.targetNode;
Console.log(Node); det enskilda objektet som klickade!
});
... och det kommer att logga bara om så snabbt som om det fanns endast en nod på skärmen.
Kinetic var bra att få oss att version 1.0 av detta projekt, men i slutändan vi skrotade det helt. Problemet? Prestanda. Jag förväntade mig faktiskt inte på plats: det var den glödande och un-glödande av stjärnorna som de valdes ut. Enkel, men ineffektiva. Det fanns andra problem med 1.0 som var mina: Jag använde ett antal "relation" ord som folk förvirrande, och det fanns några fråga huruvida galaxen var om Instructables alls. Jag hade spelat ner projekten för mycket.
Det, och noahw tyckte vi behövde mer vina. Rörelse, 3D, gå upp till skärmen och peta på det våldsamt med ett fett finger, som sånt. Detta ledde slutligen in i världen av ThreeJS som gjorde visningen mycket mer uppmärksamhet greppa. På många sätt dock var version 1 renare och, för mig, bättre. Klicka för att kolla in den kinetiska versionen. Tänk att denna version av projektet var aldrig webb-optimerade alls. Denna länk visar på debug-läge, som ger dig en liten datamängd och lämnar muspekaren synlig; Det är fortfarande en 10mb nedladdning. Touchscreen läge är nästan 60 mb, och det finns ingen lastare, så varning emptor.