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;
}
</style>
</head>
<body>
<div id="example">
</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 r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return '';
}
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")
} 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);
}else if(permissionState === "denied"){
alert("拒绝使用陀螺仪会影响体验哦")
}else if(permissionState === "prompt"){
}
})
}
function init() {
var scene, renderer;
var container;
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.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);
}
vr.loadProgressManager.onLoad=function () {
vr.video.muted=false;
}
vr.init(function() {
});
console.log(getQueryString("url"))
vr.playPanorama(getQueryString("url"),vr.resType.video)
console.log(vr.resType.video)
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
})
}
</script>
</body>
</html>