背景色を削除するマテリアルを使うことで、背景が透明の動画を表示することができる。
↓ githubページ
aframe-chromakey-material
手順
index.htmlに動画を透過するマテリアルのライブラリをインポートする。
<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>
オブジェクトに透過マテリアルを設定して動画を再生するコンポーネントを作成する。
<script>
AFRAME.registerComponent("play-video", {
schema: {
video: { type: "string" },
canstop: { type: "bool" },
},
init: function () {
this.v = document.querySelector(this.data.video);
this.el.setAttribute("class", "cantap");
this.el.setAttribute("material", {
src: this.v,
shader: "chromakey",
// colorにはクロマキーの色を指定
color: "0.02 0.08 0.99",
side: "double",
});
this.playing = false;
this.playstart = this.playstart.bind(this);
// ビデオを再生するイベントを設定
// 以下はAR.jsでマーカーが読み込まれた時(markerFound)と
// 動画オブジェクトがクリックされた時に再生するように設定している
window.addEventListener("markerFound", (event) => {
this.playstart();
});
this.el.addEventListener("click", this.playstart);
},
playstart: function () {
if (!this.playing) {
this.v.play();
this.playing = true;
} else if (this.data.canstop) {
this.v.pause();
this.playing = false;
}
},
});
</script>
<a-assets>内に再生したいビデオを配置。
<a-assets>
<video
id="myvideo"
loop
autoplay
muted
crossorigin="anonymous"
src="< 動画のパス >"
></video>
</a-assets>
シーン上に動画オブジェクトを配置。
play-videoコンポーネントを追加して、動画のidを設定する。
<a-entity
play-video="video: #myvideo; canstop: false;"
geometry="primitive: plane;"
scale="1 1 1"
position="0 -0.5 1"
></a-entity>
コード全体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Chromakey video</title>
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>
<script>
AFRAME.registerComponent("play-video", {
schema: {
video: { type: "string" },
canstop: { type: "bool" },
},
init: function () {
this.v = document.querySelector(this.data.video);
this.el.setAttribute("class", "cantap");
this.el.setAttribute("material", {
src: this.v,
shader: "chromakey",
// colorにはクロマキーの色を指定
color: "0.02 0.08 0.99",
side: "double",
});
this.playing = false;
this.playstart = this.playstart.bind(this);
// ビデオを再生するイベントを設定
// 以下はAR.jsでマーカーが読み込まれた時(markerFound)と
// 動画オブジェクトがクリックされた時に再生するように設定している
window.addEventListener("markerFound", (event) => {
this.playstart();
});
this.el.addEventListener("click", this.playstart);
},
playstart: function () {
if (!this.playing) {
this.v.play();
this.playing = true;
} else if (this.data.canstop) {
this.v.pause();
this.playing = false;
}
},
});
</script>
</head>
<body>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; gammaOutput: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: true;"
>
<a-assets>
<video
id="myvideo"
muted
playsinline
crossorigin="anonymous"
loop="true"
src="< 動画のパス >"
></video>
</a-assets>
<a-marker preset="hiro">
<a-entity
play-video="video: #myvideo; canstop: false;"
geometry="primitive: plane;"
scale="1 1 1"
position="0 0 0"
></a-entity>
</a-marker>
<a-light type="ambient" color="#ffffff"></a-light>
<a-entity
camera=""
position=""
rotation=""
scale=""
visible=""
></a-entity>
</a-scene>
</body>
</html>
参考記事