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

どうも、とがみんです。

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

Contents

実装するもの
実装方法
スライドショーのデモ
まとめ
参考文献

実装するもの

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

3D空間にただただ画像を配置してみた。 pic.twitter.com/fP9uK04Y0L
— 究極の自由を追求するブログFresopiya (@fresopiya) July 7, 2019

実装方法

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

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

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

画像の用意

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

const imageList = [
 "images/0.jpg",
 "images/1.jpg",
 "images/2.jpg",
 "images/3.jpg",
 "images/4.jpg",
 "images/5.jpg",
 "images/6.jpg",
 "images/7.jpg",
 "images/8.jpg",
 "images/9.jpg"
]

const imageList = [

"images/0.jpg",

"images/1.jpg",

"images/2.jpg",

"images/3.jpg",

"images/4.jpg",

"images/5.jpg",

"images/6.jpg",

"images/7.jpg",

"images/8.jpg",

"images/9.jpg"

]

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

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

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

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

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

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

//画像を配置
 for (let i = 0; i < 20; i++) {
 	//マテリアル作成「imageList」からランダムに画像を選択。
     const material = new THREE.SpriteMaterial({
       map: new THREE.TextureLoader().load(imageList[Math.floor(Math.random()*imageList.length)]),
     });
     const sprite = new THREE.Sprite(material);
     // ランダムな座標に配置,中心を原点に持ってくるために「-0.5」(rondomは0〜１なので)
     sprite.position.x = 500 * (Math.random() - 0.5);
     sprite.position.y = 500 * (Math.random() - 0.5);
     sprite.position.z = 500 * (Math.random() - 0.5);
     // スケールを調整
     sprite.scale.set(120, 80, 0);
 	scene.add(sprite);
 }

//画像を配置

for (let i = 0; i < 20; i++) {

//マテリアル作成「imageList」からランダムに画像を選択。

const material = new THREE.SpriteMaterial({

map: new THREE.TextureLoader().load(imageList[Math.floor(Math.random()*imageList.length)]),

});

const sprite = new THREE.Sprite(material);

// ランダムな座標に配置,中心を原点に持ってくるために「-0.5」(rondomは0〜１なので)

sprite.position.x = 500 * (Math.random() - 0.5);

sprite.position.y = 500 * (Math.random() - 0.5);

sprite.position.z = 500 * (Math.random() - 0.5);

// スケールを調整

sprite.scale.set(120, 80, 0);

scene.add(sprite);

}

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

カメラの動作

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

let rot = 0;
 tick();
 
 // 毎フレーム時に実行されるループイベントです
 function tick() {
 	rot += 0.3; // 毎フレーム角度を0.3度ずつ足していく
     const radian = (rot * Math.PI) / 180;
     // 角度に応じてカメラの位置を設定
     camera.position.x = 150 * Math.sin(radian);
     camera.position.y = 150 * Math.cos(radian);
     camera.position.z = 150 * Math.cos(radian);
     camera.lookAt(new THREE.Vector3(0, 0, 0));//原点を見つめる
     // レンダリング
     renderer.render(scene, camera);
     requestAnimationFrame(tick);
 }