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!

相关文章
|
前端开发 定位技术
高德地图进阶开发实战案例(9):涟漪动画标注的实现方案
高德地图进阶开发实战案例(9):涟漪动画标注的实现方案
155 0
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
139 0
|
1月前
|
移动开发 JavaScript 前端开发
ThreeJs简介
这篇文章介绍了Three.js的基础知识,包括其相对于WebGL的优势以及如何使用Three.js创建基本的3D场景。
38 1
|
1月前
|
Web App开发 数据可视化 前端开发
Pixi入门第一章:绘制一个小精灵
这篇文章是关于Pixi.js的入门教程第一部分,指导读者如何创建并显示一个基本的2D精灵,适用于开始学习Pixi.js进行2D图形开发的初学者。
60 0
Pixi入门第一章:绘制一个小精灵
|
1月前
|
图形学
Pixi入门第三章:绘制更多内容
这篇文章作为Pixi.js入门教程的第三章,介绍了如何使用鼠标事件(如mousemove)来实现在画布上绘制线条的功能,并提供了实现动态绘制的代码示例。
23 0
|
3月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
83 2
一个案例带你从零入门Three.js,深度好文!
|
3月前
|
编解码 JavaScript 前端开发
ThreeJs 基础学习
ThreeJs 基础学习
48 0
|
搜索推荐 定位技术
SWMM从入门到实践教程 02 快速入门案例的绘制
SWMM从入门到实践教程 02 快速入门案例的绘制
|
存储 程序员 uml
【程序员必备】绘制架构图,流程图神器推荐
好的图形可以帮我们更好的表达自己,帮我们理清逻辑
|
前端开发
前端知识案例-图的简介
前端知识案例-图的简介
61 0
前端知识案例-图的简介