Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
Three.js

【Three.js】3次元空間に画像を配置し、スライドショーを作成する

どうも、とがみんです。

この記事では、Three.jsを使用して、3D次元に画像を表示して、ただただ観察するスライドショー的なものを作って行きたいと思います。

実装するもの

今回実装するものは、以下のようなスライドショーです。

実装方法

実装方法についてです。プログラム全体のコードはGitHubにあげてます。

その中で、この記事では以下の内容について紹介していきます。

  • 画像の用意
  • 画像の配置。スプライトとは。
  • カメラの動作

画像の用意

まず、表示する画像のパスのリストを作って起きます。

画像の配置、スプライトとは

適当に画像をスクリーン上に配置します。

カメラで視点を変えたときに、通常3Dオブジェクトは、角度の変化をつけることで、様々な向きが表現されていましたが、

ここで紹介するものは、常にオブジェクトが正面を向くように配置します。

このような、常に正面を向く3Dのオブジェクトのことをスプライト(sprite)と言います。

どの視点から見ても常にオブジェクトが正面を向くようにします。

Math.randomは、0〜1のランダムな数字で、その値から0.5引くことにより、中心を0に持ってきています。

カメラの動作

カメラは、中心方向を向きながら、斜めに円を描きながら回っているようにしています。

スライドショーのデモ

以下のボタンを押すと、スライドショーのでもが表示されます。


まとめ

3D空間に画像を配置し、スライドショーを作成しました。画像を配置する位置や、カメラの動かし方を工夫することによって、あらゆるスライドショーを作ることができそうですね!

サンプルコードはGithubにあげているので参考にしてください。

https://github.com/togamin/Photos.git

参考文献

>Three.jsのスプライト