THREE.js移动端全景视频
创建video
var video = document.createElement('video');
video.width = window.innerWidth;
video.height = window.innerHeight;
video.loop = true;
//预加载
video.preload = 'auto';
//静音
// video.muted = true;
video.src = 'xxx.mp4';
//非微信x5内核需要playsinline属性
video.setAttribute('webkit-playsinline', 'true');
video.setAttribute('playsinline', 'true');
//安卓需用h5播放模式--现变为h5-page同层播放
video.setAttribute('x5-video-player-type', 'h5-page');
//视频跨域问题
video.setAttribute('crossorigin', 'anonymous');
video.play();
ios更新以后浏览器运动与方向访问开关关闭，需要手动打开，判断：
ios再次更新后需要用户授权权限：
//移动端无法自动播放视频，点击事件控制开始播放，a为按键
a.onclick = function () {
if(isiPhone){
if (window.DeviceOrientationEvent && window.DeviceOrientationEvent.requestPermission) {
DeviceOrientationEvent.requestPermission().then(r => {
//在这里调用陀螺仪事件
});
}
}
a.style.display = "none";
video.play();
}
视频纹理贴图
var texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
//创建全景球
var geometry = new THREE.SphereBufferGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);
var material = new THREE.MeshBasicMaterial({ map: texture });
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y = -Math.PI / 2;
scene.add(mesh);
手指移动方法
var startX, startY, moveEndX, moveEndY, moveEndX2, X, X2, Y;
$("body").on("touchstart", function (e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function (e) {
e.preventDefault();
moveEndX2 = e.originalEvent.changedTouches[0].pageX;
if (moveEndX != null) {
X2 = moveEndX2 - moveEndX;
}
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && (X2 > 0)) {
//向右
mesh.rotation.y -= 0.03;
}
else if (Math.abs(X) > Math.abs(Y) && (X2 < 0)) {
//向左
mesh.rotation.y += 0.03;
}
else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
//向下
}
else if (Math.abs(Y) > Math.abs(X) && Y < -0) {
//向上
}
else {
//未移动
}
});
$("body").on("touchend", function (e) {
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(Y) > Math.abs(X) && Y < -0) {
}
if (Math.abs(Y) > Math.abs(X) && Y > 0) {
}
if (X > 0) {
}
if (X < 0) {
}
});
以下为官方案例修改：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - equirectangular video panorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="https://threejs.org/files/main.css">
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - video panorama
</div>
<div id="container"></div>
<video id="video" loop muted crossOrigin="anonymous" playsinline webkit-playsinline x5-video-player-type="h5-page"
style="display:none">
<source src="https://threejs.org/examples/textures/pano.mp4">
</video>
<div id="videoplay" style="position: fixed;top:50%;width:100%;text-align: center;color: #FFF;">开始播放</div>
<script type="module">
import * as THREE from 'https://threejs.org/build/three.module.js';
import { DeviceOrientationControls } from 'https://threejs.org/examples/jsm/controls/DeviceOrientationControls.js';
var camera, scene, renderer,controls;
var isiPhone=userAgent.indexOf("iPhone") > 0;
var isUserInteracting = false,
lon = 0, lat = 0,
phi = 0, theta = 0,
distance = 50,
onPointerDownPointerX = 0,
onPointerDownPointerY = 0,
onPointerDownLon = 0,
onPointerDownLat = 0;
init();
animate();
function init() {
var container, mesh;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
controls=new DeviceOrientationControls(camera);
scene = new THREE.Scene();
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );
var video = document.getElementById( 'video' );
var videoplay=document.getElementById("videoplay");
videoplay.onclick=function(){
if(isiPhone){
if (window.DeviceOrientationEvent && window.DeviceOrientationEvent.requestPermission) {
DeviceOrientationEvent.requestPermission().then(r => {
//在这里调用陀螺仪事件
});
}
}
videoplay.style.display='none'
video.play()
}
var texture = new THREE.VideoTexture( video );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var startX, startY, moveEndX, moveEndY, moveEndX2, X, X2, Y;
document.addEventListener("touchstart", function (e) {
e.preventDefault();
startX = e.changedTouches[0].pageX,
startY = e.changedTouches[0].pageY;
});
document.addEventListener("touchmove", function (e) {
e.preventDefault();
moveEndX2 = e.changedTouches[0].pageX;
if (moveEndX != null) {
X2 = moveEndX2 - moveEndX;
}
moveEndX = e.changedTouches[0].pageX,
moveEndY = e.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && (X2 > 0)) {
//向右
mesh.rotation.y -= 0.03;
}
else if (Math.abs(X) > Math.abs(Y) && (X2 < 0)) {
//向左
mesh.rotation.y += 0.03;
}
else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
//向下
}
else if (Math.abs(Y) > Math.abs(X) && Y < -0) {
//向上
}
else {
//未移动
}
});
document.addEventListener("touchend", function (e) {
moveEndX = e.changedTouches[0].pageX,
moveEndY = e.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(Y) > Math.abs(X) && Y < -0) {
}
if (Math.abs(Y) > Math.abs(X) && Y > 0) {
}
if (X > 0) {
}
if (X < 0) {
}
});
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
update();
}
function update() {
controls.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>