3D aginte-panela three.js-ekin: zer den, noiz laguntzen duen eta nola eraikitzen den neurrira

3D aginte-panel batek enpresaren datuak nabigatzailean mugitzen den hiru dimentsioko eszena batean erakusten ditu. three.js-ekin ezer instalatu gabe eta erabiltzaileko lizentziarik ordaindu gabe egiten da. Lagunbot kudeatzeko egin dugu, eta hemen kontatzen dugu noiz egiten duen ekarpena 3Dak, noiz oztopatzen duen eta nola dagoen eraikita barrutik.

Zer da 3D aginte-panel bat

3D aginte-panel bat enpresaren datuak hiru dimentsioko eszena batean marrazten dituen aginte-panela da: adibidez, sail bakoitzeko gela bat duen eraikin bat edo ekoizpen-lineak dituen pabiloi bat. Nabigatzailean irekitzen da, biratu eta hurbildu egin daiteke, eta betiko panel baten iturri berberek elikatzen dute: kalkulu-orriak, fakturazio-programak, web-analitika edo CRMa.

Bilaketetan hiru gauza desberdin nahasten dira.

1. Negozio-datuen 3D aginte-panela. Adierazleek agintzen dute hemen, eta eszenak haiek ordenatzeko eta begiratzeko balio du.
2. Biki digitala, benetako instalazio fisiko bat erreproduzitzen duena, fabrika edo eraikin bat, esaterako, bere sentsoreekin. Lekuaren 3D ereduak eta lantegiko datuak behar ditu, eta beste proiektu mota bat da.
3. 3D grafiko solta: panel-tresna batzuek txertatzen uzten duten bolumendun barra edo tarta. Erliebea duen grafiko laua da, eta ez du aldatzen informazioa antolatzeko modua.

Artikulu hau lehenengoari buruzkoa da, eta batez ere haren alderdi bisual eta teknikoari buruzkoa. Zein adierazle jartzea komeni den enpresa baten aginte-panelari buruzko artikuluan azaltzen dugu.

Zer da three.js eta zergatik erabiltzen dugu

three.js kode irekiko JavaScript liburutegi bat da, web-orri batean 3D grafikoak sortzeko. Haren biltegiaren arabera, proiektuaren helburua erabiltzen erraza, arina eta erabilera orokorrekoa den 3D liburutegi bat da, hainbat nabigatzailetan funtzionatzen duena. MIT lizentziarekin argitaratzen da, eta egungo bertsioek WebGL eta WebGPU errendatzaileak dituzte. Eszenetarako eta bideo-jokoetarako erabiltzen da, baita webean 3D datuak bistaratzeko ere.

WebGL nabigatzailearen teknologia bat da, canvas elementu batean 3D grafikoak marrazteko aukera ematen duena. Zuzenean harekin programatzea motela eta zaila da. Liburutegiak alderik zailena hartzen du bere gain (kamerak, argiak, materialak, objektuak eta animazioa): programatzen duenak eszena deskribatzen du, eta three.js-ek marrazten du.

Enpresa-proiektu batean, horrek ondorio praktikoak ditu:

• Ez dago ezer instalatu beharrik. Aginte-panela esteka batekin irekitzen da, bulegoko ordenagailuan edo bilera-gelako pantailan.
• MIT lizentziarekin ez dago jende gehiago sartzean igotzen den erabiltzaileko edo paneleko kosturik.
• Dena web-kodea da, beraz weberako programatzen dakien edonork manten dezake.

Noiz laguntzen duen 3Dak aginte-panel batean

Hainbat eraiki ondoren, hiru egoeratan ikusten dugu hirugarren dimentsioak merezi duela kostatzen dena.

Ezagutzeko moduko leku edo egitura bat dagoenean

Enpresa espazio-multzo gisa ikus badaiteke, espazio-metafora batek pertsona bakoitzari berea aurkitzen laguntzen dio. Salmententzako gela bat, fakturaziorako beste bat eta SEOrako beste bat dituen eraikin batean jarraibiderik gabe ibil daiteke, eta inork ez du gogoratu behar txosten bakoitza zein fitxatan zegoen.

Ikuspegi orokorra garrantzitsua denean

3Dak ondo funtzionatzen du begirada batean negozioaren zein zati dagoen lasai eta zeinek behar duen arreta ikusteko. Objektuen koloreak eta tamainak irakurketa azkar hori ematen dute, goizari ekiterakoan bilatzen dena. Zifra zehatz bat egiaztatzeko beste ikuspegi bat behar da, beherago kontatzen dugun bezala.

Kokapena duten datuak daudenean

Biltegiak, ibilbideak, obrak edo instalazioak toki zehatz batean daude. Kokapena erabakiaren parte bada, marraztea lagungarria da.

Noiz oztopatzen duen

Lau kasutan 3Da soberan dago, eta komeni da horiek argi izatea ezer enkargatu aurretik.

Zifrak zehatz-mehatz alderatzeko

Zifra bat bestea baino handiagoa den jakiteko, argiena ardatz komun baten gaineko 2D barra bat da. Perspektibaren eraginez, hurbil dagoenak handiagoa dirudi, eta horrek konparazioa desitxuratzen du. Salesforce Trailheaden bistaratze-gidak 3D grafiko zirkular batekin erakusten du hori: zati batek benetan dena baino txikiagoa dirudi. Gure paneletan, garrantzitsuak diren zifrak testuan eta taulatan irakurtzen dira, eta kubo baten altuerak orientatzeko soilik balio du.

Ikusmen- edo mugimendu-zailtasunak dituenarentzat

canvas batean marraztutako eszena ez da berez irisgarria, pantaila-irakurgailu batek ez baitaki barruan zer dagoen. WCAG irisgarritasun-jarraibideek (1.1.1 irizpidea) testu ez den edukiarentzat testu-alternatiba eskatzen dute, eta datu-grafikoetan, gainera, posible denean benetako datuak taula batean ematea gomendatzen dute. Etengabeko mugimenduak, bestalde, nahaste bestibularrak dituzten pertsonak gogaitzen ditu. Behar duenak mugimendu gutxiago eska dezake bere ekipoaren ezarpenetan, eta orriak prefers-reduced-motion bidez detektatzen du. Ondo egindako 3D aginte-panel batek testu-alternatiba eskaintzen du eta hobespen hori errespetatzen du.

Ekipo moteletan edo oso kargatuta daudenetan

3Dan marraztea ordenagailuari taula bat marraztea baino gehiago kostatzen zaio. Ordenagailu eramangarri zahar batean, edo hogei programa irekita dituen ordenagailu batean, eszena berandu agertzen da eta jauzika mugitzen da. Panela ekipo oso desberdinak dituen jendeak irekiko badu, diseinutik bertatik hartu behar da kontuan. Zenbat eta objektu animatu gehiago egon pantailan, orduan eta lan gehiago egiten du txartel grafikoak, beraz komeni da beharrezkoa dena bakarrik marraztea.

Merkatuko tresna batek dagoeneko konpontzen duenean

Behar dituzunak salmentak badira, hilabeteka, saltzaileka eta produktuka, ziurrenik nahikoa da ondo muntatutako kalkulu-orri bat edo panel-tresna estandar bat. Horretarako neurrira egindako 3D bat dirua gaizki gastatzea da, eta diagnostikoan esango dizugu.

Lagunbot kudeatzeko erabiltzen ditugun 3D aginte-panelak

2026ko urrian eta azaroan, three.js-ekin panel-multzo bat eraiki dugu gure enpresa bera kudeatzeko. Gure lan-tresna dira, beraz zer dabilen eta zer ez konta dezakegu.

Bulego birtuala espazio-metaforaren adibiderik argiena da: 3Dko eraikin bat da, eta gela bakoitza beste lau paneletako bat da. Sartzen zara, zein gelak duen abisu bat begiratzen duzu eta hara pasatzen zara.

Panel hauetako datuak barnekoak dira, eta ez ditugu argitaratzen.

Nola dauden eginda barrutik

Arkitekturak pieza gutxi ditu, eta nahita da hala.

1. IturriakKalkulu-orriak, fakturazio-programak, web-analitika, laguntzaileen plataformak eta CRMko oharrak. Bakoitzak bere datuak betiko moduan gordetzen ditu.
2. Biltzailea eta zubiakGure zerbitzarian dabilen Pythonez egindako biltzaile batek eta Google Apps Scripteko zubiek iturriak 30 minuturo irakurtzen dituzte.
3. JSON fitxategi batEmaitza datu-fitxategi ordenatu batean geratzen da, pantailan ezkutatutako negozio-logikarik gabe.
4. three.js-ekin egindako web estatiko batOrriak JSONa irakurtzen du eta eszena margotzen du. Ez dago bisita bakoitzean kontsultatu beharreko datu-baserik, beraz azkar kargatzen da eta mantentzeko erraza da.
5. Sarbide propioaErabiltzailea eta pasahitza guk egindako sarbide-orri batean. Erabiltzaileko lizentziarik gabe.

Iturriak 30 minuturo irakurtzea erabaki bat izan zen. Denbora errealeko aginte-panel batek, segundoz segundo aldatzen diren datuekin, beste arkitektura bat beharko luke: zerbitzariarekin etengabeko konexioak eta gertaerak igortzen dituzten iturriak. Salmentei, fakturei edo SEOri buruz erabakitzeko, ordu erdia nahikoa eta sobera da, eta horrela dena askoz errazagoa da eta arazo gutxiago ematen ditu.

Sarbide-orria propioa da, nabigatzailearen erabiltzaile eta pasahitzaren leihoa ez delako agertzen nabigatzaile txertatu batzuetan, eta haietatik ezin zen sartu. Gure orriarekin guztietatik sartzen da.

Eraikitzean ikasi duguna

Zifra garrantzitsuak testuan ere doaz. Ordenagailua oso kargatuta dagoenean, 3D eszenak denbora behar du margotzeko, eta bilatzen duzun zifra eszenaren barruan bakarrik badago, zer gertatzen den jakin gabe geratzen zara zain. Horregatik, zifra nagusiak orain aparte idazten dira, HTML arruntean, eta berehala ikusten dira.

Eszena gelditu egiten da inork begiratzen ez duenean. Ezkutuko fitxa batean etengabeko animazioak bateria eta prozesadorea alferrik gastatzen ditu. Panelak marrazteari uzten dio fitxa ikusgai ez dagoenean, eta itzultzen zarenean berriro hasten da.

APIrik ez badago, esportazioak erabiltzen dira. Fakturazio-programa guztiek ez dute APIrik, eta batzuek aparte kobratzen dute. Kasu horietan, panela programak egiten uzten dituen esportazioekin elikatzen da, eta fitxategia igota eguneratzen da. Ez da konexio automatikoa bezain dotorea, baina dagoeneko funtzionatzen du eta ez dago ordainpeko gehigarri baten mende.

Bezero baterako adibide bat: zerbitzu tekniko baten panela

Gure panelez gain, pertsianak konpondu eta instalatzen dituen enpresa baterako 3D panel bat diseinatu dugu. Fikziozko datuekin dabilen prototipo funtzional bat da, eta ez dago produkzioan inongo bezerorenean.

Lan baten ibilbide osoari jarraitzen dio: bezeroaren abisua, hura jasotzen duen teknikaria, lan-partea, QR kodea duen PDF faktura, ordainketa, inkesta eta iritzia. Teknikariaren eta bezeroaren mugikorrerako pentsatutako orriak ditu, Python, FastAPI eta SQLite erabiliz egindako zerbitzari propio bat, eta konektatutako laguntzaile bat, bezeroak idazten duenean abisua bere kabuz sortzen duena.

Panelak ibilbide hori eszena gisa margotzen du eta, proba-datuekin, bezero bati goizero zer ikusiko lukeen erakusteko balio du. Hura inguratzen duen sistema osoa hiperautomatizazioari buruzko artikuluan kontatzen dugu.

2D edo 3D aginte-panela: konparazioa

Bi aukerak konbina daitezke: 3Dko sarrera bat orientatzeko eta, gela bat aukeratzean, 2Dko taulak eta barra-grafikoak xehetasunerako.

Nola enkargatu aginte-panel pertsonalizatu bat

Aginte-panel pertsonalizatu bat, 2D nahiz 3D, ondo ateratzen da ezer marraztu aurretik zer erakutsi behar duen erabakitzen denean. Guk ordena honetan egiten dugu:

1. ErabakiakZein erabaki hartzen dituen taldeak astero eta zer datu falta zaion horiek hartzeko. Hori gabe, panela inork begiratzen ez dituen adierazleez betetzen da.
2. IturriakDatu horiek gaur non dauden eta nola irakur daitezkeen: API, esportazioa edo kalkulu-orria.
3. Prototipo batLehen bertsio bat, adierazle pare batekin eta benetako datuekin, 3Dak ekarpenik egiten duen ala 2D nahikoa den erabakitzeko.
4. Faseka entregatzeaArloak banan-banan gehitzen dira, gehien erabiltzen denetik hasita.
5. MantentzeaIturriak aldatzen dira eta programak eguneratzen dira. Norbaitek zaindu behar du panelak ondo irakurtzen jarraitzen duela.

Inor kontratatu aurretik, galdetu kodea eta datuak norenak izango diren, non ostatatuko den panela eta nork ordainduko duen ostatatze hori, eta nork mantenduko duen iturri bat aldatzen bada. Erantzunak idatzita geratzen badira, gero ez dago sorpresarik.

Lan mota hau neurrirako softwarearen barruan dago, integrazioekin eta IAren bidezko prozesuen automatizazioarekin batera. Argi ez baduzu panel bat behar duzun ala lehenago datuak ordenatu behar diren, IA aholkularitza hortik bertatik hasten da, eta nola lan egiten dugun orrian daude urratsak. Azpeitian gaude eta Gipuzkoako enpresekin, Euskadiko gainerakoekin eta Espainia osokoekin lan egiten dugu urrutitik.

3D aginte-panelei buruzko ohiko galderak

Zer da three.js?

Kode irekiko JavaScript liburutegi bat da, MIT lizentziarekin, web-orri batean 3D grafikoak marrazteko. WebGLn eta WebGPUn oinarritzen da, nabigatzailearen bi teknologiatan, eta kamerak, argiak eta materialak maila baxuan programatzeko lana aurrezten du.

3D aginte-panel bat eta denbora errealeko aginte-panel bat gauza bera al dira?

Ez nahitaez. 2D edo 3D izatea eta zenbatean behin eguneratzen den erabaki desberdinak dira. Gure panelak 30 minuturo eguneratzen dira, eta hori nahikoa da salmentei, fakturazioari edo SEOri buruz erabakitzeko. Denbora errealeko panel bat, segundoz segundoko datuekin, beste modu batera diseinatzen da, eta benetan epe horretan erabaki behar denean bakarrik merezi du.

Ezer instalatu behar al da ikusteko?

Ez. Nabigatzailean irekitzen da, esteka eta erabiltzaile batekin. Egungo ordenagailuetan eta bilera-pantailetan funtzionatzen du. Mugikorretan eta ekipo zaharretan komeni da aurretik probatzea eta, behar izanez gero, ikuspegi arinago bat eskaintzea.

Irisgarria al da 3D aginte-panel bat?

Izan daiteke, horretarako diseinatzen bada. Zifra garrantzitsuak testuan eta taulatan ere idazten dira, eszenak sistemaren mugimendu murriztuaren hobespena errespetatzen du eta 3Drik gabeko ikuspegi alternatibo bat dago. 3D eszena hutsa, besterik gabe, ez da irisgarria.

Nire egungo programekin konekta al daiteke?

Programa bakoitzak eskaintzen duenaren araberakoa da. APIa badu, zuzenean irakurtzen da; ez badu edo aparte kobratzen badu, haren esportazioekin lan egiten da. Guk kalkulu-orriak, Google Search Console eta Analytics, fakturazio-programak eta IA laguntzaileen plataformak konektatu ditugu.

Zenbat kostatzen da aginte-panel pertsonalizatu bat?

Iturri kopuruaren, barne hartzen dituen arloen eta 3Da behar duen ala 2D nahikoa den araberakoa da. Horregatik ez ditugu tarifak argitaratzen: 30 minutuko doako diagnostikoaren ondoren, neurrira egindako proposamen bat bidaltzen dugu idatziz.

Balio al du enpresa txiki batentzat?

Bai, erabakiak hainbat tokitan sakabanatutako datuekin hartzen badira. Enpresa txiki batean, irabazten dena goizero bost programa ireki behar ez izatea da. Batzuetan lehen urratsa ondo ordenatutako kalkulu-orri bat da, eta horrekin nahikoa da.

Nork mantentzen du aginte-panela datu-iturri bat aldatzen denean?

Kontratatzean idatziz adosten denak. Programek euren esportazioak eta APIak aldatzen dituzte, beraz hasieratik finkatu behar da nork zaintzen duen, akats baten berri nola ematen den eta zenbat denbora behar den konpontzeko. Guk proposamenean planteatzen dugu.

Iturriak

• GitHub: three.js biltegia (deskribapena, MIT lizentzia eta WebGL eta WebGPU errendatzaileak)
• MDN: WebGL APIa
• W3C: 1.1.1 arrakasta-irizpidea, testu ez den edukia (WCAG 2.2)
• MDN: prefers-reduced-motion
• Salesforce Trailhead: grafiko engainagarrien diseinua nola saihestu