threejs

ORIGAMI LETTER フロントエンドBreakdown

こんにちは、AQUARING かに です。 昨年制作したブラザー工業さまの「ORIGAMI LETTER」が今年4月にiFデザインアワード2021 コミュニケーションデザイン部門でゴールドを受賞しました!🎉 このWebサイトでは、Webサイト上で折り紙を折るDigital Origami Letterと、プリントした折り紙を折るPrinted O…

【イベントレポ】English Night 9: May 2021を開催しました🎉…

概要先月末に、第9回目となる完全英語のLTイベント、English Nightを開催致しました! 19:50 Zoom開放 20:00 開始 20:05 LT1 20:20 LT2 20:35 懇親会 21:00 閉会 20:00 〜開始Zoom開放〜開始までの10分間は、日本語OKタイムとさせて頂きました!笑 これにより、まずは日本語でリラックスした状態で…

オリジナルwebGL作品をGitHubページを使って公開してみました。

以前下記の記事を公開し、threejsを使ってwebGLを書いてみました。 今回はその時に紹介した「kokeglで使っているツール・機能・言語」のgithub ioつまりGitHub Pageを使ったアップロードをしてみようと思います。 うまく動作しないなどありましたらコメント欄もしくはTwitterのアカウントにご連絡く…

ThreeJsマテリアル練習5(Physical Material編)

Physical Materialとは?Mesh Standard Materialを拡張した物理ベースレンダリングのマテリアルです。UnityやUnrealなどにも実装されています。 3Dアプリケーション開発においては不可欠と言っても良いと思います。 Mesh Phong MaterialやMesh Standard Materialよりも光の反射や散乱などパラメーター…

ThreeJsマテリアル練習4(スタンダードマテリアル) 後編 ~組み合わせ探求編…

StandardMaterialを使い色々作成しました。 Paint Anaglyph 1 Anaglyph 2 ソースコード(すべて公開していません😭)

ThreeJsマテリアル練習4(スタンダードマテリアル)(前編)

スタンダードマテリアルは物理ベースレンダリングのマテリアルです。UnityやUnrealなどにも実装されています。 3Dアプリケーション開発においては不可欠と言っても良いと思います。 ランバートシェーディングやフォンシェーディングよりも光の反射や散乱などパラメーターも多く設定できるため、リアル…

ThreeJsマテリアル練習3(トゥーンマテリアル)

トゥーンマテリアルはトゥーンシェーダーともいい、アニメの用な感じが出るマテリアルです。 トゥーンマテリアルはフォンマテリアルの拡張なのでフォンマテリアル同様光源が必要になります。 new THREE.MeshToonMaterial({ color: 0x444488}); 1. 点光源を周回させる。 このときの条件は以下です。 …

ThreeJsマテリアル練習2(フォンシェーディング)

フォンシェーディングはランバートシェーディングとは違い反射を考慮されているマテリアルになるため光沢感のある質感になります。 ランバートシェーディングと同じく光源が必要になります。 new THREE.MeshPhongMaterial({ color: 0x00ff00 }) 1. 点光源を周回させる。 このときの条件は以下です…

ThreeJsマテリアル練習1(ランバートシェーディング)

ランバートマテリアルもしくはランバートシェーディングとも言う。 Specularつまり反射を考慮しないマテリアルになる、反射しないため光沢感はないマットな質感になる。 陰影が必要なため、光源を置く必要がる。 そもそも光源が必要なため、光源を置かないとどうなるかと言うと 光源がないと真っ暗で…

ポートフォリオサイトの更新

ポートフォリオサイトのaboutページを追加しました。 aboutページではCanvas APIではなくThreeJsで実装しています。 追記 技術的な解説記事を追加しています。 URLの変更をしました。(2021/03/26)