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

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

NIKE

sssolitaire

ポートフォリオでの事例

TPN

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

3D表現の数々

Technique / Technology

Three.js
React

Project Management

Schedule

notion

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/

参考サイト01
参考サイト02

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モデルを回転させる。

• three react fiber
• drei

モデルは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
  • DEMO
  • Github
• モデル
  • T200 Dieselpunk Mech
• 参考にした記事
  • https://codelabo.com/posts/20200229083842
    
    

2021.4.15

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

stonestyle

• https://pin.it/12JnsT2
  
  

2021.04.13

情報収集

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

• https://russo-creation.github.io/my.portfolio/
  日本で神社をテーマにし3Dで表現
• http://wldlght.com/
  学生の卒展で作成された スマホの時(疑似トラックパット)
• https://im-cursor.netlify.app/
  
  

Tools

Three.js