概要

Sketchfabのアノテーションを試してみましたので、備忘録です。

最終的に、以下のようなビューアを作成しました。

https://nakamura196.github.io/SketchfabAnnotationViewer/

https://youtu.be/iEe6TbI3X70

使用データ

「菊池市/デジタルアーカイブ」の「石淵家地球儀」を対象とします。

https://adeac.jp/kikuchi-city/catalog/e0001

使用例

まずSketchfabに3Dデータをアップロードしました。

https://skfb.ly/pt8oU

そしてアノテーションを付与しました。結果、以下のようなページが用意されました。

APIを利用する

以下のリポジトリも参考にしてください。

https://github.com/nakamura196/SketchfabAnnotationViewer

以下のようなスクリプトにより、アノテーションの一覧取得や、初期表示に使用するアノテーションの指定、選択したアノテーションへのフォーカスなどを行うことができました。

<<!h/Dt<<hOmh/b/tCle<<<<ho<<<<bmTammtsed!d/ssolYldeeicay-i<<<<<<<dccd>Pa>tttrd-v!h/!d/!hu/irryEnaali>c-1Sh-i<d-2l<uvii>geplc-k1-vii-!l>pph=cn>talce>fiwhcsa/vci->ttt"haSsalt3crdielrli>ld-meamksssacDla=diaclfa=sslnreer=ssham"tgs=ors"rr>"s=tc"=sfseahhs"wasacc>e"c=b"=asp=t="fm=n==tvh"gm"b=i"="ue"n""=ifh-at"-1"rl>tohs"eatgxeAmf04olettcUwbtr-xnbr08usxatrTppawtn-a%0ncttpiFoAsy--o6m""dr-isp-rn:-42t"eeexo:t8tn1xxa>"delnJ/.""/0lltn-ajtc0isflvsscadmfohoiat"otnfxonansSa>ni.o-ndttct<totnatVo-"ri/enatu-iwsicsni-tbe-ecp.ctVlsoowmmltsr=iwalediaki"einpdrbsepwwnsybosttied"-tol=c>drc>1erd"ht<s0xdsfh/stetpa=t.p-reabdicxgxc.eto-rbtecvlm4ao--oie""yrgymc>>>-dr-/e<8ea2a-/0ry"pws0-->iicg7/drtr0stiea0khpxye,tt-mt>-3bcic0-hne04fin""att>bieA-arnvlni-moesbtwc-aea6trl"i-e>o1=n.1s1.<20/."h12.>js"></script>
cccccc}f}f}ooool)uunnnnni;nnSsssSssAeccktttkttPns}e}ta}ta}eeItu,r,ip)ip)ticutmp.croi;oi;cflrcooicon.n.aahrilhdsneaa}rcgi}ca}gpppfaePfeispp):osefon)foriiamnaal=tsii;netnn;ote..betrbI(:..fstA(socovssadpmsasfuounecrttcaa}auAehhV==maoftdeonlpnroeaonn)nsnnoois=rduadtcceAorntatnnn;nAntwwednIsenrEuut.nt)sunisooonoCAAwoe=DuelctvpsienaornotttftntannecwrIIt(eAAorot{lnonaaoaoamnnrunlndi)nnnnrtie;tsattcttteoomSePt,o;tnnoao.a.niiuiairttekwa(nLoortnetfnoosotoaaaneru{itt(iLrHioonnAninAttttUar(saa'oirTortIInLo(nii.cRmlattt{SnsoMnEattninaiooghLsPpeiikstrLLateeos(nmnnefS.ainooe(((icimmttana(Ttaegr)enntaf'sho..aCpotaoiEbaears(cpuFt(ntatoitinofl(rtm{((ahinaC(Iedin,aonlreic(s'apf)cioatxdottnotamfh'.vpiatlnnetEnaai:timerPigii,b{ietnmCv(inoapenaadee)odaooeannnft(tmr'tw;pVnit=nnpeoIaiaBea)(eoitnattirtnlony)m'rse(oetdeL,.adsnnI;spr)werioniateeIod(e;erfoctsipix,nt(wsarre=nutnpo,da'i''d,t,m=edenetan0)yfcdenenI{xipd2,'aahoinaexdn)oioa,incntnr)Cd;n-wd1lnaud.n(;heIf.d0feonmeco'ixnrl9)udtnexrtcl)dao0naon)ealdemc5cttttati({xeaetoia.=tica)'t7iotg>eokn;)i90olnieEn'n;oc;nosot{l.,on4a)nEent.4dslmaas6'{'eemte9))mneia9{;;et;=or4n(>ncft'Ih9Bl{t)7yie;1I'mcd))b(;;c'fa4n4n3o8t1a5t'i;on-li'sitd'');

まとめ

3Dデータへのアノテーションの応用にあたり、参考になりましたら幸いです。