KaitoTakase

社会人4年目。BlenderとThree.js、WebGLが好きです。作成した3Dモデ…

KaitoTakase

社会人4年目。BlenderとThree.js、WebGLが好きです。作成した3Dモデルでウェブサイトをよく作っています。

【制作物共有】3D Glasses

制作日 2022年4月22日 使用しているプラグインなど ・webpack ・Typescript ・React ・gsap ・three.js ・GLTFLoader ・DRACOLoader 制作について 今回の制作の目的は「ユーザーが操作できる部分を増やし、サイトとして実装すること」です。 3Dに関連してユーザーが操作できる部分として簡単に思いつくものは ・3Dモデルの色（マテリアル） ・3Dモデルの位置 ・3Dモデルの角度 ・3Dモデルのサイズ でした。

KaitoTakase

    • 【制作物共有】3D Balls

      制作日 2022年3月29日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader ・DRACOLoader 制作について 今回の制作の目的は「3Dモデルを複数読み込みThree.jsで操作すること」です。 前にも複数モデルの読み込みを行いました。 その時は3Dモデルごとにファイルを分けていましたが、今回は1つのファイルに複数の3Dモデルを入れた状態で行います。 前に書いたものはこちら 早

      KaitoTakase

      • Blender テクスチャペイントでバナナを作る

        Blender初心者でも簡単にバナナが作れます。 初心者の方でも導入しやすいように、初めにBlenderについての簡単な説明を記載しています。 バナナの作り方から知りたい方は【実際に作ってみる】からご覧ください。 目次1. 概要 2. ダウンロード 3. Blenderでできること 4. 制作画面の説明 5. 実際に作ってみる 6. 最後に 概要 Blenderとは Blenderは、無料で使える総合3DCGソフトのこと。 静止画のサンプル↓ 動画のサンプル↓ ダウ

        KaitoTakase

        • 【制作物共有】反応速度計測ゲーム

          制作日 2022年3月6日 使用しているプラグインなど ・Nuxt ・Typescript ・Firebase ・@nuxtjs/firebase ・vuex-persistedstate 制作について 今回の制作の目的は「Firebaseを使った何かを作成すること」です。 今から約一年ほど前に初めて案件でFirebaseを使って以来、使う機会がなかったので復習も兼ねてFirebaseを使ったゲームを作成しようと思いました。 ゲームの内容をこだわるよりかは、Fi

          KaitoTakase

        【制作物共有】3D Glasses

        KaitoTakase

          【制作物共有】3D CHANGE BANANA COLOR

          制作日 2022年2月26日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader ・DRACOLoader 制作について 今回の制作の目的は「DRACOLoaderを実装すること」です。 3Dモデルを読み込んで表示するにあたって、DRACO圧縮を行うと3Dモデルのファイルサイズを大幅に小さくすることができます。 存在は知っていましたが、DRACO圧縮を行うことによりDRACOLoaderの

          KaitoTakase

          【制作物共有】3D CHANGE BANANA COLOR

          KaitoTakase

          ポートフォリオを改修しました。vol.2

          制作日 2021年12月28日〜2022年1月3日 使用しているプラグインなど ・Nuxt ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 前回から日数はあまり経っていませんが、Blenderでの3D作成やThree.jsに少しずつ慣れてきたのでポートフォリオを改修しました。 改修の目的 ・全体のデザインを統一し、シンプルにしたい ・3Dモデルを使っても読み込み速度は早めたい ・Worksページへの導線をしっかり入れ

          KaitoTakase

          ポートフォリオを改修しました。vol.2

          KaitoTakase

          【制作物共有】3D Room2

          制作日 2021年11月12日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「サイトを参考にデモサイトを作成すること」です。 こちらのサイトは弊社デザイナーのTKS（https://twitter.com/tks_signal）さんから教えていただきました。 まずは部屋の3Dを作成していきます。 床 机 椅子 ライト キーボード こういう細

          KaitoTakase

          【制作物共有】3D Room2

          KaitoTakase

          【制作物共有】3D Soccer

          制作日 2021年11月12日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「Blenderでサッカーボールを作ること」です。 早速作っていきます。 頂点をベベルします。 再度ベベルして調整 五角形と六角形の部分を押し出します。 サブディビジョンサーフェスをかけます。 スムースシェードをかけます マテリアルをつけて完成です。 テキストとア

          KaitoTakase

          【制作物共有】3D Soccer

          KaitoTakase

          【制作物共有】3D Banana & Apple

          制作日 2021年11月11日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「Texture Paintを練習してよりリアルな3Dモデルを作成すること」です。 今回は正方形から作っていきます。 まずは大まかな形を作成 サブディビジョンサーフェスで表面を滑らかに Texture Paintでリアルなバナナの色をつけていきます。 全体を黄色で塗った

          KaitoTakase

          【制作物共有】3D Banana & Apple

          KaitoTakase

          【制作物共有】3D Ice

          制作日 2021年11月9日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「3Dモデルを複数読み込むこと」です。 まずはアイスを作成します。 アイスごとを見分けるためさくらんぼをつけました。 コーンを作成し完成です。 色を変えスプーンを作成したり、 ダブルを作ったり、 カラースプレーをつけたりしました。 Three.jsで読み込みます。

          KaitoTakase

          【制作物共有】3D Ice

          KaitoTakase

          【制作物共有】3D Multiple

          制作日 2021年11月5日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「3Dモデルを複数読み込むこと」です。 まずは前回作成したりんごの3Dモデルから梨のモデルを作成します。 テクスチャを張り替えて、形を少し調整します。 この二つをThree.jsで読み込みます。 時間経過とマウス位置で動くように実装します。 テキストとアニメーションをつけ

          KaitoTakase

          【制作物共有】3D Multiple

          KaitoTakase

          【制作物共有】3D Diamond

          制作日 2021年11月4日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「サイトを参考にデモサイトを作成すること」です。 今回参考するサイトは下記 このサイトの左上にちょこんとあるものをハンバーガーメニュー風にアレンジしたいと思います。 まずはBlenderで練乳の3Dモデルを作成します。 マテリアルをつけて簡単に 予想以上に3Dモデルが浮い

          KaitoTakase

          【制作物共有】3D Diamond

          KaitoTakase

          【制作物共有】3D Plane ②

          制作日 2021年11月2日 使用しているプラグインなど ・webpack ・Typescript ・gsap（ScrollTrigger） ・three.js ・GLTFLoader 制作について 今回の制作の目的は「サイトを参考にデモサイトを作成すること」です。 次のデモサイト作成のため、awwwards.で参考を探していたら飛行機にぴったりのサイトを見つけました。 ちょうど昨日飛行機のモデルを作成していたので簡単に作ってみようと思います。 背景の空はSk

          KaitoTakase

          【制作物共有】3D Plane ②

          KaitoTakase

          【制作物共有】3D Plane

          制作日 2021年11月1日 使用しているプラグインなど ・webpack ・Typescript ・gsap（ScrollTrigger） ・three.js ・GLTFLoader 制作について 今回の制作の目的は「ScrollTriggerを使ってスクロールに連動したサイトを作ること」です。 前にも作成したことがありますが、あの時より綺麗なコードがかけると思うので再度やってみようと思いました。 まずは飛行機のモデルを作成します。 大まかな形を作成したら、

          KaitoTakase

          【制作物共有】3D Plane

          KaitoTakase

          【制作物共有】3D Cushion

          制作日 2021年10月29日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「気楽に楽しくサイトを作ること」です。 前回作成した手のモデルが少し大変で、疲れたので気ままにサイトを作ってリフレッシュしようと思います。 モデルは前に作っていたクッションがあるので、それを使います。 　 何となく頭の中にアニメーションが浮かんでいるので実装します。 マ

          KaitoTakase

          【制作物共有】3D Cushion

          KaitoTakase

          【制作物共有】3D Hand

          制作日 2021年10月27日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「サイトをできるだけ再現すること②」です。 参考とするサイトはこちら このサイトは弊社で週一で行っているサイト鑑賞で門脇くんが紹介してくれました。 まずはBlenderで手を作成します。 平面で見ると良い感じ 押し出しして凹凸をつけます。 サブディビジョンサーフェスを

          KaitoTakase

          【制作物共有】3D Hand

          KaitoTakase