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!

相关文章
|
6月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
116 2
一个案例带你从零入门Three.js,深度好文!
|
4月前
|
移动开发 JavaScript 前端开发
ThreeJs简介
这篇文章介绍了Three.js的基础知识,包括其相对于WebGL的优势以及如何使用Three.js创建基本的3D场景。
170 1
|
移动开发 前端开发 JavaScript
HaaS UI小程序解决方案进阶教学之一:Canvas画图入门
canvas的应用场景非常多,主要运用在一些需要操作图形的场景,如绘制曲线、特效、粒子特效、图表、游戏、二维码、条形码等等场景。
390 15
HaaS UI小程序解决方案进阶教学之一:Canvas画图入门
|
前端开发 定位技术
高德地图进阶开发实战案例(9):涟漪动画标注的实现方案
高德地图进阶开发实战案例(9):涟漪动画标注的实现方案
185 0
|
6月前
|
编解码 JavaScript 前端开发
ThreeJs 基础学习
ThreeJs 基础学习
77 0
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
120 0
|
Web App开发 数据可视化 容器
基于Threejs构建的3D立体空间实战入门
本文将简单介绍Threejs的相关基础知识,四个基础对象组件。最后采用一个实例一步一步的进行3D房间展示,最终达到可视化的效果。
495 0
基于Threejs构建的3D立体空间实战入门
|
前端开发
前端知识案例学习15-实现3d得旋转
前端知识案例学习15-实现3d得旋转
100 0
前端知识案例学习15-实现3d得旋转
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
165 0
|
Web App开发 移动开发 前端开发
WebMatrix进阶教程(3):如何实现某种样式
Csdn.net近期将发布微软全新Web开发工具WebMatrix的进阶教程,帮助开发人员人士认识这一号称微软史上最强的Web开发工具。继上次发布的如何安装和使用微软全新开发工具WebMatrix 和 教您如何使用WebMatrix创建第一个网页 后。
1144 0

热门文章

最新文章