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

最新推荐文章于 2025-03-10 12:24:45 发布

「已注销」

最新推荐文章于 2025-03-10 12:24:45 发布

阅读量6.9k

点赞数

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/ithanmang/article/details/82593423

版权

本文介绍如何在Three.js中利用VideoTexture将视频作为纹理进行显示。首先展示了包含视频纹理效果的示例，然后详细阐述了实现步骤，包括在HTML中添加video标签以及在Three.js中创建和应用视频纹理的步骤。最后提供了相关的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 {
   
            position