【360度動画】Vue3でthree.jsを使ってみた【ソースコードあり】

2023.07/03

こんにちは、エンジニアのSです！

 

早速ですが今回は、Vue3でThree.jsを用い360度動画を再生させてみました！

“VueでThree.jsを使う”という記事がなかなか見つからなかったのですが、Vueだってjavascriptで書かれています。
ならば「Three.jsも使えるだろう！」というもので使ってみました。
コンポーネント化できたのがかなり便利で、面倒な処理などを省くことができたのが良かったなぁと…！

 

 

■Three.jsとは？
WebGLで3Dコンテンツを手軽に制作できるライブラリです。
3Dのモデルを表示して回転させたり、オブジェクトを操作することなど幅広い利用法があります。
公式の方で豊富なサンプルが紹介されていますので覗いてみることをオススメします！

 

■環境
・Vue …… 3.2.31
・three.js …… 0.152.2

 

 

 

Step1.読み込み準備

 

npmを使ってThree.jsをインストールしたので、importで読み込みを行います。
OrbitControlsはカメラを操作するのに使用します。
後はrefやonMountedなど適宜必要なものをimport、ついでにHTMLで動画を再生させる場所を用意します。

  1. <script setup>
  2. import * as THREE from "three";
  3. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  4. import { ref, onMounted } from "vue";
  6. const videoPlayer = ref(null);
  8. </script>
  10. <template>
  11.     <div id="videoSphere" ref="videoPlayer"></div>
  12. </template>

 

 

 

Step2.コンポーネントのpropsを設定

 

目指すのはコンポーネントとして使いまわす、なので親から渡されるデータを考えます。
とりあえず適当に「ファイルパス」、「横・縦の長さ」でいいでしょう。

  1. const props = defineProps({
  2.     path: String,
  3.     width: Number,
  4.     height: Number,
  5. });

 

 

 

Step3.変数の用意

 

Three.jsの動画再生に当たって、必要な変数を用意します。

  1. let video; // video要素
  2. let texture; // video要素から生成したテクスチャ
  3. let camera; // カメラ
  4. let controls; // カメラコントローラー
  5. let renderer; // レンダラー
  6. let scene; // シーン

 

 

 

Step4.javascriptでvideo要素を生成

 

以降の処理はonMounted内で行います。
video要素を生成し、ここに動画のパスを指定します。
このvideo要素と連動して、Canvasに描画していくことになります。
ビデオ要素のイベント(例：エラー発生時)などはここでまとめて記述できます。（onMounted内ならいつでもできます）

  1. // video要素の生成
  2. video = document.createElement("video");
  3. // video要素の属性付与
  4. video.crossOrigin = "anonymous";
  5. video.playsInline = true;
  6. video.loop = true;
  7. video.muted = true;
  8. video.src = props.path;

 

 

 

Step5.video要素からテクスチャを生成し、カメラ、シーン、レンダラーを生成

 

  1. // video要素からテクスチャを生成
  2. texture = new THREE.VideoTexture(video);
  3. texture.minFilter = THREE.LinearFilter;
  5. // カメラを生成
  6. camera = new THREE.PerspectiveCamera(
  7.     90,
  8.     props.width / props.height,
  9.     1,
  10.     2000
  11. );
  12. camera.position.set(0, 0, 1);
  14. // シーンを生成
  15. scene = new THREE.Scene();

 

 

 

Step6.球体を生成し、video要素から生成したテクスチャを貼り付ける

 

360度動画を再生するので、平面のままでは歪んだ状態で再生されます。
なので球体を生成し、その内側にテクスチャを貼り付けます。
『球体の中にカメラを配置すると、プラネタリウムのように動画が見える』というイメージです。

  1. // 球体の生成
  2. let geometry = new THREE.SphereGeometry(500, 60, 40);
  3. geometry.scale(-1, 1, 1);
  5. // 球体にvideo要素から生成したテクスチャを貼り付け
  6. let mesh = new THREE.Mesh(
  7.     geometry,
  8.     new THREE.MeshBasicMaterial({ map: texture })
  9. );
  11. // シーンに追加
  12. scene.add(mesh);

 

 

 

Step7.レンダラーの生成

 

動画を描画するレンダラーを生成します。

  1. // レンダラーの生成
  2. renderer = new THREE.WebGLRenderer();
  3. renderer.setPixelRatio(window.devicePixelRatio);
  4. renderer.setClearColor(0x000000);
  5. renderer.setSize(props.width, props.height, true);
  7. // カメラコントローラーを生成
  8. controls = new OrbitControls(camera, renderer.domElement);
  9. controls.enableDamping = true;
  10. controls.dampingFactor = 0.2;
  12. // 動画を再生させる場所にレンダラーを配置する
  13. videoPlayer.value.appendChild(renderer.domElement);
  15. // 描画開始
  16. video.play();
  17. animate();

 

 

 

上記で設定完了です！
全文を一度表示します。

 

  1. <script setup>
  2. import * as THREE from "three";
  3. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  4. import { ref, onMounted } from "vue";
  6. const videoPlayer = ref(null);
  8. const props = defineProps({
  9.     path: String,
  10.     width: Number,
  11.     height: Number,
  12. });
  14. let video; // video要素
  15. let texture; // video要素から生成したテクスチャ
  16. let camera; // カメラ
  17. let controls; // カメラコントローラー
  18. let renderer; // レンダラー
  19. let scene; // シーン
  21. onMounted(() => {
  22.     // video要素の生成
  23.     video = document.createElement("video");
  24.     // video要素の属性付与
  25.     video.crossOrigin = "anonymous";
  26.     video.playsInline = true;
  27.     video.loop = true;
  28.     video.muted = true;
  29.     video.src = props.path;
  31.     // video要素からテクスチャを生成
  32.     texture = new THREE.VideoTexture(video);
  33.     texture.minFilter = THREE.LinearFilter;
  35.     // カメラを生成
  36.     camera = new THREE.PerspectiveCamera(
  37.         90,
  38.         props.width / props.height,
  39.         1,
  40.         2000
  41.     );
  42.     camera.position.set(0, 0, 1);
  44.     // シーンを生成
  45.     scene = new THREE.Scene();
  47.     // 球体の生成
  48.     let geometry = new THREE.SphereGeometry(500, 60, 40);
  49.     geometry.scale(-1, 1, 1);
  51.     // 球体にvideo要素から生成したテクスチャを貼り付け
  52.     let mesh = new THREE.Mesh(
  53.         geometry,
  54.         new THREE.MeshBasicMaterial({ map: texture })
  55.     );
  57.     // シーンに追加
  58.     scene.add(mesh);
  60.     // レンダラーの生成
  61.     renderer = new THREE.WebGLRenderer();
  62.     renderer.setPixelRatio(window.devicePixelRatio);
  63.     renderer.setClearColor(0x000000);
  64.     renderer.setSize(props.width, props.height, true);
  66.     // カメラコントローラーを生成
  67.     controls = new OrbitControls(camera, renderer.domElement);
  68.     controls.enableDamping = true;
  69.     controls.dampingFactor = 0.2;
  71.     // 動画を再生させる場所にレンダラーを配置する
  72.     videoPlayer.value.appendChild(renderer.domElement);
  74.     // 描画開始
  75.     video.play();
  76.     animate();
  77. });
  79. const animate = () => {
  80.     // カメラコントローラーを更新
  81.     controls.update();
  83.     // レンダリング
  84.     renderer.render(scene, camera);
  85.     requestAnimationFrame(animate);
  86. };
  87. </script>
  89. <template>
  90.     <div id="videoSphere" ref="videoPlayer"></div>
  91. </template>

 

 

このコンポーネントを表示したいページで呼ぶと、360度動画が再生されます。
動画の再生・停止などのコントローラーがありませんので、こちらは適宜実装していかなければなりません。

 

 

 

MDNにてコントローラの作成についての記事がありますので、参考になると思います！
Creating a cross-browser video player

 

 

以上、Vue3で360度動画を再生させる方法でした。
技術的にはまだ拙い部分もありますが、何かの参考になれば幸いです！！

 

表示動画：http://xn--hhro09bn9j8uh.com/movie113vr3.html

一覧に戻る

CONTACT

お電話でのお問い合わせ

050-3515-9870

お問い合わせフォーム