前情回顧
上一篇我們大緻了解了Threejs中的紋理加載器的大緻使用方法，紋理最基礎的用法就是在材質上貼圖，将圖檔通過(TextureLoader)
加載，然後設定為材質的THREE.TextureLoader
屬性。map
視訊作為Three.js紋理貼圖(VideoTexture)
視訊本質上就是一幀幀圖檔流構成，把視訊作為Threejs模型的紋理貼圖使用，就是從視訊中提取一幀一幀的圖檔作為模型的紋理貼圖，然後不停的更新的紋理貼圖就可以産生視訊播放的效果。 實作效果如下： 主要代碼如下所示： 1. 建立video播放器
<video id="video" autoplay controls loop> <source src="../assets/v.mp4" />video>
2. 擷取video對象，使用 VideoTexture 來加載video對象執行個體化紋理，然後設定為網格模型材質對象的
map
屬性
//擷取到video對象var video = document.querySelector("#video");//通過video對象執行個體化紋理var texture = new THREE.VideoTexture(video);texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;texture.minFilter = THREE.LinearFilter;// 幾何體材質對象var material = new THREE.MeshLambertMaterial({ map: texture});
當然了，建立一個三維場景是必不可少的步驟(場景，相機，渲染器)
完整代碼如下：
<template> <div> <div ref="content">div> <video id="video" autoplay controls loop> <source src="../assets/v.mp4" /> video> div>template><script>// 引入threejsimport * as THREE from "../../public/build/three";//滑鼠控制import { OrbitControls } from "../../public/example/jsm/controls/OrbitControls.js";export default { components: {}, data() { return { // 建立一個場景 scene: null, // 建立一個相機 camera: null, // 建立一個渲染器 renderer: null, // 模型對象 mesh: null, // 平面 plane: null, // 點光源 point: null, // step step: 0 }; }, mounted() { this.init(); }, methods: { // 初始化 init() { // 初始化容器 var content = this.$refs.content; // 建立一個場景 this.scene = new THREE.Scene(); this.scene.background = new THREE.Color("#000"); // 建立幾何體 var geometry = new THREE.BoxGeometry(100, 50, 50); //擷取到video對象 var video = document.querySelector("#video"); //通過video對象執行個體化紋理 var texture = new THREE.VideoTexture(video); texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; texture.minFilter = THREE.LinearFilter; // 幾何體材質對象 var material = new THREE.MeshLambertMaterial({ map: texture }); // 建立網格模型對象 this.mesh = new THREE.Mesh(geometry, material); //設定幾何體位置 this.mesh.position.x = 0; this.mesh.position.y = 10; this.mesh.position.z = 0; this.scene.add(this.mesh); // 建立點光源 var point = new THREE.PointLight("#FFF"); point.position.set(40, 200, 300); this.point = point; this.scene.add(point); const sphereSize = 10; const pointLightHelper = new THREE.PointLightHelper(point, sphereSize); this.scene.add(pointLightHelper); //建立環境光 var ambient = new THREE.AmbientLight(0x444444); this.scene.add(ambient); // 建立一個相機 this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 10000 ); this.camera.position.set(0, 0, 200); this.camera.lookAt(0, 0, 0); //坐标軸輔助器，X,Y,Z長度30 // var axes = new THREE.AxesHelper(300); // this.scene.add(axes); // 輔助網格 // let gridHelper = new THREE.GridHelper(100, 100); // this.scene.add(gridHelper); // 建立渲染器 this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setClearColor(0xb9d3ff, 1); //插入 dom 元素 content.appendChild(this.renderer.domElement); let controls = new OrbitControls(this.camera, this.renderer.domElement); controls.addEventListener("resize", this.render(), false); }, render() { this.renderer.render(this.scene, this.camera); // 自動旋轉動畫 this.mesh.rotateX(0.01); // this.render requestAnimationFrame(this.render); } }};script><style scoped>#video { position: fixed; top: 0; left: 0; width: 300px; height: 200px;}style>
本人，某個不知名小公司的前端小菜雞，由于技術太菜，業餘時間總是喜歡搗鼓一些花裡胡哨的東西，一邊學習一邊分享，希望能夠和大家一起成長，夢想着成為一位前端大大牛。
覺得本文對你有幫助？請分享給更多人或點個在看
關注==>>「前端開發愛好者」，一起提升前端技能！