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):涟漪动画标注的实现方案
169 0
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
156 0
|
3月前
|
移动开发 JavaScript 前端开发
ThreeJs简介
这篇文章介绍了Three.js的基础知识,包括其相对于WebGL的优势以及如何使用Three.js创建基本的3D场景。
81 1
|
5月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
105 2
一个案例带你从零入门Three.js,深度好文!
|
5月前
|
编解码 JavaScript 前端开发
ThreeJs 基础学习
ThreeJs 基础学习
65 0
|
7月前
|
移动开发 前端开发 JavaScript
技术经验分享:Canvas入门到高级详解(上)
技术经验分享:Canvas入门到高级详解(上)
69 0
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
112 0
|
搜索推荐 定位技术
SWMM从入门到实践教程 02 快速入门案例的绘制
SWMM从入门到实践教程 02 快速入门案例的绘制
|
前端开发 C# 图形学
unity入门必备的案例2.0
unity入门必备的案例你还不知道?
121 0
|
前端开发
前端知识案例学习15-实现3d得旋转
前端知识案例学习15-实现3d得旋转
95 0
前端知识案例学习15-实现3d得旋转

热门文章

最新文章

下一篇
开通oss服务