【threeJS】纹理贴图

纹理贴图设置

//镜面处理
texture.flipY=false;
//边缘处理
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

加载纹理贴图

方法一：
THREE.ImageUtils.loadTexture('m0.jpg')
方法二：
new THREE.TextureLoader().load(
					"w.jpg",
					texture =>{
						texture.wrapS = THREE.RepeatWrapping;
						texture.wrapT = THREE.RepeatWrapping;
						mesh.material = new THREE.MeshBasicMaterial({map: texture});
					}
			);

将视频作为纹理贴图

var video=document.createElement('video');
video.style.cssText= 'loop;';
video.src="video.mp4";

var texture=new THREE.VideoTexture(video);
texture.flipY=false;
texture.wrapS=texture.wrapT=THREE.ClampToEdgeWrapping;
texture.minFilter=texture.magFilter=THREE.LinearFilter;
texture.format=THREE.RGBFormat;

将画布作为纹理贴图

var canvas = document.createElement("canvas");
canvas.width = 50;canvas.height = 20;
canvas.getContext('2d').fillStyle = "#00ff00";
canvas.getContext('2d').fillText("哈12哈12哈", 0, 20);

var texture = new THREE.CanvasTexture(canvas);

将HTML的img标签作为纹理贴图

var img = new Image();
img.src =src;
img.onload = function(){
    var texture = new THREE.Texture();
    texture.image =img;
    texture.needsUpdate = true;
	mesh.material=new THREE.MeshLambertMaterial({ map: texture });
};

Material的needsUpdate
材质在three.js中是通过THREE.Material来描述的，其实材质并没有什么数据要传输，但是为什么还要搞一个needsUpdate呢，这里还要说一下shader这个东西，shader直译过来是着色器，提供了在gpu中编程处理顶点和像素的可能性，在绘画中有个shading的术语来表示绘画的明暗法，GPU中的shading也类似，通过程序计算光照的明暗来表现物体的材质，ok, 既然shader是一段跑在GPU上的程序，那么像所有程序一样都需要进行一次编译链接的操作， WebGL中是在运行时对shader程序进行编译的，这当然需要消耗时间，因此也是最好能够一次编译就运行到程序结束。所以three.js中就在material初始化的时候就编译链接了shader程序并且缓存了编译链接后得到的program对象。一般一个material是不需要再去重新编译整个shader了，材质的调整只需要修改shader的uniform参数就行了。但是如果是替换了整个材质，比如将原来phong的shader替换成了一个lambert的shader，就需要将material.needsUpdate设置成true去重新做一次编译。（https://www.jb51.net/html5/65408.html）