Three.js加载360全景图片/视频
Three.js加载360全景图片/视频
效果
原理
- 将全景图片/视频作为texture引入到three.js场景中
- 将贴图与球形网格模型融合，将球模型当做成环境容器使用
- 处理视频时需要以dom为载体，加载与控制视频动作
- 每次渲染时更新当前texture，以达到视频播放效果
- 全景图片加载有球体与正方体两种模式，区别在于是加载单张图片还是多张图片
核心方法
// 添加VR全景图const addVrPicture = async () => {// 创建贴图const loader = new THREE.TextureLoader();const texture = await loader.load('./img/vr.jpg');texture.wrapS = THREE.RepeatWrapping;texture.repeat.x = -1;// 创建球形载体const sphereGeometry = new THREE.SphereGeometry(200, 60, 40);const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);scene.add(sphere);};// 添加VR全景视频const addVrVideo = async () => {// 通过Dom引入并控制视频源const video = document.createElement('video');video.src = './video/vr.mp4';video.loop = true;video.muted = true;video.autoplay = true;// 创建视频贴图const texture = new THREE.VideoTexture(video);texture.minFilter = THREE.LinearFilter;// 创建球形载体const sphereGeometry = new THREE.SphereGeometry(200, 60, 40);const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);scene.add(sphere);// 添加动画序列animationList.push(() => {// 更新视频纹理// 播放视频video.play();if (video.readyState === video.HAVE_ENOUGH_DATA) {texture.needsUpdate = true;}});// 调整相机视角const point = new THREE.Vector3(200, 0, 0);camera.lookAt(point);};
完整代码
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}</style></head><body><script type="module">import * as util from './js/util.js';import * as THREE from './node_modules/three/build/three.module.js';import { creatWallByPath } from './js/effect.js';const scene = util.initScene();const stats = util.initStats();const camera = util.initCamera(-1, 0, 0);const renderer = util.initRender();const controls = util.initOrbitControls(camera, renderer);util.windowReSize(renderer, camera);util.addAxisHelper(scene, 100);util.addAmbientLight(scene);util.addDirectionalLight(scene);// 动画序列，每个渲染周期执行const animationList = [];// 添加VR全景图const addVrPicture = async () => {// 创建贴图const loader = new THREE.TextureLoader();const texture = await loader.load('./img/vr.jpg');texture.wrapS = THREE.RepeatWrapping;texture.repeat.x = -1;// 创建球形载体const sphereGeometry = new THREE.SphereGeometry(200, 60, 40);const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);scene.add(sphere);};// 添加VR全景视频const addVrVideo = async () => {// 通过Dom引入并控制视频源const video = document.createElement('video');video.src = './video/vr.mp4';video.loop = true;video.muted = true;video.autoplay = true;// 创建视频贴图const texture = new THREE.VideoTexture(video);texture.minFilter = THREE.LinearFilter;// 创建球形载体const sphereGeometry = new THREE.SphereGeometry(200, 60, 40);const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);scene.add(sphere);// 添加动画序列animationList.push(() => {// 更新视频纹理// 播放视频video.play();if (video.readyState === video.HAVE_ENOUGH_DATA) {texture.needsUpdate = true;}});// 调整相机视角const point = new THREE.Vector3(200, 0, 0);camera.lookAt(point);};const main = async () => {// 添加VR图像await addVrPicture();// 添加VR视频// await addVrVideo();};// 渲染函数const render = () => {renderer.render(scene, camera);stats.update();animationList.forEach((callback) => callback());requestAnimationFrame(render);};window.onload = () => {main();render();};</script></body>
</html>相关文章：
Three.js加载360全景图片/视频
Three.js加载360全景图片/视频 效果 原理 将全景图片/视频作为texture引入到three.js场景中将贴图与球形网格模型融合，将球模型当做成环境容器使用处理视频时需要以dom为载体，加载与控制视频动作每次渲染时更新当前texture，以达到视频播放效…...
北大硕士7年嵌入式学习经验分享
阶段 1 大一到大三这个阶段我与大多数学生相同： 学习本专业知识（EE专业），学习嵌入式软件开发需要的计算机课程（汇编原理，计算机组成原理，操作系统，C语言等），…...
华为鸿蒙手表开发之动态生成二维码
华为鸿蒙手表开发之动态生成二维码 前言： 最近入职新公司，由于之前的哥们临时离职，走得很突然，所以没有任何交接和文档，临时顶上公司手表应用的上架，更换了新的密钥和key之后重新测试功能和流程ÿ…...
2023-09-28 monetdb-databae的概念和作用-分析
摘要: 每个数据库对于db,schema以及user,role都有一套自己的设计, 不同数据库间对于相同名字的东西例如database和schema可以说南辕北辙, 例如mysql中schema其实是database的同义词. 本文分析monetdb的database的概念和作用 database的概念和作用: 和mysql的database完全不同…...
2024级199管理类联考之数学基础(上篇)
管理类考试介绍 管理综合200分,时间3小时 数学：75分/25题,是拉开差距的核心模块 问题求解题：15个,5选一条件充分性判断：10个,结合两个条件选择答案 条件一充分,条件二不充分：A条件一不充分,条件二充分：B条件一充分,条…...
RFID技术引领汽车零部件加工新时代
RFID技术的兴起引领了汽车零部件加工领域的新时代，作为一种利用无线电频率进行自动识别的技术，RFID技术能够快速、准确地识别物体并获取相关数据，在汽车零部件加工中，RFID技术具有重要的应用价值，可以提高生产效率、降…...
python中使用matplotlib绘图
一、背景 当我们在写python程序时，不可避免的需要将数据可视化，也就是绘制出数据的曲线图，以便我们更直观的观察数据间的变化，和方便对比。此时就要用到matplotlib库了。 matplotlib官方给出的定义是： 翻译过来也就是…...
Qt Creator 使用技巧
使用技巧 功能快捷键解释Switch Header/SourceF4在同名的头文件和源程序文件之间切换Follow Symbol Under CursorF2变量:跳转到声明;函数:声明和定义切换Refactor Rename Symbol Under CursorCtrlShiftR改名称，将替换所有用到这个符号的地方RefactorAdd Definition…...
来看看双阶段目标检测算法趴
🚀 作者 ：“码上有钱” 🚀 文章简介 ：AI-目标检测算法 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬简介 双阶段目标检测算法是一类深度学习算法，通常分为两个阶段来检测和识别图像中的…...
python利用matplotlib绘图，对于中文和负号不显示，显示方框“口口”完美解决办法！！
文章目录 一、问题展示二、问题分析三、解决办法四、结果展示 一、问题展示 二、问题分析 可以发现对中文，以及负号不显示。 三、解决办法 import matplotlib.pyplot as pltplt.rcParams[font.sans-serif] [usimHei] # 显示中文 plt.rcParams[axes.unicode_mi…...
【数组及指针经典笔试题解析】
1.数组和指针笔试题 题目1 int main(){int a[5] { 1，2，3，4，5};int * ptr (int * )(&a 1);printf("%d，%d"，*(a 1)，*(ptr - 1));return 0;}图文解析： int * ptr …...
Transformer学习-self-attention
这里写自定义目录标题 Self-attentionMulti-head self-attention用self-attention解决其他问题 Self-attention 用Wq、Wk、Wv分别乘输入向量得到q、k、v向量 用每个q向量乘所有的k向量得到对应项的attention，即用每项的query向量去匹配所有的key向量，得…...
Spring Boot：利用JPA进行数据库的增改
目录 JPA介绍Service接口Service和Autowired示例代码 Dao数据库操作层Repository示例代码 控制器文件示例代码-增加增加成功示例代码-修改修改成功 JPA介绍 JPA（Javaa Persistence API)一种用于持久化 Java 对象到关系型数据库的标准规范。它提供了一种统一的方式来…...
列表的增删改查和遍历
任务概念 什么是任务 任务是一个参数为指针，无法返回的函数，函数体为死循环不能返回任务的实现过程 每个任务是独立的，需要为任务分别分配栈称为任务栈，通常是预定义的全局数组，也可以是动态分配的一段内存空间&#…...
获取网卡上的IP、网关及DNS信息，获取最佳路由，遍历路由表中的条目（附源码）
VC常用功能开发汇总（专栏文章列表，欢迎订阅，持续更新...）https://blog.csdn.net/chenlycly/article/details/124272585C软件异常排查从入门到精通系列教程（专栏文章列表，欢迎订阅，持续更新...&a…...
保姆级 -- Zookeeper超详解
1. Zookeeper 是什么(了解) Zookeeper 是一个 分布式协调服务 的开源框架, 主要用来解决分布式集群中应用系统的一致性问题, 例如怎样避免同时操作同一数据造成脏读的问题. ZooKeeper 本质上是 一个分布式的小文件存储系统 . 提供基于类似于文件系统的目录树方式的数据存储, …...
【通意千问】大模型GitHub开源工程学习笔记（2）--使用Qwen进行推理的示例代码解析，及transformers的库使用
使用Transformers来使用模型 如希望使用Qwen-chat进行推理，所需要写的只是如下所示的数行代码。请确保你使用的是最新代码，并指定正确的模型名称和路径，如Qwen/Qwen-7B-Chat和Qwen/Qwen-14B-Chat 这里给出了一段代码 from transformers import AutoModelForCausalLM, Aut…...
从0开始python学习-23.selenium 常见鼠标的操作
注意：必须创建一个事件链对象（ActionChains）；最后鼠标事件链完成之后一定要进行事务提交perform（）（如果事件链不提交那么所有的鼠标事件都不会执行） 1. 左键单击：click()…...
电气基础——电源、变压器、接触器、断路器、线缆
目录 1.电源 2.变压器 三项电和2相电的转换 3.接触器 4.断路器 5.线缆 1.电源 2.变压器 三项电和2相电的转换 三相电转为2相电 1.变压器 2.相位移转换器 3.电容器 两相电变不了三相电。但是两相电可以通过电容移相后带动三相电机 零线，地线Nÿ…...
步力宝科技爆款产品定位，开创智能物联网新商业
数据显示，中国处于 “亚健康”状态人口数量约占总人口的70%，亚健康是一种临界状态，指介于健康和疾病之间的状态。亚健康是一个动态演变的过程，既有向慢病发展的趋势，也能通过合理的干预使人体重返健康状态，…...
凉鞋的 Unity 笔记 105. 第一个通识：编辑-测试 循环
105. 第一个通识：编辑-测试 循环 在这一篇，我们简单聊聊此教程中所涉及的一个非常重要的概念：循环。 我们在做任何事情都离不开某种循环，比如每天的 24 小时循环，一日三餐循环，清醒-睡觉循环。 在学习一…...
Bug：elementUI样式不起作用、Vue引入组件报错not found等（Vue+ElementUI问题汇总）
前端问题合集：VueElementUI 1. Vue引用Element-UI时，组件无效果解决方案 前提： 已经安装好elementUI依赖 //安装依赖 npm install element-ui //main.js中导入依赖并在全局中使用 import ElementUI from element-ui Vue.use(ElementUI)如果此…...
【大麦小米学量化】使用文心一言AI编写股票量化交易策略代码（含演示代码和进阶演示）
文章目录 AI是个宝前言一、文心一言是什么？二、让AI根据策略写出代码1. 策略提示词2. AI给出的策略代码及说明 三、进阶调试总结 AI是个宝 小米听说百度开放了文心一言AI，好奇的跑去问大麦：“文心一言都放开了，什么代码都可以写&a…...
软考 系统架构设计师系列知识点之软件架构风格（1）
这个十一注定是一个不能放松、保持“紧”的十一。由于报名了全国计算机技术与软件专业技术资格（水平）考试，11月4号就要考试，因此8天长假绝不能荒废，必须要好好利用起来。现在将各个核心知识点一一进行提炼并做记录。 所…...
轮询与中断
中断控制器 #include"exynos_4412.h"int main() {/*产生一个中断信号*//*1.属于外设层次，让外部的硬件控制器能产生一个中断信号并发送给中断控制器*//*将GPX1_1设置成中断功能*/GPX1.CON GPX1.CON |( 0xF << 4);/*设置GPX1_1中断的触发方式---下降…...
使用docker完成minio服务部署扩容备份迁移生产实践文档
一、minio服务扩容方案 当服务器存储空间不足的时候，需要进行扩容，扩容过程中需要短暂停机时间，预计在一小时内能够完成和恢复 统一注意事项 强烈建议为部署中的所有节点选择基本相似的硬件配置。确保硬件（CPU、内存、主板、存…...
管道-有名管道
一、有名管道 有名管道与匿名管道的不同： 有名管道提供了一个路径名，并以FIFO的文件形式存在于文件系统中。与匿名管道不同，有名管道可以被不相关的进程使用，只要它们可以访问该路径，就能够通过有名管道进行通信。 FI…...
谷歌注册手机号码无法验证
1. 打开设置,在语言中点击添加语言搜索English并添加 2. 点击添加后把首选语言换成英语 3. 然后重启浏览器，这时候浏览器就是英文了，最后打开注册页面就能接收短信了...
C语言编译与链接过程详解
C语言编译与链接过程详解 源文件 main.c #include <stdio.h>extern int data; extern int add(int a,int b);int a1; int a2 0; int a3 10;static int b1; static int b2 0; static int b3 20;int main() {int c1;int c2 0;int c3 30;static int d1;static int …...
Qt信号和槽 定时器
文章目录 1 信号和槽1.1 信号和槽的概念1.2 信号和槽的应用1.3 信号和槽的连接1.4 信号和槽的特性1.5 生活中的类似例子1.6 信号和槽的优势 2 信号和槽的使用2.1 控件的信号和槽2.2 自定义信号和槽2.3 信号和槽的参数传递 3 定时器3.1 QTimer类的基本使用3.2 QTimer类的成员函数…...
网站做百度推广/百度竞价广告投放
给出一个整数N，任务是打印空心半菱形图案。示例：输出：## ## ## ## ## ##输入：7## ## ## ## ## ## ## #### ## ## ## #下半部分：对于下半部分，使用迭代给出一个整数N，任务是打印空心半菱形图案。…...
游戏私服发布网站怎么做/小程序商城制作一个需要多少钱
uedtior errorhandler 配置文件加载失败 这个uedtior太扯淡了，在本地idea和tomcat上各种没问题，一上线就不能上传图片，我试过了网上说的各种方法都不管用。最后我用一个十分扯淡的方式解决了。 我的框架是springboot 在后端有ueditor包&…...
怎么做网站免费的/常州网站建设制作
AAA认证及RADIUS配置 AAA简介 AAA是Authentication，Authorization and Accounting（认证、授权和计费）的简称，它提供了一个对认证、授权和计费这三种安全功能进行配置的一致性框架，实际上是对网络安全的一种管理。 这里…...
网站 asp.net php/北京seo优化推广
整个实验环境所需要的虚拟机机器列表，包括机器名称、IP和所安装所需软件如下表： 服务器角色操作系统机器名IP地址所需安装介质Connection ServerWindows Server 2003 x86view.vmware.com192.168.1.202VMware-viewconnectionserver-x86_64-5.0.0-481677.e…...
建设企业网站企业/2024的新闻有哪些
其中Ryzen 5 4500U 和 Ryzen 7 4700U 两款处理器来自于外媒手头上现成的，而 Ryzen 7 Pro 4750U(8核16线程)的跑分则是由读者 Tomas 通过 SSH 提供 ThinkPad X13 远程连接获取的。Ryzen 7 Pro 4750U的性能接近于拥有8核16线程的 Ryzen 7 4800U 处理器，不过…...
哪做网站/百度推广登录平台官网
程序分目录管理 szz_aip：工程目录bin：可执行文件 start.pyconfig：配置文件 setting.pylib：工具类、初始化服务类、接口类 interface.py 接口 tools.py 工具logs：日志readme.txt：说明 setting.p…...