Threejs入门进阶实战案例(3):视频贴图的解决方案

简介: Threejs入门进阶实战案例(3):视频贴图的解决方案

20200628145815962.png


Texture纹理贴图需要使用TextureLoader()异步加载图片,而视频纹理(VideoTexture)创建一个使用视频来作为贴图的纹理对象时,需要在当前文档创建使用的Video元素。

具体代码如下:

CSS:

 #video {
            position: absolute;
            width: 0;
            height: 0;
        }

HTML:

<!--视频材质素材-->
<video id="video" autoplay loop muted>
    <source src="images/texture/videoPlane.mp4">
</video>

JS:

    //加载视频贴图;
    var texture = new THREE.VideoTexture(video);
    //创建网格;
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    var material = new THREE.MeshBasicMaterial({
        map: texture,
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);


Done!

相关文章
|
存储 分布式计算 大数据
大数据处理流程包括哪些环节
大数据处理流程作为当今信息时代的关键技术之一,已经成为各个行业的必备工具。这个流程涵盖了从数据收集、存储、处理、分析到应用的各个环节,确保了数据的有效利用和价值的最大化。
|
小程序 物联网
基于STM32F103设计的智能门锁(支持多种开锁解锁方式)
基于STM32F103设计的智能门锁(支持多种开锁解锁方式)
1056 0
基于STM32F103设计的智能门锁(支持多种开锁解锁方式)
|
存储 开发框架 JavaScript
Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
【8月更文挑战第7天】Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
1704 4
Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
|
9月前
|
边缘计算 弹性计算 人工智能
魔搭社区大模型一键部署到阿里云边缘云(ENS)
随着大模型技术的快速发展,业界的关注点正逐步从模型训练往模型推理 转变。这一转变不仅反映了大模型在实际业务中的广泛应用需求,也体现了技术优化和工程化落地的趋势。
983 7
ThreeJs添加拖动辅助线
这篇文章介绍了在Three.js中使用TransformControls组件来添加拖动辅助线,实现对3D模型在不同轴向上进行直观的拖动和平移操作。
627 0
|
安全 数据安全/隐私保护 开发者
【Python】 已解决:ERROR: Could not install packages due to an OSError: [WinError 5] 拒绝访问。: ‘e:\anaconda\i
【Python】 已解决:ERROR: Could not install packages due to an OSError: [WinError 5] 拒绝访问。: ‘e:\anaconda\i
4963 11
【Python】 已解决:ERROR: Could not install packages due to an OSError: [WinError 5] 拒绝访问。: ‘e:\anaconda\i
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
599 2
一个案例带你从零入门Three.js,深度好文!
|
前端开发 API
【threejs教程】让你的场景动起来!深入了解threejs场景及坐标轴
【8月更文挑战第5天】让你的场景动起来!深入了解threejs场景及坐标轴
322 0
【threejs教程】让你的场景动起来!深入了解threejs场景及坐标轴
|
12月前
|
人工智能 自然语言处理 Java
DeepSeek 满血版在 IDEA 中怎么用?手把手教程来了
DeepSeek 满血版在 IDEA 中怎么用?手把手教程来了
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
2640 6
threejs做特效:实现物体的发光效果-EffectComposer详解!