自己紹介

55代ヘビです

ゲーム作りたい〜と慢性的に考えてるけど、

面白いゲームが作れなくて悩ましいお年頃。。

0

今回発表するもの

three.jsを利用した、簡単な3Dwebサイト

1

動機

一人称視点の3Dwebページを作りたい!→作りました

空間自体を楽しむ分にはこの形態は良さそう。しかし『情報取得』という観点から見ると次の要素が気になる...

2

気になる点1

・一度に見れる情報量が少ない

3

気になる点2

・移動する必要があり時間がかかる

(2Dでは単にスクロールすれば良いが...)

4

気になる点3

斜めで見辛い

(2Dでは常に正面)

5

改善しよう

もっと情報取得を楽にしたい

→夜空に画像などを浮かべる、という形はどうだろうか?

6

やってみた

夜空をイメージ

7

できること

注)古いブラウザではできないことも

8

使用ライブラリ

three.js

WebGLを利用して比較的簡単に3D表現できる

(ゲームを作る場合はunityのWebGLビルドが楽そう?)

html2canvas

htmlをcanvasに描画できる

9

WebGLとは

10

世界のイメージ

11

ざっくりな流れ

12

テクスチャとは

テクスチャとは物体表面の模様などを表すものです

イメージ

12

html2canvasの利用

テクスチャ としては、画像、動画、htmlのcanvas、等が使える。しかし、htmlのdom要素はテクスチャ として使えない


→htmlのdom要素をcanvasに描けばいいのでは?

13

html2canvasの利用

html2canvasを使ってcanvasにhtmlの内容を描画

その後、描画したcanvasを物体のテクスチャに設定した

ページ拡大すると適切に表示されない、リンクボタンが効かない、など問題はある、、

14

css3Drenderer

15

追加したかったこと

時間がなくできなかった

16

終わりに

17

説明動画