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 @ 2022-06-30 11:04  Pavetr  阅读(87)  评论(0)    收藏  举报