はじめまして。フロントエンドエンジニアの田島と申します。 ちょうど今から約1年ほど前に鹿児島にあるアプリファクトリーはるni株式会社というゲーム開発会社様にお声がけいただき、お仕事として企業サイトを制作致しました。 以下のツイートにて、サイト内での操作イメージを短くまとめた動画を添付しています。 サイトの制作方針として、はるni様が制作を得意とする3Dボクセルを中心に据える方針で企画が固まり、技術的にチャレンジングな仕事となりました。その際、私自身多くの方々の技術記事等を参考にさせていただいたため、自分も微力ながら制作の過程で得られた知見を共有できればと思い、記事に残すことにしました。 (ただし、WebGLやThree.jsの扱いに関して未熟な点も多分にあるため、各章でより良いアイデアをお持ちの方はコメント等で温かくご提案いただけますと幸いです。) 技術検証 陰影を事前にベイクするか、リア
![3DボクセルをWebGLで企業サイトに組み込んだ際の考察過程](https://cdn-ak-scissors.b.st-hatena.com/image/square/f7308753ffab4e8b3306c72714331e06811a17b2/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--HXkFZnJf--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A3D%2525E3%252583%25259C%2525E3%252582%2525AF%2525E3%252582%2525BB%2525E3%252583%2525AB%2525E3%252582%252592WebGL%2525E3%252581%2525A7%2525E4%2525BC%252581%2525E6%2525A5%2525AD%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%2525E3%252581%2525AB%2525E7%2525B5%252584%2525E3%252581%2525BF%2525E8%2525BE%2525BC%2525E3%252582%252593%2525E3%252581%2525A0%2525E9%25259A%25259B%2525E3%252581%2525AE%2525E8%252580%252583%2525E5%2525AF%25259F%2525E9%252581%25258E%2525E7%2525A8%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%252594%2525B0%2525E5%2525B3%2525B6%2525E7%25259C%25259F%2525E6%252582%25259F%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VhMjZiNDE4YzAuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)