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 制作について 今回の制作の目的は…

KaitoTakase
2年前

【制作物共有】3D Balls

制作日 2022年3月29日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader ・DRACOLoader 制作について 今回の制作の目的は「3Dモデ…

KaitoTakase
2年前
1

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

Blender初心者でも簡単にバナナが作れます。 初心者の方でも導入しやすいように、初めにBlenderについての簡単な説明を記載しています。 バナナの作り方から知りたい方は【…

KaitoTakase
2年前
3

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

制作日 2022年3月6日 使用しているプラグインなど ・Nuxt ・Typescript ・Firebase ・@nuxtjs/firebase ・vuex-persistedstate 制作について 今回の制作の目的は「Fir…

KaitoTakase
2年前
2

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

制作日 2022年2月26日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader ・DRACOLoader 制作について 今回の制作の目的は「DRACOL…

KaitoTakase
2年前
1

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

制作日 2021年12月28日〜2022年1月3日 使用しているプラグインなど ・Nuxt ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 前回から日数はあまり経ってい…

KaitoTakase
2年前
3

【制作物共有】3D Room2

制作日 2021年11月12日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「サイトを参考にデモ…

KaitoTakase
2年前
3

【制作物共有】3D Soccer

制作日 2021年11月12日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「Blenderでサッカーボ…

KaitoTakase
2年前
3

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

制作日 2021年11月11日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「Texture Paintを練習…

KaitoTakase
2年前
2

【制作物共有】3D Ice

制作日 2021年11月9日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「3Dモデルを複数読み込…

KaitoTakase
2年前
1

【制作物共有】3D Multiple

制作日 2021年11月5日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「3Dモデルを複数読み込…

KaitoTakase
2年前
1

【制作物共有】3D Diamond

制作日 2021年11月4日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「サイトを参考にデモサ…

KaitoTakase
2年前
1

【制作物共有】3D Plane ②

制作日 2021年11月2日 使用しているプラグインなど ・webpack ・Typescript ・gsap(ScrollTrigger) ・three.js ・GLTFLoader 制作について 今回の制作の目的は「サ…

KaitoTakase
2年前
1

【制作物共有】3D Plane

制作日 2021年11月1日 使用しているプラグインなど ・webpack ・Typescript ・gsap(ScrollTrigger) ・three.js ・GLTFLoader 制作について 今回の制作の目的は「Scr…

KaitoTakase
2年前
1

【制作物共有】3D Cushion

制作日 2021年10月29日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「気楽に楽しくサイト…

KaitoTakase
2年前
2

【制作物共有】3D Hand

制作日 2021年10月27日 使用しているプラグインなど ・webpack ・Typescript ・gsap ・three.js ・GLTFLoader 制作について 今回の制作の目的は「サイトをできるだけ…

KaitoTakase
2年前
2
【制作物共有】3D Glasses

【制作物共有】3D Glasses

制作日

2022年4月22日

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

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

制作について

今回の制作の目的は「ユーザーが操作できる部分を増やし、サイトとして実装すること」です。

3Dに関連してユーザーが操作できる部分として簡単に思いつくものは
・3Dモデルの色(マテリ

もっとみる
【制作物共有】3D Balls

【制作物共有】3D Balls

制作日

2022年3月29日

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

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

制作について

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

前にも複数モデルの読み込みを行いました。
その時は3Dモデルごとにファイルを分けていましたが、今回は1つのフ

もっとみる
Blender テクスチャペイントでバナナを作る

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

Blender初心者でも簡単にバナナが作れます。
初心者の方でも導入しやすいように、初めにBlenderについての簡単な説明を記載しています。
バナナの作り方から知りたい方は【実際に作ってみる】からご覧ください。

目次1. 概要
2. ダウンロード
3. Blenderでできること
4. 制作画面の説明
5. 実際に作ってみる
6. 最後に

概要
Blenderとは
Blenderは、無料で使

もっとみる
【制作物共有】反応速度計測ゲーム

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

制作日

2022年3月6日

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

・Nuxt
・Typescript
・Firebase
・@nuxtjs/firebase
・vuex-persistedstate

制作について

今回の制作の目的は「Firebaseを使った何かを作成すること」です。

今から約一年ほど前に初めて案件でFirebaseを使って以来、使う機会がなかったので復習も兼ねてFirebase

もっとみる
【制作物共有】3D CHANGE BANANA COLOR

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

制作日

2022年2月26日

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

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

制作について

今回の制作の目的は「DRACOLoaderを実装すること」です。

3Dモデルを読み込んで表示するにあたって、DRACO圧縮を行うと3Dモデルのファイルサイズを大幅に小さくすることができます。

もっとみる
ポートフォリオを改修しました。vol.2

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

制作日

2021年12月28日〜2022年1月3日

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

・Nuxt
・Typescript
・gsap
・three.js
・GLTFLoader

制作について

前回から日数はあまり経っていませんが、Blenderでの3D作成やThree.jsに少しずつ慣れてきたのでポートフォリオを改修しました。

改修の目的

・全体のデザインを統一し、シンプルにしたい
・3D

もっとみる
【制作物共有】3D Room2

【制作物共有】3D Room2

制作日

2021年11月12日

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

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

制作について

今回の制作の目的は「サイトを参考にデモサイトを作成すること」です。

こちらのサイトは弊社デザイナーのTKS(https://twitter.com/tks_signal)さんから教えていただきました。

まずは部屋の

もっとみる
【制作物共有】3D Soccer

【制作物共有】3D Soccer

制作日

2021年11月12日

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

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

制作について

今回の制作の目的は「Blenderでサッカーボールを作ること」です。

早速作っていきます。

頂点をベベルします。

再度ベベルして調整

五角形と六角形の部分を押し出します。

サブディビジョンサーフェスをかけます

もっとみる
【制作物共有】3D Banana & Apple

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

制作日

2021年11月11日

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

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

制作について

今回の制作の目的は「Texture Paintを練習してよりリアルな3Dモデルを作成すること」です。

今回は正方形から作っていきます。

まずは大まかな形を作成

サブディビジョンサーフェスで表面を滑らかに

Tex

もっとみる
【制作物共有】3D Ice

【制作物共有】3D Ice

制作日

2021年11月9日

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

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

制作について

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

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

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

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

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

ダブルを作ったり

もっとみる
【制作物共有】3D Multiple

【制作物共有】3D Multiple

制作日

2021年11月5日

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

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

制作について

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

まずは前回作成したりんごの3Dモデルから梨のモデルを作成します。

テクスチャを張り替えて、形を少し調整します。

この二つをThree.jsで読み込みます。

もっとみる
【制作物共有】3D Diamond

【制作物共有】3D Diamond

制作日

2021年11月4日

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

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

制作について

今回の制作の目的は「サイトを参考にデモサイトを作成すること」です。

今回参考するサイトは下記

このサイトの左上にちょこんとあるものをハンバーガーメニュー風にアレンジしたいと思います。

まずはBlenderで練乳の3

もっとみる
【制作物共有】3D Plane ②

【制作物共有】3D Plane ②

制作日

2021年11月2日

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

・webpack
・Typescript
・gsap(ScrollTrigger)
・three.js
・GLTFLoader

制作について

今回の制作の目的は「サイトを参考にデモサイトを作成すること」です。

次のデモサイト作成のため、awwwards.で参考を探していたら飛行機にぴったりのサイトを見つけました。

ちょうど昨日

もっとみる
【制作物共有】3D Plane

【制作物共有】3D Plane

制作日

2021年11月1日

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

・webpack
・Typescript
・gsap(ScrollTrigger)
・three.js
・GLTFLoader

制作について

今回の制作の目的は「ScrollTriggerを使ってスクロールに連動したサイトを作ること」です。

前にも作成したことがありますが、あの時より綺麗なコードがかけると思うので再度やってみよう

もっとみる
【制作物共有】3D Cushion

【制作物共有】3D Cushion

制作日

2021年10月29日

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

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

制作について

今回の制作の目的は「気楽に楽しくサイトを作ること」です。

前回作成した手のモデルが少し大変で、疲れたので気ままにサイトを作ってリフレッシュしようと思います。

モデルは前に作っていたクッションがあるので、それを使いま

もっとみる
【制作物共有】3D Hand

【制作物共有】3D Hand

制作日

2021年10月27日

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

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

制作について

今回の制作の目的は「サイトをできるだけ再現すること②」です。

参考とするサイトはこちら

このサイトは弊社で週一で行っているサイト鑑賞で門脇くんが紹介してくれました。

まずはBlenderで手を作成します。

平面

もっとみる