【Three.js】360°パノラマ 動画プレイヤーの作り方（PCブラウザのみ）

#<i class="fa fa-camera" style="font-size:1em;"></i> 概要
昨今、VRブームに押されてFacebookやYouTubeで360°パノラマ動画の投稿が可能になったり、THETA Sやその他、360°撮影可能な新しいカメラが続々出るなど、360°パノラマ動画を取り巻く環境が大きく変わってきています。
そういった状況の中で、今回はThree.jsで360°の動画プレイヤーを作ったので、そのつくり方をご紹介します。

とは言っても、難しい話ではなく、以下の記事にあるコードのテクスチャの静止画の部分を動画に変えただけであります。
なので、下記の記事のコードの一部を修正します。


>- [【Three.js】360°パノラマビューワーを作ってグリグリ操作出来るようにした（スマホ対応）](http://qiita.com/kingpanda/items/1c3a47765b40d6d62f46)

ただ、注意事項として動画テクスチャを使う場合、HTML5のvideoタグを利用しているのでスマホで開いても、動画は再生されません。(ここはいづれ何とかする)

今回の修正で対応した項目は以下のとおりです。

> 	- 動画プレイヤー(ChromeとFirefox)

コードは全て公開しますが、Three.jsの細かい部分の説明はしません。
最後にデモとGithubのリンクを用意してますので、そちらを参考にしてください。


#<i class="fa fa-camera" style="font-size:1em;"></i> Three.jsと必要なライブラリを読み込む

[Three.jsの公式サイト](http://threejs.org/)からファイル一式をダウンロードしてきて、その中から以下の2つのファイルを使います。

> 	- Three.min.js
> 	- OrbitControls.js

PCのマウスぐりぐり操作用に「OrbitControls.js」を使います。
テクスチャを変えるだけなので、動画を再生するためのライブラリは特に必要ありません。

「OrbitControls.js」は「/examples/js/controls」にあります。


これらと一緒に、メインのプログラムを書く「main.js」を作って、「index.html」で以下のように読み込みます。

```html:index.html
<div id="stage"></div>

<script src="three.min.js"></script>
//PC操作用
<script src="OrbitControls.js"></script>
//メイン
<script src="main.js"></script>
```

#<i class="fa fa-camera" style="font-size:1em;"></i> メインのプログラム

「main.js」に以下のコードを書きました。

**geometry**の球体はそのままで、**mesh**の部分で球体に貼付けるマテリアルのテクスチャを変えています。**videoタグ**を生成して、動画を読み込み、テクスチャとしています。

最後の方にvidplay()という関数があります。下記のリンクからデモを観ていただければわかるのですが、ただ動画だけ再生されて、停止ボタンも何も無かったら味気なかったので、動画のカスタムボタンを設置して、JSで再生・停止を制御できるようにしました。

それ以外は特に味付けはしていません。動画テクスチャの部分も公式にあったコードをそのまま持ってきています。


```js:main.js

(function(){

  var width = window.innerWidth,
      height = window.innerHeight;

  var button;

  //scene

  var scene = new THREE.Scene();

  //mesh

  var geometry = new THREE.SphereGeometry( 5, 60, 40 );
	geometry.scale( - 1, 1, 1 );

    //動画

  var video = document.createElement( 'video' );
  video.width = 640;
  video.height = 360;
  video.autoplay = true;
  video.loop = true;
  video.src = "test.MP4";

  var texture = new THREE.VideoTexture( video );
  texture.minFilter = THREE.LinearFilter;

  var material   = new THREE.MeshBasicMaterial( { map : texture } );

    //静止画

	/*var material = new THREE.MeshBasicMaterial( {
	   map: THREE.ImageUtils.loadTexture( 'test.jpg' )
	} );*/

	sphere = new THREE.Mesh( geometry, material );

	scene.add( sphere );

  //camera

  var camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);
  camera.position.set(0,0,0.1);
  camera.lookAt(sphere.position);

  //helper

  var axis = new THREE.AxisHelper(1000);
  axis.position.set(0,0,0);
  scene.add(axis);

  //render

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width,height);
  renderer.setClearColor({color: 0x000000});
  document.getElementById('stage').appendChild(renderer.domElement);
  renderer.render(scene,camera);

  //control

  var controls = new THREE.OrbitControls(camera, renderer.domElement);

  function render(){
    requestAnimationFrame(render);
    window.addEventListener( 'resize', onWindowResize, false );
    renderer.render(scene,camera);

    button = document.getElementById("play");
    button.addEventListener( 'click', vidplay, false );

    controls.update();
  }
  render();
  function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}

  function vidplay() {
       if (video.paused) {
          video.play();
          button.textContent = "||";
          button.style.backgroundColor = "#F26964";
       } else {
          video.pause();
          button.textContent = ">";
          button.style.backgroundColor = "#1253A4";
       }
    }

  })();


```

#<i class="fa fa-camera" style="font-size:1em;"></i> デモ

[DEMO](http://king-panda.github.io/movie_panorama/)

[![Movie_Panorama_Example.png](https://qiita-image-store.s3.amazonaws.com/0/67591/59ee4cf1-777c-38a2-33a9-fe6451180740.png)](http://king-panda.github.io/movie_panorama/)

※ ChromeもしくはFirefoxでご覧ください
※ 環境によっては動画の再生が止まったり、重く感じることがあるかもしれませんが、予めご了承を
※ 動画素材はTHETA Sで撮影しました


サンプルの置き場はこちらです。
https://github.com/king-panda/movie_panorama

#<i class="fa fa-camera" style="font-size:1em;"></i> 最後に

スマホでも再生できるようにしたいところです。動画をパラパラ漫画に変換して何とか。
個人的な感想ですが、今後もっと360°パノラマ動画の市場が拡大していけばいいなと思います。