【制作物共有】3D Car
制作日
2021年10月16日
使用しているプラグインなど
・webpack
・gsap
・three.js
・GLTFLoader
・OrbitControls
・intersection-observer
制作について
今回の制作の目的は「キーボードを使用したインタラクションを実装すること」です。
キーボードで操作する最終目標はこちら
まずはキーボードに応じて指定するアニメーションを開始するページを作成します。
いつも通りBlenderで車を作成
タイヤの作成に力を入れました。
かなりリアルにできたと思っていてお気に入りです。
またアニメーションもいつもよりこだわってみました。
アニメーションにモディファイアを追加して、車本体が常に振動しているような動きにしています。
これも初めて知れたことなので勉強になりました。
Three.jsで表示します。
キーボードの矢印でアニメーションを実行します。
（色々な向きにできて、かっこよく見えるので好きです）
スマホではキーボードが出せないので、一旦OrbitControlsで対応しました。
実装についてはGitHubに公開してるので、よければ参考にしてください。
以上となります。
参考
この記事が気に入ったらサポートをしてみませんか？