Submit Search
Upload
エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
•
1 like
•
2,591 views
Yusaku Kinoshita
Follow
このイベントで発表しました。 ↓ http://web3dj.connpass.com/event/30009/
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 48
Download now
Download to read offline
Recommended
WebVR空間の巨大スクリーンでteratailを見れるか試してみた話
WebVR空間の巨大スクリーンでteratailを見れるか試してみた話
Yusaku Kinoshita
【非エンジニアが 「明日からDevRelやってよ」って 突然言われて1年半やってきたこと ~teratailのDevRel担当、ゼロからの奮闘記~ @a...
【非エンジニアが 「明日からDevRelやってよ」って 突然言われて1年半やってきたこと ~teratailのDevRel担当、ゼロからの奮闘記~ @a...
Yusaku Kinoshita
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
Yusaku Kinoshita
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
Yusaku Kinoshita
データ分析-の波乗り遅れた気がしてる人のための Python×データ分析の超基礎の基礎 v1.0-20160831
データ分析-の波乗り遅れた気がしてる人のための Python×データ分析の超基礎の基礎 v1.0-20160831
Yusaku Kinoshita
「ゼロから構築するDev rel体制」20160316@devrelmeetup
「ゼロから構築するDev rel体制」20160316@devrelmeetup
Yusaku Kinoshita
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
Yusaku Kinoshita
GopherJS + Nashorn
GopherJS + Nashorn
Takuya Ueda
Recommended
WebVR空間の巨大スクリーンでteratailを見れるか試してみた話
WebVR空間の巨大スクリーンでteratailを見れるか試してみた話
Yusaku Kinoshita
【非エンジニアが 「明日からDevRelやってよ」って 突然言われて1年半やってきたこと ~teratailのDevRel担当、ゼロからの奮闘記~ @a...
【非エンジニアが 「明日からDevRelやってよ」って 突然言われて1年半やってきたこと ~teratailのDevRel担当、ゼロからの奮闘記~ @a...
Yusaku Kinoshita
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
Yusaku Kinoshita
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
Yusaku Kinoshita
データ分析-の波乗り遅れた気がしてる人のための Python×データ分析の超基礎の基礎 v1.0-20160831
データ分析-の波乗り遅れた気がしてる人のための Python×データ分析の超基礎の基礎 v1.0-20160831
Yusaku Kinoshita
「ゼロから構築するDev rel体制」20160316@devrelmeetup
「ゼロから構築するDev rel体制」20160316@devrelmeetup
Yusaku Kinoshita
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
Yusaku Kinoshita
GopherJS + Nashorn
GopherJS + Nashorn
Takuya Ueda
Electronからはじめるnodejs
Electronからはじめるnodejs
Hirata Tomoko
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
20160219 Developers Summit 2016 gusukuハンズオン
20160219 Developers Summit 2016 gusukuハンズオン
Midori Ikegami
Electron を知る
Electron を知る
Tomoya Shibata
20160220 座駆動LT大会 合同勉強会in大都会岡山
20160220 座駆動LT大会 合同勉強会in大都会岡山
Midori Ikegami
Node.js 奮闘日記
Node.js 奮闘日記
sasaron 397
20170722_Dragonboardで買い物メモ
20170722_Dragonboardで買い物メモ
Kenzo Nagahisa
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
Midori Ikegami
JSRとJEPとJBSの見方や調べ方について
JSRとJEPとJBSの見方や調べ方について
Aya Ebata
「Microbit」で簡単プログラミング体験
「Microbit」で簡単プログラミング体験
はなずきん Hana
どう見る?Class Reference
どう見る?Class Reference
Tadahisa Motooka
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
Juri Minamiyama
コンポーネント設計について
コンポーネント設計について
ufo_ocha
ぼくのビルドはにゃあとなく
ぼくのビルドはにゃあとなく
Tomoki YAMASHITA
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
Syun Fuji
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
Takemori Masaki
Javaから見たRubyの世界
Javaから見たRubyの世界
Takafumi Yoshida
Django と Wagtail で作る Headless CMS
Django と Wagtail で作る Headless CMS
Iosif Takakura
20120830 DBリファクタリング読書会第三回
20120830 DBリファクタリング読書会第三回
都元ダイスケ Miyamoto
120225 bootstrap
120225 bootstrap
TechGardenSchool
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
Logística
Logística
PROFIGESTÃO - Profissionais em Gestão de Empresas e Pessoas
More Related Content
What's hot
Electronからはじめるnodejs
Electronからはじめるnodejs
Hirata Tomoko
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
20160219 Developers Summit 2016 gusukuハンズオン
20160219 Developers Summit 2016 gusukuハンズオン
Midori Ikegami
Electron を知る
Electron を知る
Tomoya Shibata
20160220 座駆動LT大会 合同勉強会in大都会岡山
20160220 座駆動LT大会 合同勉強会in大都会岡山
Midori Ikegami
Node.js 奮闘日記
Node.js 奮闘日記
sasaron 397
20170722_Dragonboardで買い物メモ
20170722_Dragonboardで買い物メモ
Kenzo Nagahisa
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
Midori Ikegami
JSRとJEPとJBSの見方や調べ方について
JSRとJEPとJBSの見方や調べ方について
Aya Ebata
「Microbit」で簡単プログラミング体験
「Microbit」で簡単プログラミング体験
はなずきん Hana
どう見る?Class Reference
どう見る?Class Reference
Tadahisa Motooka
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
Juri Minamiyama
コンポーネント設計について
コンポーネント設計について
ufo_ocha
ぼくのビルドはにゃあとなく
ぼくのビルドはにゃあとなく
Tomoki YAMASHITA
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
Syun Fuji
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
Takemori Masaki
Javaから見たRubyの世界
Javaから見たRubyの世界
Takafumi Yoshida
Django と Wagtail で作る Headless CMS
Django と Wagtail で作る Headless CMS
Iosif Takakura
20120830 DBリファクタリング読書会第三回
20120830 DBリファクタリング読書会第三回
都元ダイスケ Miyamoto
120225 bootstrap
120225 bootstrap
TechGardenSchool
What's hot
(20)
Electronからはじめるnodejs
Electronからはじめるnodejs
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
20160219 Developers Summit 2016 gusukuハンズオン
20160219 Developers Summit 2016 gusukuハンズオン
Electron を知る
Electron を知る
20160220 座駆動LT大会 合同勉強会in大都会岡山
20160220 座駆動LT大会 合同勉強会in大都会岡山
Node.js 奮闘日記
Node.js 奮闘日記
20170722_Dragonboardで買い物メモ
20170722_Dragonboardで買い物メモ
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
JSRとJEPとJBSの見方や調べ方について
JSRとJEPとJBSの見方や調べ方について
「Microbit」で簡単プログラミング体験
「Microbit」で簡単プログラミング体験
どう見る?Class Reference
どう見る?Class Reference
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
コンポーネント設計について
コンポーネント設計について
ぼくのビルドはにゃあとなく
ぼくのビルドはにゃあとなく
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
Javaから見たRubyの世界
Javaから見たRubyの世界
Django と Wagtail で作る Headless CMS
Django と Wagtail で作る Headless CMS
20120830 DBリファクタリング読書会第三回
20120830 DBリファクタリング読書会第三回
120225 bootstrap
120225 bootstrap
Viewers also liked
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
Logística
Logística
PROFIGESTÃO - Profissionais em Gestão de Empresas e Pessoas
Etica y profesion en educación
Etica y profesion en educación
Andrea Choccata Cruz
はじめての vSRX on AWS
はじめての vSRX on AWS
Juniper Networks (日本)
Gestalt Principles of Design
Gestalt Principles of Design
Gayle Christopher
Injecting Security into vulnerable web apps at Runtime
Injecting Security into vulnerable web apps at Runtime
Ajin Abraham
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
Want More Rockstars? Cultivate These 4 Traits
Want More Rockstars? Cultivate These 4 Traits
Christine Comaford
C# でブロックチェーン実装
C# でブロックチェーン実装
Yuto Takei
10 Ways to Make Your Lead Generation Website Convert On the First Visit
10 Ways to Make Your Lead Generation Website Convert On the First Visit
StraightNorthIM
Advanced Induction Heat Treatment Technologies and Design Methods
Advanced Induction Heat Treatment Technologies and Design Methods
Fluxtrol Inc.
LUẬT SƯ OLIVER MASSMANN PHÁT BIỂU TRƯỚC CÁC ĐẠI BIỂU QUỐC HỘI VIỆT NAM VỀ HIỆ...
LUẬT SƯ OLIVER MASSMANN PHÁT BIỂU TRƯỚC CÁC ĐẠI BIỂU QUỐC HỘI VIỆT NAM VỀ HIỆ...
Dr. Oliver Massmann
Collagen and collagen disorders
Collagen and collagen disorders
Achi Joshi
Advanced search and Top-k queries in Cassandra - Cassandra Summit Europe 2014
Advanced search and Top-k queries in Cassandra - Cassandra Summit Europe 2014
Andrés de la Peña
mizuderuからnekoderuへ
mizuderuからnekoderuへ
Yoshinori Yamanouchi
Sage Gold Inc. Corporate Presentation
Sage Gold Inc. Corporate Presentation
MomentumPR
Phnom Penh Housing Market and Outlook Report 2016 - English
Phnom Penh Housing Market and Outlook Report 2016 - English
Hoem Seiha
uroboroSQLの紹介 (OSC2017 Tokyo/Spring)
uroboroSQLの紹介 (OSC2017 Tokyo/Spring)
Kenichi Hoshi
How to Do Personal Branding
How to Do Personal Branding
Amancio Bouza
Společenská odpovědnost SW firem
Společenská odpovědnost SW firem
Jiří Napravnik
Viewers also liked
(20)
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Logística
Logística
Etica y profesion en educación
Etica y profesion en educación
はじめての vSRX on AWS
はじめての vSRX on AWS
Gestalt Principles of Design
Gestalt Principles of Design
Injecting Security into vulnerable web apps at Runtime
Injecting Security into vulnerable web apps at Runtime
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Want More Rockstars? Cultivate These 4 Traits
Want More Rockstars? Cultivate These 4 Traits
C# でブロックチェーン実装
C# でブロックチェーン実装
10 Ways to Make Your Lead Generation Website Convert On the First Visit
10 Ways to Make Your Lead Generation Website Convert On the First Visit
Advanced Induction Heat Treatment Technologies and Design Methods
Advanced Induction Heat Treatment Technologies and Design Methods
LUẬT SƯ OLIVER MASSMANN PHÁT BIỂU TRƯỚC CÁC ĐẠI BIỂU QUỐC HỘI VIỆT NAM VỀ HIỆ...
LUẬT SƯ OLIVER MASSMANN PHÁT BIỂU TRƯỚC CÁC ĐẠI BIỂU QUỐC HỘI VIỆT NAM VỀ HIỆ...
Collagen and collagen disorders
Collagen and collagen disorders
Advanced search and Top-k queries in Cassandra - Cassandra Summit Europe 2014
Advanced search and Top-k queries in Cassandra - Cassandra Summit Europe 2014
mizuderuからnekoderuへ
mizuderuからnekoderuへ
Sage Gold Inc. Corporate Presentation
Sage Gold Inc. Corporate Presentation
Phnom Penh Housing Market and Outlook Report 2016 - English
Phnom Penh Housing Market and Outlook Report 2016 - English
uroboroSQLの紹介 (OSC2017 Tokyo/Spring)
uroboroSQLの紹介 (OSC2017 Tokyo/Spring)
How to Do Personal Branding
How to Do Personal Branding
Společenská odpovědnost SW firem
Společenská odpovědnost SW firem
Similar to エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
three.jsで作る3Dの世界
three.jsで作る3Dの世界
AdvancedTechNight
Wcan 2013 autumn_trident_mizuno
Wcan 2013 autumn_trident_mizuno
TRIDENT
jTthree V3 technical preview
jTthree V3 technical preview
Masaki Yamamoto
WebGL入門ハンズオン資料
WebGL入門ハンズオン資料
Kazuya Hiruma
my-spirit-of-tdd
my-spirit-of-tdd
Yu Asano
OSC2013 HIROSHIMA ライトニングトーク すごい広島
OSC2013 HIROSHIMA ライトニングトーク すごい広島
Tomohiko Himura
3D勉強会 第1回 3Dプログラミングのススメ
3D勉強会 第1回 3Dプログラミングのススメ
infinite_loop
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
モバイルオンラインゲームについて
モバイルオンラインゲームについて
KLab Inc. / Tech
ドワンゴの新卒エンジニアが新規サービスを立ち上げるまで
ドワンゴの新卒エンジニアが新規サービスを立ち上げるまで
Kazunari Kida
CoderDojo ひばりヶ丘の取り組み
CoderDojo ひばりヶ丘の取り組み
Masao Niizuma
ワンダフルライフ with SolidWorks
ワンダフルライフ with SolidWorks
Yuya Tsuneoka
みくみくまうすについて&Unity で使えるコーディングノウハウ
みくみくまうすについて&Unity で使えるコーディングノウハウ
torisoup
アセット作成のワークフロー
アセット作成のワークフロー
takeshi uesugi
デザインはおまかせで、丸投げされた時どうする?
デザインはおまかせで、丸投げされた時どうする?
rie05
CoderDojo Tokyo のなりたち
CoderDojo Tokyo のなりたち
Junya Ishihara
新人がTDDを学ぶ方法
新人がTDDを学ぶ方法
Ito Kunihiko
Scratchと子供達の5年間
Scratchと子供達の5年間
Masao Niizuma
DDDハンズオン
DDDハンズオン
Soudai Sone
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
Takuya Kawabe
Similar to エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
(20)
three.jsで作る3Dの世界
three.jsで作る3Dの世界
Wcan 2013 autumn_trident_mizuno
Wcan 2013 autumn_trident_mizuno
jTthree V3 technical preview
jTthree V3 technical preview
WebGL入門ハンズオン資料
WebGL入門ハンズオン資料
my-spirit-of-tdd
my-spirit-of-tdd
OSC2013 HIROSHIMA ライトニングトーク すごい広島
OSC2013 HIROSHIMA ライトニングトーク すごい広島
3D勉強会 第1回 3Dプログラミングのススメ
3D勉強会 第1回 3Dプログラミングのススメ
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
モバイルオンラインゲームについて
モバイルオンラインゲームについて
ドワンゴの新卒エンジニアが新規サービスを立ち上げるまで
ドワンゴの新卒エンジニアが新規サービスを立ち上げるまで
CoderDojo ひばりヶ丘の取り組み
CoderDojo ひばりヶ丘の取り組み
ワンダフルライフ with SolidWorks
ワンダフルライフ with SolidWorks
みくみくまうすについて&Unity で使えるコーディングノウハウ
みくみくまうすについて&Unity で使えるコーディングノウハウ
アセット作成のワークフロー
アセット作成のワークフロー
デザインはおまかせで、丸投げされた時どうする?
デザインはおまかせで、丸投げされた時どうする?
CoderDojo Tokyo のなりたち
CoderDojo Tokyo のなりたち
新人がTDDを学ぶ方法
新人がTDDを学ぶ方法
Scratchと子供達の5年間
Scratchと子供達の5年間
DDDハンズオン
DDDハンズオン
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
More from Yusaku Kinoshita
集まっTail(集まっている)#8
集まっTail(集まっている)#8
Yusaku Kinoshita
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
Yusaku Kinoshita
集まっtail#7「teratailより」
集まっtail#7「teratailより」
Yusaku Kinoshita
Motohashi.#3
Motohashi.#3
Yusaku Kinoshita
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
Yusaku Kinoshita
G'sアカデミー2期入学式資料(投影資料版)
G'sアカデミー2期入学式資料(投影資料版)
Yusaku Kinoshita
5分でわかるphalcon php
5分でわかるphalcon php
Yusaku Kinoshita
効率的かつユニークな学習法
効率的かつユニークな学習法
Yusaku Kinoshita
150612 middleman(ikuwow)
150612 middleman(ikuwow)
Yusaku Kinoshita
Google先生との付き合い方(lightwill氏)
Google先生との付き合い方(lightwill氏)
Yusaku Kinoshita
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
Yusaku Kinoshita
More from Yusaku Kinoshita
(11)
集まっTail(集まっている)#8
集まっTail(集まっている)#8
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
集まっtail#7「teratailより」
集まっtail#7「teratailより」
Motohashi.#3
Motohashi.#3
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
G'sアカデミー2期入学式資料(投影資料版)
G'sアカデミー2期入学式資料(投影資料版)
5分でわかるphalcon php
5分でわかるphalcon php
効率的かつユニークな学習法
効率的かつユニークな学習法
150612 middleman(ikuwow)
150612 middleman(ikuwow)
Google先生との付き合い方(lightwill氏)
Google先生との付き合い方(lightwill氏)
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
1.
エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
2.
まずは、
3.
自己紹介 ■名前: 木下 雄策(27歳・福岡出身) @afroscript10 ■略歴: 九州大学大学院で宇宙の研究 2013年 レバレジーズ入社 ■今のお仕事: 日本のエンジニア業界を最強にすること!! →エンジニア特化型Q&Aサイト【teratail】のDevRel担当 →ITの勉強会【ヒカ☆ラボ】 ■その他 →Gs'ACADEMY2期生の趣味エンジニア →LIGブログ「0エンジニアから0.5エンジニアへ」連載中
4.
伝えたいこと
5.
three.js使えば めっちゃ簡単に3D入門できる!!!
6.
目次
7.
目次 ■非エンジニア的に3Dの基礎をフワっとまとめてみる ・3Dって実はたった4つのことをやるだけでいい ■3D糸通しつくってみた ・Demo ・作り方を一部紹介 ・壁をいっぱいつくる ・当たり判定もどき ・悩んでるとこ
8.
【非エンジニア的に 3Dの基礎をふわふわとまとめてみる】
9.
3Dって実は たった4つのことをやるだけでいい 3Dは、
10.
3Dって実は たった4つのことをやるだけでいい 3Dは、 ・カメラ(視点)用意する
11.
3Dって実は たった4つのことをやるだけでいい 3Dは、 ・カメラ(視点)用意する
12.
3Dって実は たった4つのことをやるだけでいい 3Dは、 ・カメラ(視点)用意する ・シーンを用意する
13.
3Dって実は たった4つのことをやるだけでいい 3Dは、 ・カメラ(視点)用意する ・シーンを用意する ・ライト(光源)つくる
14.
3Dって実は たった4つのことをやるだけでいい 3Dは、 ・カメラ(視点)用意する ・シーンを用意する ・ライト(光源)つくる→シーンに追加
15.
3Dって実は たった4つのことをやるだけでいい 3Dは、 ・カメラ(視点)用意する ・シーンを用意する ・ライト(光源)つくる→シーンに追加 ・物体(Mesh)つくる
16.
3Dって実は たった4つのことをやるだけでいい 3Dは、 ・カメラ(視点)用意する ・シーンを用意する ・ライト(光源)つくる→シーンに追加 ・物体(Mesh)つくる→シーンに追加
17.
3Dって実は たった4つのことをやるだけでいい 3Dは、 ・カメラ(視点)用意する ・シーンを用意する ・ライト(光源)つくる→シーンに追加 ・物体(Mesh)つくる→シーンに追加 あとは一定時間毎にレンダリングするだけ!!
18.
基本はこれだけ!! ※そしてレンダリング毎に、 カメラ/ライト/物体の位置をずらすとアニメーションになる!
19.
詳しくはこちらの記事で。:) https://html5experts.jp/yomotsu/5225/
20.
【3D糸通しを作ってみた】
21.
Demo
22.
作り方を一部紹介
23.
作り方を一部紹介 今回は2点に絞って。 ・物体をランダムで位置変えていっぱいつくる ・当たり判定?
24.
・物体をランダムで位置変えていっぱいつくる
25.
物体をランダムで位置変えていっぱいつくる 当然ですが、 「物体をつくる」を for文で繰り返すだけ
26.
物体をランダムで位置変えていっぱいつくる 物体(壁)の 大きさを決める ※単位は[m] 壁 2[m] 2[m] 20[m]
27.
物体をランダムで位置変えていっぱいつくる 物体(壁)の色を ランダムで決める
28.
物体をランダムで位置変えていっぱいつくる 物体(壁)を生成! (上下2個一気に作ってます)
29.
物体をランダムで位置変えていっぱいつくる 8m間隔で壁が現れるようにz 座標を設定 ※z軸は奥行き ※座標は物体の中心を表す
30.
物体をランダムで位置変えていっぱいつくる 8m間隔で壁が現れるようにz 座標を設定 ※z軸は奥行き ※座標は物体の中心を表す 重要っ!!
31.
物体をランダムで位置変えていっぱいつくる 壁のy座標を ランダムで設定 ※y軸は上下 ※座標は物体の中心を表す
32.
・当たり判定
33.
当たり判定 今回は、レンダリングするごとにカメラの位置を z軸方向に-0.05[m]ずつ動かしている(前に0.05[m]ずつ進む)
34.
当たり判定 今回は、レンダリングするごとにカメラの位置を z軸方向に-0.05[m]ずつ動かしている(前に0.05[m]ずつ進む) ↓ zで条件分岐させて、壁が存在するzの範囲(8〜10とか)で、 カメラのy座標と、それぞれ通過する壁のy座標を比較する
35.
当たり判定 こんな感じ
36.
当たり判定 カメラの奥行き(z座標)が 8〜10[m]のとき、 0 8 10 壁1(下) 壁1(上)
37.
当たり判定 カメラの高さの位置(y座標)が 1番目の壁(上)の下面のy座標、 より大きければ、 GAMEOVER!! 0 8 10 壁1(下) 壁1(上)
38.
当たり判定 カメラの高さの位置(y座標)が 1番目の壁(下)の上面のy座標、 より低ければ、 GAMEOVER!! 0 8 10 壁1(下) 壁1(上)
39.
当たり判定 問題なければ通常通り レンダリング! 0 8 10 壁1(下) 壁1(上)
40.
当たり判定 【2番目の壁とのあたり判定】 カメラの奥行き(z座標)が 18〜20[m]のとき… 18 20 壁2(下) 壁2(上)
41.
当たり判定 以下同文!:) 18 20 壁2(下) 壁2(上)
42.
当たり判定 壁を5個すり抜けると clear!! 58 60 壁5(下) 壁5(上)
43.
当たり判定 z座標が壁の間を 通過してないときは、 ただレンダリングをして 0.05[m]ずつ進んでいく 壁 (下) 壁 (上) 壁 (下) 壁 (上)
44.
簡単でしょ??:)
45.
【まとめ】
46.
まとめ ・現実世界を再認識できておもしろい (「確かに現実世界も、シーン/カメラ(視点)/物体/光源で 成り立ってるな〜。」って思ったり) ・数学/物理を多様する気配がプンプンするので、 理系男子的には萌える ・three.jsを使うと超簡単に3D作成を体験できる!
47.
みなさんも今すぐ3Dやりましょう!!
48.
ご清聴ありがとうございました。
Download now