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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/91149.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于arduino的土壤湿度检测

1.总体设计框图 本浇花系统总体上分为硬件和软件两大组成部分。硬件部分包括Arduino UNO开发板、温湿度传感器、通信模块、浇水执行系统和液晶显示等。软件部分包括Android客户端。系统结构如图1所示 本浇花系统总体上分为硬件和软件两大组成部分。硬件部分包括Arduino UN…

如何做好测试?(二)单元测试(Unit Testing, UT)

1. 单元测试的介绍&#xff1a; 单元测试单元测试(Unit Testing, UT)&#xff0c;是软件测试的一种测试方法&#xff0c;旨在验证软件系统中的最小可测试单元&#xff08;通常是函数、方法或类&#xff09;的功能是否正确。它将软件系统拆分为各个独立的单元&#xff0c;并对每…

Node.js安装教程【附安装包资源】

文章目录 安装包下载安装流程配置环境变量检查Node.js是否安装成功指定全局模块和模块缓存的路径设置淘宝镜像全局安装cnpm&#xff08;这一步可以选择是否执行&#xff09; 安装包下载 安装包下载 安装流程 修改安装路径 配置环境变量 看看环境变量里面是否有Node.js的…

手把手带你体验一场属于Linux的学习之旅

手把手带你体验一场属于Linux的学习之旅 Linux是一个开源的操作系统&#xff0c;以性能高和稳定著称因为继承unix&#xff0c;在权限和网络上的设计与表现也非常优异。同时其系统开源/免费/优秀/稳定&#xff0c;自由高可定制&#xff0c;深受程序员们等代表的极客们的喜爱&…

Python入门教程48:Pycharm永久镜像源的pip配置方法

国内几个好用的Python镜像服务器地址&#xff1a; 清华大学镜像站&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple/阿里云镜像站&#xff1a;https://mirrors.aliyun.com/pypi/simple/中科大镜像站&#xff1a;https://pypi.mirrors.ustc.edu.cn/simple/中国科技大学镜…

【Unity ShaderLab PBR 嗜血边缘角色_美式朋克风格_“Niohoggr“_角色渲染(第一篇)】

嗜血边缘角色Cyberpunk style渲染 《嗜血边缘》截取其中的片段如下:资源分析其中Guitar贴图4张模型:人物细节图:人物模型 Inspector面板这里做一个区域区分:Body贴图1_BC贴图1_BC属性:Body贴图2_NBody贴图3_CMBody贴图4_SRMBody贴图4_RGBReflection Probe第一版Shader代码…

Ros2 学习02- ubuntu22.04 安装ros2

设置镜像源 sudo vim /etc/apt/sources.list#阿里源 deb http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ jamm…

华为云智能化组装式交付方案 ——金融级PaaS业务洞察及Web3实践的卓越贡献

伴随信息技术与金融业务加速的融合&#xff0c;企业应用服务平台&#xff08;PaaS&#xff09;已从幕后走向台前&#xff0c;成为推动行业数字化转型的关键力量。此背景下&#xff0c;华为云PaaS智能化组装式交付方案闪耀全场&#xff0c;在近日结束的华为全联接大会 2023上倍受…

【Vue】数据监视输入绑定

hello&#xff0c;我是小索奇&#xff0c;精心制作的Vue系列持续发放&#xff0c;涵盖大量的经验和示例&#xff0c;如有需要&#xff0c;可以收藏哈 本章给大家讲解的是数据监视&#xff0c;前面的章节已经更新完毕&#xff0c;后面的章节持续输出&#xff0c;有任何问题都可以…

zemax埃尔弗目镜

可以认为是一种对称设计&#xff0c;在两个双胶合透镜之间增加一个双凹单透镜 将半视场增大到30&#xff0c;所有的轴外像差维持在可以接受的水平。 入瞳直径4mm波长0.51、0.56、0.61半视场30焦距27.9mm 镜头参数&#xff1a; 成像效果&#xff1a;

用ChatGPT编写一个词卡显示网页

一、问题缘起 之前&#xff0c;我就发觉很多老师喜欢通过播放单词音频&#xff0c;显示单词拼写&#xff0c;这种词卡的形式来帮助学生记忆单词。于是&#xff0c;我就用Python制作了一个记单词软件&#xff0c;可以实现对words.txt中的单词滚动显示&#xff0c;播放发音&…

正则表达式贪婪模式和非贪婪模式

一、贪婪模式 贪婪模式表示尽可能多的匹配字符串&#xff0c;正则表达式六个量词元字符?、、*、{n}、{n,m}、{n,}默认是贪婪模式 接下来引入一个场景来分析说明 获取html a标签href属性的值 <a href"https://www.baidu.com/" attr"abc"></a>…

【Linux】详解线程第三篇——线程同步和生产消费者模型

线程同步和生消模型 前言正式开始再次用黄牛抢票来讲解线程同步的思想通过条件变量来实现线程同步条件变量接口介绍初始化和销毁pthread_cond_waitsignal和broadcast 生产消费者模型三种关系用基本工程师思维再次理解基于生产消费者模型的阻塞队列版本一版本二多生多消 利用RAI…

java web+Mysql e-life智能生活小区物业管理系统

本项目为本人自己书写&#xff0c;主要服务小区业主和管理人员。 e-life智能生活小区涉及多个方面的智能化和便利化服务&#xff1a; 1. 用户模块&#xff1a;包含基本的登入登出操作&#xff0c;查看个人信息中用户可以查看 自己的个人资料但不可以修改个人信息。 a) 用户…

Celery结合flask完成异步任务与定时任务

Celery 常用于 web 异步任务、定时任务等。 使用 redis 作为 Celery的「消息代理 / 消息中间件」。 这里通过Flask-Mail使用qq邮箱延时发送邮件作为示例 pip install celery pip install redis pip install Flask-Mail1、使用flask发送邮件 使用 Flask-Mail 发送邮件需要进行…

数据分析三剑客之一:Numpy详解及实战

1 NumPy介绍 NumPy 软件包是Python生态系统中数据分析、机器学习和科学计算的主力军。它极大地简化了向量和矩阵的操作处理。Python的一些主要软件包&#xff08;如 scikit-learn、SciPy、pandas 和 tensorflow&#xff09;都以 NumPy 作为其架构的基础部分。除了能对数值数据…

适配器模式 结构性模式之五

1.概念 适配器模式是一种结构型的软件设计模式&#xff0c;也称包装模式&#xff0c;即将相对复杂的功能&#xff08;可能用到多个类&#xff09;封装起来&#xff0c;提供一个使用者想要的接口&#xff0c;使用者只需要调用接口&#xff0c;不需要知道接口里封装的内容是如何实…

热门敏捷开发管理工具

敏捷管理研发工具可以协助团队更好地进行敏捷开发和管理。以下是几种流行的敏捷管理研发工具&#xff1a; Leangoo&#xff1a;Leangoo领歌一款永久免费的专业敏捷研发管理工具&#xff0c;它覆盖了敏捷项目研发全流程&#xff0c;包括小型团队敏捷开发&#xff0c;规模化敏捷…

Linux基本指令(一)

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; C&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大…

对负采样(negative sampling)的一些理解

负采样&#xff08;negative sampling&#xff09;通常用于解决在训练神经网络模型时计算softmax的分母过大、难以计算的问题。但在LightGCN模型论文的BPR LOSS中&#xff0c;负采样的概念可能与传统的softmax分母问题不完全一样。 在LightGCN模型中&#xff0c;不同于传统的协…