360全景视频3D播放源码
使用mxreality.js技术
<!DOCTYPE html>
<html lang="en">
<head>
<title>津彩</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
body {
width: 100vw;
height: 100vh;
background: black;
}
html {
touch-action: none;
}
* {
margin: 0;
padding: 0;
}
#example {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/*#pop_window {*/
/* width: 100vw;*/
/* height: 100vh;*/
/* position: fixed;*/
/* display: flex;*/
/* justify-content: center;*/
/* align-items: center;*/
/* background-color: black;*/
/*}*/
/*.pop_content {*/
/* background: #FFFFFF;*/
/* width: 60%;*/
/* height: 100px;*/
/* display: none;*/
/* flex-direction: column;*/
/* border-radius: 5px;*/
/* text-align: center;*/
/* padding: 10px;*/
/*}*/
/*.title {*/
/* font-size: 18px;*/
/* padding: 0 10px;*/
/* text-align: left;*/
/*}*/
/*.text {*/
/* flex: 1;*/
/* border-bottom: 1px solid #efefef;*/
/* line-height: 30px;*/
/* padding: 10px 0;*/
/*}*/
/*.yes {*/
/* height: 40px;*/
/* line-height: 40px;*/
/* text-align: center;*/
/*}*/
</style>
</head>
<body>
<div id="example">
<!--<div class="pop_window" id="pop_window">-->
<!-- <video src="" height="" width="" preload="none" autoplay="false">-->
<!-- <div class="pop_content">-->
<!-- <p class="title">提示</p>-->
<!-- <p class="text">请在陀螺仪授权窗口中点击确定</p>-->
<!-- <p class="yes" οnclick="getDevice()">好的</p>-->
<!-- </div>-->
<!-- </video>-->
<!--</div>-->
</div>
<script src="build/three.js"></script>
<script src="build/mxreality.js"></script>
<script>
function getQueryString(name) {
console.log(name)
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
// var res = reg.split(':0');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return '';
}
// function aaa(event) {
// alert(event)
// if(event==undefined){
// alert('陀螺仪off')
// window.onLoad();
// }else{
// alert('陀螺仪on')
// }
// }
var isdevice=0;
window.onload = function() {
setTimeout(function() {
console.log('计时器结束')
if (AVR.OS.isiOS()) {
window.addEventListener("deviceorientation", aaaa, false);
function aaaa(event) {
console.log(event)
isdevice=1;
windowHide();
}
setTimeout(function(){
if(isdevice==1){
windowHide()
init();
}else{
windowShow()
}
},500)
console.log("是ios")
// ios 提示授权， 返回的是一个 promise
// getDevice()
} else {
console.log("不是ios")
init();
}
}, 500);
}
window.onload=function () {
init();
}
var win=document.getElementById('pop_window');
function windowShow(){
win.style.display='flex'
}
function windowHide(){
win.style.display='none'
}
function getDevice() {
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaa")
windowHide();
window.DeviceOrientationEvent.requestPermission()
.then(permissionState => {
console.log(permissionState )
console.log(granted)
if(permissionState === "granted"){
//允许
init();
window.addEventListener("devicemotion", function (e) {
}, false);
// alert("允许使用陀螺仪：",state)
}else if(permissionState === "denied"){
//拒绝
alert("拒绝使用陀螺仪会影响体验哦")
}else if(permissionState === "prompt"){
// alert("用户进行其他操作：",state)
}
})
}
//var vr=new VR(scene,renderer,container);
function init() {
var scene, renderer;
var container;
//renderer = new THREE.WebGLRenderer();
AVR.debug = true;
if (!AVR.Broswer.isIE() && AVR.Broswer.webglAvailable()) {
renderer = new THREE.WebGLRenderer();
} else {
renderer = new THREE.CanvasRenderer();
}
renderer.setPixelRatio(window.devicePixelRatio);
container = document.getElementById('example');
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
var vr = new VR(scene, renderer, container, {
"fov": 100
});
//vr.playText="<img src='img/play90.png' width='40' height='40'/>";
vr.vrbox.radius = 600;
if (AVR.isCrossScreen()) {
vr.effect.separation = 1.2;
}
vr.loadProgressManager.onLoad = function() {
if (AVR.OS.isiOS()) {
vr.toolBar.btn.click();
}
vr.toolBar.btn.click();
setTimeout(vr.controls.gyroUnfreeze(), 500)
console.log("不是ios")
console.log(AVR.OS.isiOS())
}
//全景资源加载中回调
vr.loadProgressManager.onProgress = function(item, loaded, total) {
console.log("全景资源加载中回调")
console.log("item=", item, "loaded", loaded, "total=", total);
}
//全景资源加载错误回调
vr.loadProgressManager.onError = function(xhr, cl) {
console.log("全景资源加载错误回调")
console.log(xhr, cl);
}
//AVR.useGyroscope=false;
// if(AVR.isCrossScreen()) {
// // 调整vr视窗偏移量
// vr.effect.separation=1.2;
// }
vr.loadProgressManager.onLoad=function () {
// 视频静音
vr.video.muted=false;
}
vr.init(function() {
});
// console.log(name)
console.log(getQueryString("url"))
vr.playPanorama(getQueryString("url"),vr.resType.video)
console.log(vr.resType.video)
// console.log(url)
vr.video.setAttribute("loop", "loop");
vr.video.crossOrigin = "*";
vr.video.autoplay = true;
// 屏幕旋转
vr.controls.autoRotate=true
vr.video.onended = function() {
}
window.addEventListener('resize', function() {
var isHuawei = navigator.userAgent.match(/;\sHUAWEI\s[a-zA-Z0-9\-]+\sBuild\//);
if (AVR.OS.isWeixin() && !AVR.OS.isiOS() && isHuawei) {
if (vr.video.getAttribute('x5-video-orientation') == "landscape") {
vr.toolBar.toolbar.style.width = document.body.clientWidth + "px";
} else {
vr.toolBar.toolbar.style.width = "100%";
}
}
}, {
passive: false
})
// function animate() {
// requestAnimationFrame(animate);
// renderer.render(scene, camera);
// }
}
</script>
</body>
</html>