three视频贴图

1、给模型贴图都是静态的,如果想要动态的怎么办,three.js不止可以贴图片,还可以贴视频来达到动态的效果

2、实现也简单,就是把贴图片的这一步换成视频

复制代码
            let scene = new THREE.Scene();
            let geometry = new THREE.SphereGeometry(1000, 60, 60); 
       //模型翻转过来
            geometry.scale(1, 1, -1);
            //视频贴图
            const video = document.createElement("video");
            video.src = require("./assets/006.mp4");
            video.loop = "loop";
            video.muted = true;
            video.autoplay = "autoplay";
            video.play();
            let texture1 = new THREE.VideoTexture(video);
            let material = new THREE.MeshBasicMaterial({
                map: texture1, // 设置纹理贴图
                side: THREE.DoubleSide,
            }); //材质对象Material
            let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
            mesh.name = "小黄毛";
            scene.add(mesh); //网格模型添加到场景中
复制代码

 

posted @   Pavetr  阅读(76)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示