THREE.js移动端全景视频

最新推荐文章于 2023-12-16 15:11:44 发布
最新推荐文章于 2023-12-16 15:11:44 发布
阅读量2k 收藏 8
点赞数 1
分类专栏： JS/THREE.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40245044/article/details/91417246
版权

创建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>
艾黎先生
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
使用vue架构构建three.js3d场景—全景视频___#三分有点码#专栏
Hu_xiao_ge的博客
06-26 876
使用vue架构构建three.js3d场景—全景视频 三分有点码。 仅是3d全景视频渲染，更多请访问 https://blog.csdn.net/Hu_xiao_ge <template> <!-- 主场景 --> <div ref="container_team"></div> </template> <script> import * as THREE from "three"; import { OrbitContro
three.js加载3d模型_Threejs 加载视频纹理渲染 实现一个3D视频播放器
weixin_39998906的博客
12-10 2340
前情回顾上一篇我们大致了解了Threejs中的纹理加载器(TextureLoader)的大致使用方法，纹理最基础的用法就是在材质上贴图，将图片通过THREE.TextureLoader加载，然后设置为材质的map属性。视频作为Three.js纹理贴图(VideoTexture)视频本质上就是一帧帧图片流构成，把视频作为Threejs模型的纹理贴图使用，就是从视频中提取一帧一帧的图片作为模...
threeJs播放全景视频Demo
04-21
threeJs播放全景视频Demo
three.js全景视频
weixin_38476863的博客
08-09 4896
小生最近学习three.js，将three.js官网提供的网站实例翻译翻译，共同学习。接下来翻译一下 webgl_video_panorama_equirectangular.html 运行结果https://threejs.org/examples/#webgl_video_panorama_equirectangular three.js webgl - equirecta
Three.js 3D视频全景
weixin_63443072的博客
12-16 175
2.球体，用一张全景图片贴在球上。效果比较好，但是做网页的话，图片会非常大。所以可以优化：把全景图切割成瓦片图，请求的时候图片懒加载。而且要包两层，这样看起来不那么丑。但是现在咱们要搞视频全景，配合上设备方向识别。不就可以实现“vr”效果了吗？以vue3为例，直接上代码。先说说市面上比较流行的3d全景web基本是图片来制作的。1.环境贴图，六个面把透视相机包起来。
three.js开发全景视频播放器的现实方法
VR观察 ——专注AR/XR//MR/VR技术研究与应用探索！
11-12 4798
业余弄弄three.js。想用three.js实现播放全景视频。研究了一段。搜索很多资料。感觉这一遍很棒。搜藏分享下。 原理：将video标签拉伸显示在three.js场景的一个球模型上，用相机在中间播放渲染。 基础：基于three.js官方案例中的全景视频播放（three.js webgl - equirectangular video panorama） 操作过程：对官方demo进行视频...
Threejs + Videojs/原生video/第三方播放器 实现全景视频/全景直播播放DEMO
热门推荐
李二狗的博客
06-03 1万+
原理 原理其实很简单，做过全景图的同学都知道，球模型+全景图片贴图。 全景视频/全景直播就是 球模型+全景视频素材 。 至于播放器样式，可以自己用Js+Dom自定义，或者更改videojs的样式 即便你是用原生video也是可行的 threejs官方demo就是原生video标签。 本demo就是拿着threejs的demo改的 <!DOCTYPE html> <html ...
three.js实现3D全景看房
10-23
本篇文章将深入探讨如何利用three.js实现3D全景看房功能，特别是针对移动端的应用。 首先，我们需要理解three.js的基础概念。Three.js是一个基于WebGL的库，WebGL是一种在浏览器中渲染3D图形的API，它允许开发者...
three.js实现炫酷的全景3D重力感应
10-17
three.js是一个流行的JavaScript库，专门用于在Web浏览器中创建3D图形。通过结合重力感应，我们可以为移动设备上的用户带来更加沉浸式的交互体验。 首先，我们需要设置HTML和CSS来准备场景的容器。`...
Three.js全景漫游代码实现
04-26
在Web开发中，Three.js库是一个非常流行的选择，它是一个基于WebGL的JavaScript库，用于在浏览器中创建3D图形。本篇文章将详细探讨如何使用Three.js实现全景漫游代码。 首先，理解Three.js的基础概念至关重要。...
threejs-iphone：Gatsby中的一个小threejs演示，显示了在Iphone模型上播放的视频
02-16
threejs-iphone 盖茨比（Gatsby）的一个小threejs演示，显示了在Iphone模型上播放的视频 切换到dev分支获取源代码;）
arplayerforthreejs:Three.js的增强现实播放器
05-24
退休项目迁移到 请更新您的链接 Three.js的增强现实 该演示演示了如何仅使用网络技术来获得增强现实。 我做了一个介绍。 您可以在此处找到。 如何运行演示？ 将浏览器放在 它将使用读取您的网络摄像头如果它请求许可，请允许:) 它将识别您放置在mcamera前面的标记 从获取标记 您可以打印它并将相机对准纸张 或者您可以加载标记网页并将手机放在摄像头前面 支持的设备 它应该在任何支持和Web浏览器上运行 它可以在台式机和手机上运行。 诸如nexus 6/9之类的现代手机是运行它的强大功能 不幸的是，ios浏览器仍然缺乏对支持，因此iphone和ipads无法播放:( 显示不告诉 []：它显示了一个基本的增强现实应用程序。 很高兴学习如何使用代码。 完美的起点。 youtube视频 examples / data-visualization-histogram3d.html
threejs 使用陀螺仪实现手机端全景
凌风子夜
09-20 3503
在threejs中实现全景的方式有多种，其中有天空盒子，贴图反缩放，还有CSS3DRenderer渲染。 **方法：**CSS3DRenderer使用六幅图片绘制一个立方体盒子，将视角放置在其中，根据陀螺仪控制方向，移动视角。 首先两个引用包： <script src="js/controls/DeviceOrientationControls.js"></script&g...
基于threejs,html5,hlsjs,flvjs编写vr全景播放器
qq_33290980的博客
05-08 2651
之前接到一个需求，需要写一个demo实现360°全景视频播放，于是开始开始研究threejs及相关方面的知识，在一段时间的调研后大致有了一些头绪，大概就是生成一个球的模型，然后纹理朝向背部，最后把视频作为纹理加载到这个模型上就行了。虽然说起来很简单，但在实现的过程种还是踩了不少坑的。首先是需要对接直播流这一块，一开始准备用我比较熟悉的vue-video-player来作纹理，结果发现需要使用原生video dom节点作为纹理，当时想着那这样就没什么办法了，这样的话有很多像是进度条什么的都只能自己去实现了，包
android 360全景视频,there.js移动端 IOS 安卓 360全景视频（vr）
weixin_35899324的博客
05-29 180
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...
threejs纹理加载三（视频加载）
baidu_41601048的博客
08-24 1331
threejs中除了能把图片作为纹理进行几何体贴图以外，还可以把视频作为纹理进行贴图设置。纹理的类型有很多，我们可以用不同的加载器来加载，而对于视频作为纹理，我们需要用到今天的主角：VideoTexture。我们先看效果
three.js插件实现立体动感视频播放效果
weixin_33730836的博客
01-15 643
2019独角兽企业重金招聘Python工程师标准>>> ...
ThreeJS案例一——在场景中添加视频，使用人物动作以及用键盘控制在场景中行走的动画
NanChen的博客
06-24 2406
首先我们需要两个模型，一个是场景模型，另一个是人物模型。 人物模型我这里用的Threejs官网中的给的模型，名称是。 当然人物模型也可以自己去这个网站下载sketchfab，下载后给模型添加动画mixamo 下载模型动画这里注意一下用Blander软件给模型添加动画的两种方式，具体写法的区别后面会说到方式一：把每个单独的动画拆分出来 方式二：将所用到的动画统一放在一个时间戳中 场景加载完后再放入人物模型： 这里需要将控制器给取消，并且将初始镜头删除，把镜头给到人物模型 到这里模型就全部引入完成 注意：视频无
THREE.VideoTexture失效的问题
qq_40245044的博客
05-29 1050
最近发现之前用THREE.VideoTexture在模型网格上渲染视频的方法在一些机型上失效了，原因未知，主要在微信里。而且前几天还没有什么问题。 尝试了各种方法后也只能选择用一个笨方法代替： 首先将视频绘制在canvas上，然后用THREE.CanvasTexture作为纹理，当然视频需要设置x5-video-player-type="h5-page"。 ...
three.js播放全景视频
最新发布
01-16
要在three.js中播放全景视频，首先需要准备一个全景视频文件，通常是由360度摄像机拍摄的。然后，可以使用three.js中的THREE.VideoTexture对象来创建一个视频纹理。 首先，我们需要创建一个全景球体，用于展示全景...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艾黎先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值