学习threejs,使用VideoTexture实现视频Video更新纹理

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录

  • 一、🍀前言
    • 1.1 ☘️VideoTexture 视频纹理
  • 二、🍀使用VideoTexture实现视频VIDEO更新纹理
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用VideoTexture实现视频VIDEO更新纹理,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️VideoTexture 视频纹理

VideoTexture创建一个使用视频来作为贴图的纹理对象。
它和其基类Texture几乎是相同的,除了它总是将needsUpdate设置为true,以便使得贴图能够在视频播放时进行更新。自动创建mipmaps也会被禁用。
构造函数:
VideoTexture( video : Video, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropy : Number )
video – 将被作为纹理贴图来使用的Video元素。
mapping – 纹理贴图将被如何应用(映射)到物体上,它是THREE.UVMapping中的对象类型。 请参阅mapping constants(映射模式常量)来了解其他选项。
wrapS – 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants(包裹模式常量)来了解其他选项。
wrapT – 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants(包裹模式常量)来了解其他选项。
magFilter – 当一个纹素覆盖大于一个像素时,贴图将如何采样。 其默认值为THREE.LinearFilter。请参阅magnification filter constants(放大滤镜常量)来了解其它选项。
minFilter – 当一个纹素覆盖小于一个像素时,贴图将如何采样。 其默认值为THREE.LinearMipMapLinearFilter。请参阅minification filter constants(缩小滤镜常量)来了解其它选项。
format – 在纹理贴图中使用的格式。 请参阅format constants(格式常量)来了解各个选项。
type – 默认值是THREE.UnsignedByteType. 请参阅type constants(类型常量)来了解其他选项。
anisotropy – 沿着轴,通过具有最高纹素密度的像素的采样数。 默认情况下,这个值为1。设置一个较高的值将会比基本的mipmap产生更清晰的效果,代价是需要使用更多纹理样本。 使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值;这个值通常是2的幂。
属性:
基类Texture共有属性。
在这里插入图片描述
方法:
基类Texture共有方法。
在这里插入图片描述

二、🍀使用VideoTexture实现视频VIDEO更新纹理

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机,定义相机位置 camera.position.set。
  • 4、初始化THREE.AmbientLight环境光源,scene场景加入环境光源,初始化THREE.DirectionalLight平行光源,设置平行光源位置,设置平行光源投影,scene添加平行光源。
  • 5、加载几何模型:创建THREE.AxesHelper坐标辅助工具helper,scene场景中加入helper。创建THREE.BoxGeometry立方体几何体geometry。通过document.querySelector(‘#video’)获取h5 video元素video。传入video参数创建THREE.VideoTexture视频贴图texture,设置texture的水平和垂直包裹、采样。传入texture参数创建THREE.MeshBasicMaterial基础材质对象material。传入geometry、material参数创建THREE.Mesh网格对象,scene场景中加入创建的网格对象。
  • 6、加入controls控制,加入stats监控器,监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn59(使用VIDEOTEXTURE实现视频VIDEO更新纹理)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script><script src="lib/js/Detector.js"></script>
</head>
<style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}#video {position: fixed;left: 0;bottom: 0;}
</style>
<body onload="draw()">
<video id="video" autoplay controls><source src="data/video/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="data/video/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</body>
<script>var renderer, camera, scene, gui, light, stats, controlsvar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.setClearColor(0xeeeeee)renderer.setPixelRatio(window.devicePixelRatio)renderer.shadowMap.enabled = truedocument.body.appendChild(renderer.domElement)}var initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 0, 15)}var initScene = () => {scene = new THREE.Scene()}var initGui = () => {}var initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow = truescene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var geometry = new THREE.BoxGeometry(10, 5, 5)var video = document.querySelector('#video')var texture = new THREE.VideoTexture(video)texture.wrapS = texture.wrapT = THREE.RepeatWrappingtexture.minFilter = THREE.LinearFiltermaterial = new THREE.MeshBasicMaterial({map: texture})scene.add(new THREE.Mesh(geometry, material))}var initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var render = () => {renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw = () => {if(!Detector.webgl) Detector.addGetWebGLMessage()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下:
在这里插入图片描述

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

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

相关文章

2024.12.3总结

继周一把PPT初稿弄出来后&#xff0c;今晚进行了转正预答辩&#xff0c;主管&#xff0c;导师&#xff0c;团队里能来听答辩的人都来了&#xff0c;讲完后&#xff0c;自己都觉得自己讲得不好&#xff0c;基本上是照着PPT念的。 写PPT&#xff0c;改PPT,不停的预演答辩的过程&…

Xilinx PCIe高速接口入门实战(一)

引言&#xff1a;本文对Xilinx 7 Series Intergrated Block for PCI Express PCIe硬核IP进行简要介绍&#xff0c;主要包括7系列FPGA PCIe硬核资源支持、三IP硬核差异、PCIe硬核资源利用等相关内容。 1. 概述 1.1 7系列FPGA PCIe硬件资源支持 7系列FPGA对PCIe接口最大支持如…

网络相关问题

IP&#xff0c;子网掩码&#xff0c;网关&#xff0c;DNS 在网络配置中&#xff0c;IP地址、子网掩码、网关和DNS是至关重要的基本元素&#xff0c;它们共同作用以确保设备在网络中能够进行顺畅的通信。以下是对这些概念的简要说明和它们在网络设置中所扮演的角色。 1. IP地址…

浪潮X86服务器NF5280、8480、5468、5270使用inter VROC Raid key给NVME磁盘做阵列

Inter VROC技术简介 Intel Virtual RAID on CPU (Intel VROC) 简单来说就是用CPU的PCIE通道给NVME硬盘做Raid 更多信息可以访问官方支持页面 Raid Key 授权&#xff0c;即VROC SKU 授权主要有用的有2个标准和高级&#xff0c;仅Raid1的授权我暂时没见过。 标准 VROCSTANMOD …

Google Cloud 混合云部署连接方式最佳实践案例讲解

混合云部署连接方式 GCP 的混合云部署连接方式提供了多种选择&#xff0c;企业可以根据自身需求选择合适的解决方案。实施最佳实践&#xff0c;将有助于提高混合云架构的性能、安全性和可用性。通过合理的规划和管理&#xff0c;企业可以充分利用混合云的优势&#xff0c;实现…

计算机网络之应用层协议HTTP

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 应用层协议HTTP 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. HTTP …

PyTorch 2.5.1: Bugs修复版发布

一&#xff0c;前言 在深度学习框架的不断迭代中&#xff0c;PyTorch 社区始终致力于提供更稳定、更高效的工具。最近&#xff0c;PyTorch 2.5.1 版本正式发布&#xff0c;这个版本主要针对 2.5.0 中发现的问题进行了修复&#xff0c;以提升用户体验。 二&#xff0c;PyTorch 2…

集合的相关性质与定义

集合 集合 集合描述了一组对象的集合&#xff0c;而映射描述了集合之间的对应关系。 集合 集合是由一组无序的&#xff0c;互不相同的对象组成的整体&#xff0c;集合中的对象称为元素或成员。集合可以用大括号{}表示,元素之间用逗号进行分隔。 定义&#xff1a; 集合 A …

【Golang】Golang基础语法(二):内建变量类型

内建变量类型 Go 的内建变量类型: bool, string(u)int, int8, int16, int32, int64, uintptr(指针, go的指针比C的指针方便很多)byte(8位), rune(32位)(Go的字符类型, 相当于Go的char类型)float32, float64, complex64, complex128 强制类型转换 Golang 当中的类型转换只能…

文件管理:文件描述符fd

1.前置预备 文件 内容 属性访问文件之前&#xff0c;都必须先打开他 #include<stdio.h> int main() { FILE* fpfopen("log.txt","w"); if(fpNULL) { perror("fopen"); return 1; } fclose(fp); return 0…

电脑显示没信号显示屏不亮怎么办?电脑没信号解决方法

电脑没信号显示屏不亮这种故障的原因可能有多种&#xff0c;例如显示器的供电、连接、设置等问题&#xff0c;或者电脑的显卡、内存、硬盘、主板等硬件问题。所以我们想要解决这个问题&#xff0c;也是需要多方面排除找到具体原因然后进行修复。下面将为大家介绍一些常见的电脑…

字节青训Marscode——8:找出整形数组中超过一半的数

问题描述 小R从班级中抽取了一些同学&#xff0c;每位同学都会给出一个数字。已知在这些数字中&#xff0c;某个数字的出现次数超过了数字总数的一半。现在需要你帮助小R找到这个数字。 测试样例 样例1&#xff1a; 输入&#xff1a;array [1, 3, 8, 2, 3, 1, 3, 3, 3] 输出…

WPF从本地文件加载界面

在前面的文章中&#xff0c;我介绍过一种报告模板的实现思路。就是用的XAML本地加载。 WPF使用XAML实现报表的一种思路&#xff08;支持外部加载&#xff09; - zhaotianff - 博客园 在另外一篇文章中&#xff0c;介绍了XAML是如何被转换成对象的。 WPF中的XAML是如何转换成对…

Microi吾码产品深度测评:轻量级企业管理应用的全方位剖析

开源低代码平台-Microi吾码-平台简介 技术框架&#xff1a;.NET8 Redis MySql/SqlServer/Oracle Vue2/3 Element-UI/Element-Plus 平台始于2014年&#xff08;基于Avalon.js&#xff09;&#xff0c;2018年使用Vue重构&#xff0c;于2024年10月29日开源 Vue3试用地址&am…

AI后端工程师面试题的内容

AI后端工程师面试题主要包括以下几个方面的内容‌&#xff1a; ‌一、技术基础和项目经验‌&#xff1a; ‌1. 微服务架构的理解和应用‌&#xff1a;请描述你对微服务架构的理解&#xff0c;并举例说明一个你参与过的微服务项目&#xff0c;阐述你在该项目中扮演的角色和所承…

ArrayList如何深究?最简单的数组~

目录 数组 Array 为什么数组索引从0开始呢&#xff1f;为什么不从1开始&#xff1f; ArrayList 成员变量 构造方法 添加和扩容 ArrayList底层的实现原理是什么&#xff1f; 数组和List转换 ArrayList 和 LinkedList区别 底层数据结构 操作数据效率 内存占用 线程安…

前端开发入门指南Day 14 :数据交互(从Ajax到Axios)和工具进阶(JSON、代理、正则表达式)

今天&#xff0c;我们将探索前端开发中最重要的几个实用工具和概念。这些工具就像是前端开发者的瑞士军刀&#xff0c;帮助我们更好地处理数据和实现各种功能。 一、HTTP请求&#xff1a;前后端通信的桥梁 &#x1f309; 为什么需要HTTP请求&#xff1f; 想象你在餐厅点餐&a…

三十一:HTTP多种重定向跳转方式的差异

在现代网站开发中,HTTP 重定向是一种常见的技术,用于将用户的请求从一个 URL 跳转到另一个 URL。重定向机制广泛应用于网站迁移、SEO 优化、以及内容管理系统中。不同的 HTTP 状态码代表不同的重定向方式,每种方式的行为和适用场景各有不同。本文将深入探讨 HTTP 重定向的几…

C++ 分治

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 1.分治法 2.二分搜索 函数传参——数组 3.棋盘覆盖 4.合并排序 5.快速排序 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 1.分治法 基…

anaconda环境下安装第三方库

在 Anaconda 环境中使用 pip install 安装某些包时&#xff0c;可能会出现依赖或环境相关的问题。针对 fastdtw 的安装问题&#xff0c;你可以尝试以下解决方案&#xff1a; 1. 使用 Conda 安装 fastdtw Anaconda 的 conda 包管理器可以更好地处理依赖问题&#xff0c;尤其是…