LogoMark.png

岩井玄貴/情報デザイン研究I

Playing cards

3D×Webで新たなwebの形

デモ画像

design.png

Project Director
Keywords:Three.js, React, HTML/CSS


Overview

Introduction / What is This

3D活用してWebサイト

Background and Purpose

なぜ3Dの表現にするのか?
その疑問を思った時に、理由として私は文章ばかりの情報より直感的の
視覚情報の方が伝わりやすいからである。
ただ自分が文章ばかりの本が苦手ということもあるが、絵や図など
でまとめてある情報の方が端的でわかりやすい。
プロのデザイナーなら誰しもが文章情報だけではなく図や絵で多くの情報を語る
ことができる。
特にiPhoneが良い例である。今までガラケーでほぼ文章しかない情報であったが
iPhoneによってほぼアイコンになり伝わりやすいデザインになった。
あと説明書のない電話とも言われとても革命的である。
話を逸れたが3Dの表現方法もその一部である。あたかもその場所に実物あるように感じる。実際にその場所に行かなくてもひとつ画面を通せば見えたりもする。
近年、VR(仮想現実)やAR(拡張現実)によって3Dが身近になりつつある。
その中でWebサイトもそれに応じて3Dサイトが急激に増加しつつある。
3Dで絵や図以外にも多くの情報を伝えることに魅力を持ったから、3D表現をすることに決めた。


Concept

2Dグラフィックと3Dを上手く活用したデザイン

Output

DEMO
デザイン
情報

Member

個人開発

Tools

Term

プロジェクトの期間|2021.4.15 - 2021.6.17

Conclusion / Summary




Survey

Present Status

3Dを使いどのように問題を定義するか
webpackとは

Precedent

sssolitaire

ポートフォリオでの事例

日本での3D事例

学生の卒展で作成された事例

3D表現の数々


Technique / Technology

Three.js
React




Project Management

Schedule

notion

ToDo







worklog


2021.5.6

デザイン作成でトランプというテーマなのでOldStyleのフォントを起用した
Font ー NewYork

デザイン




2021.5.3

今回は素材をスクロールしたら回転するようにした。
公開したDEMO
※学校限定



参考にしたもの
https://codesandbox.io/s/adoring-feather-nk16u?from-embed



jsでレスポンシブ対応
例文

   let box = 1
   if(window.matchMedia('(max-width: 400px)').matches){
     box = 2 // iPhone用
   }else if (window.matchMedia('(max-width: 767px)').matches) {
     box = 3 // iPad用
   } else if (window.matchMedia('(min-width:768px)').matches) {
     box = 4   // PC用
   }





2021.5.2

今回はトランプについて情報をまとめました。
ほぼwikipediaの情報です。
https://www.notion.so/886557ca9b2c431eaf2b66aca4ac46fd




2021.4.27

公開したDEMO


今回はReactとthreeを組み合わせたやり方を探しreact-three-fiberというのがあったため使いました。あとreact-three-fiberのヘルパーであるdreiを使いcanvas上にHTMLを表示した。
課題 - scrollしたら3Dモデルを回転させる。

モデルはsketchfabさんからお借りしたモノです''


大学のサーバーの個人領域にアクセス
①FortClientインストール
②学校のサーバーにアクセス
③Filezillaで接続する(なぜかできなかった)
なので
↓の方法でした
https://storage.ip.kyusan-u.ac.jp/proself/login/login.go



2021.4.22

今回Three.jsにすると処理が重たいのでどうにか解決したいと思い
調べたらwebpackがどうやら使いやすいらしい

webpack

webpackは、JavaScriptなどの複数のモジュールをひとつにまとめるツールです。
使い方
わかりやすい動画



2021.4.21

テスト




2021.4.15

2Dと3Dの両方のデザインを駆使して作成したい

stonestyle




2021.04.13

情報収集

個人ポートフォリオでこのクオリティー

Tools

Three.js





PAGES

GUIDE

添付ファイル: filedesign.png 16件 [詳細]
Last-modified: 2021-05-06 (木) 10:18:43