3D × Playing cards
3D表現、新たなwebの形
Project Director
Keywords：Three.js, React, HTML/CSS
公開サイト
https://playingcards-home.web.app/
ソースコード
https://github.com/gorirakuniro/playingcards
Overview
Introduction / What is This
3D活用してWebサイト
Background and Purpose
最近ゲーム文化になりゲームをする人が多い、それは別に悪くないがゲーム依存症などで1日6時間以上ゲームをして目に悪くなるので、紙媒体で遊べるゲームとした時に一番、認知度の高いトランプが良いのではと思いこの紹介サイト作成するに至った。
調査結果
ゲームで目が悪くなる
なぜ3Dの表現にするのか?
自分の表現の幅を広げたいと思い3Dで見せるような演出をした。そして3Dに見せることにより、より多くの情報を伝えれるのではないかと思い3D起用した。今回はシンボルしか3Dを起用していないのですが、これからもっと技術が上がればより複雑の物もweb上で表現できるのではないかと考えています。
Concept
トランプの面白いのきかっけ作り。コロナで外出できないからこそ家の中で遊べるゲームとした時にトランプの良さを知ってもらいたい。
Output
公開サイト
スマホでスクロールが間に合いませんでした。できるかも不明です。
デザイン
情報
Member
個人開発
Tools
- Three.js
- Blender
- React
Term
プロジェクトの期間｜2021.4.15 - 2021.6.17
Conclusion / Summary
このサイトを通して、3Dによるリッチなデザインかつ多くの情報伝達ができ、そしてトランプという紙媒体の良さを知ってもらうことができたのではないかと思う。
Survey
Present Status
現状調査
最近3Dをweb上で見せるのが流行している。3Dに見せることにより、より多くの情報を伝えれる、他にもVRの普及や本格的な5Gの普及でどんどんインターネットが早くなっている。特にBtoB向けのサイトやキャンペーンサイトが3Dが使われることが多い。
Precedent
Technique / Technology
Three.js
React
Project Management
Schedule
ToDo
- Three.js
- webpackについて勉強
2021.7.16
safariーフォント違う
2021.7.15
スマホ画面のスクロールは間に合いませんでした
スマホでスクロールできるかは不明です。
問題点
chomeーちゃんと動く
safariー3Dも動かない
firefoxーロゴの表示がおかしい
3Dが動かない理由
バージョンの問題かも‥
2021.7.1
サイトの中身を主に情報を集めて載せた。
Loading画面を挿入
ページのデザイン作成
ページの中身を作成/code
レスポンシブ対応
- デザイン微調整
- UIアニメーションの調整
2021.6.23
現状の段階でのサイト
https://playingcards-home.web.app/
今後のTodo
https://trello.com/b/4F4TAwtk/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6ia#
今後する予定
- Loading画面を挿入
- ページのデザイン作成
- ページの中身を作成/code
- レスポンシブ対応
- デザイン微調整
- UIアニメーションの調整
2021.6.10
試作のデモ
https://youtu.be/1aDUjPyb-q4
2021.6.3
方向性を変更して作り直そうとして
試作を今作成しています。
mouseを持っていったら色を変更するサンプル
https://ics.media/tutorial-three/raycast/
2021.5.29
- 問題点
- 作成した3Dが文字に重なり文字情報が見づらいのでデザインを見直します。
案として横スクロール型にすることにした
https://total-pr.net/
2021.5.26
3Dモデルのtextureを変更、macbook13インチのみレイアウト対応
それ以外はこれから修正します。特にiPhoneではみないでほしい...。
公開サイト
https://playing-cards-7d2a3.web.app
2021.5.20
Firebaseで公開しました。
公開サイト
https://playing-cards-7d2a3.web.app
Github公開ページ
https://github.com/gorirakuniro/socialdesign-lab1
2021.5.13
fontがうまく反映されていないので調べてみた。
- https://teratail.com/questions/295430
トランプについての情報を追記でまとめた。(雑学について)
情報
今までletter-spacingを使っていたが、
文字詰めできるCSSのfont-feature-settingsがすごい.selector { font-feature-settings: "palt" 1, "trad" 1; }https://ics.media/entry/14087/
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がどうやら使いやすいらしい
- Planeの3Dモデルにtextureで画像を貼るだけなのでblenderは必要なかった
webpack
webpackは、JavaScriptなどの複数のモジュールをひとつにまとめるツールです。
使い方
わかりやすい動画
2021.4.21
テスト
- 今回はsketchfabのモデルを使い、実際にモデルを置いてみた。Three.js以外にGLTF形式を読み込むGLTFLoaderのライブラリを使った。
- 改善すべき点
- 読み込むのに時間がかかりとても処理が重たいと言う点
- 読み込むのに時間がかかりとても処理が重たいと言う点
- 作成したDEMO
- モデル
- 参考にした記事
2021.4.15
2Dと3Dの両方のデザインを駆使して作成したい
2021.04.13
情報収集
個人ポートフォリオでこのクオリティー
- https://russo-creation.github.io/my.portfolio/
日本で神社をテーマにし3Dで表現 - http://wldlght.com/
学生の卒展で作成された スマホの時(疑似トラックパット) - https://im-cursor.netlify.app/
Tools
logo02.png
logo01.png
site01.png
play.png
design05.jpg
design04.jpg
design03.jpg
design02.jpg
design01.jpg
design.png
