Three.jsで3Dアニメーションに挑戦してみた話 〜Web制作から見たリアルな感想〜
目次
Three.jsとの出会い
Web制作の仕事を始めて少し経ったある日、とある案件で「3Dアニメーションを使ったWebサイト」の見積もり依頼を受けたことがありました。当時の私はHTML/CSSとjQuery、WordPressを使ったレスポンシブ対応のコーポレートサイト構築をメインにしており、「3Dアニメーションでサイトに動きを加える」という発想自体が未知のものでした。
調査を進める中で、「Three.js」というJavaScriptライブラリの存在を知りました。WebGLをベースにしていて、3D表現を比較的手軽に実現できるとのこと。まだ力不足でその案件自体は実現できなかったものの、「こんな表現方法があるのか！」という驚きと感動を今でも覚えています。
動画チュートリアルでの学習
業務後の空き時間を使って、Three.jsを独学してみることにしました。まずは動画チュートリアルを参考に、見よう見まねで3D空間にオブジェクトを表示してみることから始めました。
学んでいく中で印象的だったのが、3D空間内に「光源」を設定できる点です。光源の位置や強さによってオブジェクトに影ができたり、全体の雰囲気がガラッと変わるのは2Dとはまったく異なる体験でした。また、GLTF形式の3Dモデル（今回はフリー素材を使いました）を読み込んで、AnimationMixer を使ってアニメーションを再生するという機能にも触れました。
例えば以下のようなコードで、GLTFファイルを読み込んでアニメーションを再生しています：
const gltfLoader = new GLTFLoader();
gltfLoader.load(“./models/toon_cat_free/cat.gltf”, (gltf) => {
const model = gltf.scene;
scene.add(model);
const mixer = new THREE.AnimationMixer(model);
gltf.animations.forEach((clip) => {
mixer.clipAction(clip).play();
});
});
scene や camera, renderer といった基本的な構成を組み立てることで、Three.jsの仕組みが少しずつ見えてきました。ただ、正直なところ、まだThree.jsを「理解した」と言えるほどではありません。光源やカメラの挙動、アニメーションの構成など、考えるべきことがとにかく多くて、最初は圧倒されがちです。
実務ではあまり登場しない？
では、実際の現場でこの技術がどのくらい使われているのか？というと、かなりニッチな部類に入る印象です。企業のコーポレートサイトなどでは「そこまでの演出は不要」とされることも多く、表示パフォーマンスやデバイス対応の面からも慎重な検討が求められる場面が多いように感じます。
さらに、GLTFファイル自体も専門のデザイナーがモデリングして作成する必要がありそうで、開発者が自分で用意するにはハードルが高い印象を受けました。素材を用意しても、アニメーションの挙動が想定通りに動くかどうかは確認が必要で、実用化には一段階上のスキルや体制が求められそうです。
GSAPやRechartsなどの代替手段も
ちなみに、Three.jsを触っている中で「GSAP（GreenSock）」というJavaScriptアニメーションライブラリの存在も知りました。こちらはより軽量な2Dアニメーションが得意で、スクロールやフェード、移動などを滑らかに制御できます。実務で求められるアニメーションの多くはこうしたもので十分だったりするので、「Three.jsの重厚な3D表現」とは方向性が異なるかもしれません。
そう考えると、最近注目している Recharts などの2Dビジュアライゼーションライブラリの方が、実務における活用の幅は広いのかもしれない、と思いました。例えば、企業の従業員数や売上推移などを棒グラフで視覚的に見せるときに、ちょっとしたアニメーションを加えるだけで印象が大きく変わります。
まとめ：Three.jsは学んでよかった。でも実務では選択肢の1つ
Three.jsを学ぶことで、Webの表現力がここまで拡張できるということを体験できました。3Dに関する知識がまったくなかった私にとって、光源・カメラ・オブジェクト・アニメーションといった概念を少しでも理解できたのは大きな収穫です。
ただし、現場での使用頻度を考えると「学んでおいて損はないけど、必須ではない」と感じています。2D表現であれば、GSAPやRecharts、さらにはshadcn/uiなど、実用的かつ軽量な選択肢も豊富です。
Three.jsは「Webで3Dがやってみたい！」と思ったときの選択肢として、また個人制作などで世界観を作り込みたいときに活かせるツールかもしれません。私自身、今後も時間を見つけて少しずつ触っていきたいと思っています。
