Three.js ViewSource

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>vrmvViewer</title>

<!-- css -->
<style>

/***************************
 * body
 ***************************/

body {
	margin:0px;
	padding:0px;
}


/***************************
 * canvas
 ***************************/

.canvas_wrap {
	position:relative;
	width:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
	background-color:#000;
}

.canvas_box {
	position:fixed;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	top:0;
	left:0;
	overflow:hidden;
	background-color:#000;
}

#canvas_main {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}


/***************************
 * canvas_start
 ***************************/

.canvas_start {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	background-color:#0066cc;
	opacity:0.5;
	display:none;
}

.canvas_start .inner {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	display:table;
	width:100%;
	height:100vh;
}

.canvas_start .inner p {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	color:#ffffff;
}


/***************************
 * canvas_loader
 ***************************/

.canvas_loader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	background-color:#00cc66;
	display:none;
}

.canvas_loader .inner {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	display:table;
	width:100%;
	height:100vh;
}

.canvas_loader .inner p {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	color:#ffffff;
}


/***************************
 * canvas_ctrl
 ***************************/

.canvas_ctrl {
	position:absolute;
	bottom:0;
	left:0;
	margin:auto;
	padding:15px;
	background-color: #000;
	opacity: 0.5;
}

.btn_ctrl {
	margin-left:10px;
	cursor:pointer;
}

#time_ctrl {
	color:#fff;
}

</style>

<!-- js -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/three/three.min.js"></script>
<script src="js/three/DeviceOrientationControls.js"></script>
<script src="js/three/OrbitControls.js"></script>
<script src="js/three/Detector.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<script src="js/vrmvViewer.js"></script>
<script>
jQuery(function(){
	$(window).on("load",function(){
		$("#canvas_main").vrmvViewer({
			src			: "src/mv/chimikep.m3u8",
			rotationY	: 270
		});
	});
});
</script>

</head>
<body>
<div class="canvas_wrap">
  <div class="canvas_box">
    <canvas id="canvas_main"></canvas>

    <div class="canvas_start">
      <div class="inner"><p>TOUCH START!!</p></div>
    </div>

    <div class="canvas_loader">
      <div class="inner"><p>Loading ...<br />（ちょっと時間かかるかも）</p></div>
    </div>

    <!-- 動画コントローラ -->
    <div class="canvas_ctrl">
      <span id="time_ctrl">00:00:00／00:00:00</span>
      <button class="btn_ctrl" id="btn_stop" style="display:none;">&lt;&lt;</button>
      <button class="btn_ctrl" id="btn_start" style="display:none;">PLAY</button>
    </div>
    <!-- 動画コントローラ -->

  </div>
  <div id="scroll_area" style="height:300%;"></div>
</div>
</body>
</html>