Three.js - 用 VideoTexture 视频输出作为纹理

最新推荐文章于 2023-08-24 14:43:54 发布
最新推荐文章于 2023-08-24 14:43:54 发布
阅读量6.7k 收藏 10
点赞数
分类专栏： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ithanmang/article/details/82593423
版权
1、示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180910/02-video-texture.html
效果
这里写图片描述

2、实现步骤
2.1、添加 video 标签
<video id="video" autoplay loop muted>
    <source src="../../textures/video/sintel.ogv">
    <source src="../../textures/video/sintel.mp4">
</video>
2.2、创建视频纹理
var video = document.getElementById('video');
var texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

material.map = texture;
3、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="icon" href="../../../three.png">
    <title>使用videoTexture用视频作为输出纹理</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /* 溢出隐藏 */
            background: url("../../images/bg_network.jpg") center no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
        }

        #loading {
   
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px;
            margin-top: -30px;
            margin-left: -40px;
        }
        #video
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
threejs 物体根据相机位置显示_threejs
weixin_39599166的博客
12-20 2027
threejs 点击数： 10347简介既然我们可以使用canvas元素创建纹理，Three.js也给我们提供了可以实现video创建纹理的方法。我们通过Three.js提供的VideoTexture来实现创建视频纹理。案例实现首先还是查看详情threejs 点击数： 6423简介Three.js可以直接将canvas画布上的图像作为纹理绘制到模型上面。下面我们说一下如何实现案例实现首先，我们创建...
THREE.js设置背景图和播放动画学习 | 大帅老猿threejs特训
m0_69753694的博客
01-08 1397
three.js入门之设置全景背景图和播放动画
vimeo-threejs-player：一个用于将视频从Vimeo流式传输到WebGLVRAR应用程序的插件
02-06
Vimeo three.js播放器 一个将视频从Vimeo流传输到WebGL / VR / AR应用程序的插件 — — 例子 产品特点 :videocassette: 流视频变得简单：通过插件，您可以将Vimeo上托管的视频直接流到WebGL应用 Let让我们做繁重的工作：在支持的平台上流传输多种分辨率，包括自适应视频，以实现最佳性能和视频质量 :mobile_phone: 随处可用：可在手机，平板电脑，笔记本电脑，计算机，VR耳机甚至水下使用 用法 要立即开始播放和流式传输视频，请重新混合Glitch示例： 第一步是生成自己的Vimeo API令牌。 ，然后将其复制并粘贴到Glitch中的.env中。 差不多完成了，转到exampl
three.js用视频输出作为纹理，使用VideoTexture视频纹理实现物体表面播放视频(vue中使用three.js81)
点燃火柴的博客
06-05 3043
使用VideoTexture视频纹理实现物体表面播放视频1.demo效果2. 实现要点2.1 使用标签引入视频资源2.2 创建视频纹理材质4. demo代码 1.demo效果 2. 实现要点 2.1 使用标签引入视频资源 在public目录下的index.html文件中通过< script >标签引入相关文件文件 <video id="video" style="display: none; position: absolute; left: 15px; top: 75px;" :src
100 Three.js使用VideoTexture实现视频Video更新纹理
热门推荐
现在学习也不晚
05-10 1万+
案例查看地址： 简介 既然我们可以使用canvas元素创建纹理，Three.js也给我们提供了可以实现video创建纹理的方法。我们通过Three.js提供的VideoTexture来实现创建视频纹理。 案例实现 首先还是需要有一个video标签，我们将video放到左下角： &amp;amp;lt;video id=&amp;quot;video&amp;quot; autoplay controls &amp;amp;gt; &amp
three.js全景视频
weixin_38476863的博客
08-09 4886
小生最近学习three.js，将three.js官网提供的网站实例翻译翻译，共同学习。接下来翻译一下 webgl_video_panorama_equirectangular.html 运行结果https://threejs.org/examples/#webgl_video_panorama_equirectangular three.js webgl - equirecta
three.js材质纹理显示不出来（显示黑色）
Z_Gleng的博客
12-14 1301
【代码】three.js材质纹理显示不出来（显示黑色）
Three.js-webgl物联网粮仓3D可视化
最新发布
03-12
项目案例使用threejs+vue+js实现粮仓三维可视化管理，加载粮仓3d场景，实现粮仓信息查询，标注，粮仓剖切，天气模拟功能，免安装即可运行，代码结构清晰，根据需求下载
three.js-r133.zip
06-16
three.js-r133
three.js-dev-examples-models.zip
08-26
three.js-dev-examples-models.zip
Easy Movie Texture Video Texture 3.72.zip
10-25
Easy Movie Texture Video Texture 3.72.unitypackage unity适用各种平台视频。
threejs video演示，从笔记本摄像头获取媒体流，将场景渲染在立方体上
03-04
threejs video演示，从笔记本摄像头获取媒体流，将场景渲染在立方体上
threejs-video-cube:一个简单的three.js演示，该演示使用gUM从用户的网络摄像头获取媒体流，然后创建一个多维数据集并将视频作为纹理应用于多维数据集的面Kong
05-23
threejs-video-cube 一个简单的three.js演示，该演示使用gUM从用户的网络摄像头获取媒体流，然后创建一个多维数据集并将视频作为纹理应用于多维数据集的面Kong。 。
Learn-Three.js-Third-Edition:学习Three.js第三版，由Packt发行
05-28
使用Three.js，无需学习WebGL，就可以使用JavaScript以直观的方式创建精美的3D图形。 通过这本书，您将学习如何利用WebGL和现代浏览器的全部潜能，直接在浏览器中创建和制作精美的3D场景并为其设置动画。 它从Three...
three.js-dev.zip
11-27
three.js-dev.zip,three.js-dev.zip,three.js-dev.zip,three.js-dev.zip,three.js-dev.zip，three.js-dev.zip，three.js-dev.zipthree.js-dev.zipthree.js-dev.zip，three.js-dev.zip
threejs纹理加载三（视频加载）
baidu_41601048的博客
08-24 1307
threejs中除了能把图片作为纹理进行几何体贴图以外，还可以把视频作为纹理进行贴图设置。纹理的类型有很多，我们可以用不同的加载器来加载，而对于视频作为纹理，我们需要用到今天的主角：VideoTexture。我们先看效果
three.js开发全景视频播放器的现实方法
VR观察 ——专注AR/XR//MR/VR技术研究与应用探索！
11-12 4760
业余弄弄three.js。想用three.js实现播放全景视频。研究了一段。搜索很多资料。感觉这一遍很棒。搜藏分享下。 原理：将video标签拉伸显示在three.js场景的一个球模型上，用相机在中间播放渲染。 基础：基于three.js官方案例中的全景视频播放（three.js webgl - equirectangular video panorama） 操作过程：对官方demo进行视频...
Threejs入门进阶实战案例(3)：视频贴图的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-28 1706
Texture纹理贴图需要使用TextureLoader()异步加载图片，而视频纹理（VideoTexture）创建一个使用视频来作为贴图的纹理对象时，需要在当前文档创建使用的Video元素。
Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴
程序员秋风的博客
07-11 1767
最近元宇宙的概念很火，并且受到疫情的影响，我们的出行总是受限，电影院也总是关门，但是在家里又没有看大片的氛围，这个时候我们就可以通过自己来造一个宇宙，并在 VR 设备（Oculus 、cardboard）中来观看。今天我打算用 Three.js 来实现个人 VR 电影展厅，整个过程非常的简单，哪怕不会编程都可以轻易掌握。想要顶级的视觉盛宴，最重要的肯定是得要一块大屏幕，首先我们就先来实现一块大屏幕...
three.js播放全景视频
01-16
three.js是一个用于创建和展示3D内容的JavaScript库。要在three.js中播放全景视频，首先需要准备一个全景视频文件，通常是由360度摄像机拍摄的。然后，可以使用three.js中的THREE.VideoTexture对象来创建一个视频纹理。 首先，我们需要创建一个全景球体，用于展示全景视频。然后，我们将全景视频文件载入到一个HTML5的video元素中，并且将其作为视频纹理赋予给全景球体。接着，我们需要添加一个渲染器（Renderer）和相机（Camera）来将全景视频展示在屏幕上。最后，添加一些控制器，比如鼠标控制器或者VR设备控制器，让用户可以在全景视频中进行交互和导航。 在代码中，我们可以使用three.js提供的API来实现上述步骤，通过创建材质（Material）、几何体（Geometry）等对象来展示全景视频。另外，我们还可以通过调整全景球体的位置、旋转和大小来适应不同的屏幕和设备。 通过上述步骤，我们就可以在使用three.js创建的3D场景中播放全景视频了。用户可以通过鼠标、键盘或者VR设备来与全景视频进行交互，体验沉浸式的全景视频观看体验。这种方式可以在网页上实现全景视频播放，为用户提供更加生动和丰富的视听体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值