【制作物共有】3D Ice
見出し画像

【制作物共有】3D Ice

制作日

2021年11月9日


使用しているプラグインなど

・webpack
・Typescript
・gsap
・three.js
・GLTFLoader


制作について

今回の制作の目的は「3Dモデルを複数読み込むこと」です。

まずはアイスを作成します。

スクリーンショット 2021-11-08 17.43.20


アイスごとを見分けるためさくらんぼをつけました。

スクリーンショット 2021-11-08 17.44.31


コーンを作成し完成です。

スクリーンショット 2021-11-08 17.50.34


色を変えスプーンを作成したり、

スクリーンショット 2021-11-08 19.04.14

スクリーンショット 2021-11-08 19.03.00


ダブルを作ったり、

スクリーンショット 2021-11-08 19.05.18

スクリーンショット 2021-11-08 19.08.59


カラースプレーをつけたりしました。

スクリーンショット 2021-11-08 19.07.56


Three.jsで読み込みます。

スクリーンショット 2021-11-09 10.07.25


複数読み込む際に間違えてcanvasごと読み込んでしまうとこうなりました。

スクリーンショット 2021-11-09 10.07.56


canvasは一つに、複数読み込みます。

スクリーンショット 2021-11-09 12.15.27


テキストを加えて完成です。

スクリーンショット 2021-11-09 14.52.54


今回はGitにコードを公開しました。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
社会人3年目。Webプログラマー目指して勉強中。