【threejs】如何使用canvas Texture实现材质

在学习threejs中，肯定避免不了要设置模具的材质，比如说要给一个box加颜色、图片或者视频画面；

大家可以看以下代码

new THREE.MeshBasicMaterial({color: Math.random() * 0xffffff}); // 颜色

new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('./assets/plane.jpeg') } ); // 图片

new THREE.VideoTexture(document.getElementId('video')); // 视频

其实这些功能对我来说已经够用了，后来发现也可以用canvas的渲染作为材质，为了做demo方便自己包装了下 

var createCanvas = function (w,h) {
		w = w || 30;
		h = h || 30
		var cs = document.createElement('canvas')
		var ctx = cs.getContext('2d');
		cs.width = w;
		cs.height = h;
		ctx.fillStyle ="#fff";
		ctx.fillRect(0,0,w,h);
		ctx.strokeStyle = "#c00";
		ctx.shadowBlur = 20;
		ctx.shadowColor = "#c99";
		ctx.strokeWidth = 30;
		ctx.beginPath();
		ctx.moveTo(w/2, 0);
		ctx.lineTo(0,h);
		ctx.lineTo(w, h);
		ctx.closePath()
		ctx.stroke();
		return cs;
	}

var texture = new THREE.Texture(createCanvas(130,130)) 
var material = new THREE.MeshBasicMaterial({
	   map: texture
	})

附上 http://works.ibeeger.com/jsPluts/learning-threejs/material/texture.html 和图片

其实很简单，不过实践过后加深印象吧