3d-force-graph笔记(4)：canvas纹理材质

2021-04-08

3d-force-graph使用ThreeJS / WebGL进行3D渲染，THREEJS可以用canvas texture创建材质，canvas中自定义图形、文字等，十分便捷。

/** 创建自定义canvas */
function createTexture() {
	var canvas = document.createElement( 'canvas' );
	canvas.width = 100;
	canvas.height = 100;
	var ctx = canvas.getContext('2d');
	ctx.beginPath(); 
	ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI); 
	// ctx.fillStyle=circleColor;
	ctx.fill();
	ctx.strokeStyle = '#5e89cd';
	// ctx.lineWidth = 3;
	ctx.stroke();
	return canvas;
}		

.nodeThreeObject(node => {
	var canvasTexture = new THREE.Texture( createTexture() );
	canvasTexture.needsUpdate = true; // 非常重要
	const material = new THREE.SpriteMaterial({ map: canvasTexture });
	const sprite = new THREE.Sprite(material);
	sprite.scale.set(11, 11);
	return sprite;
});

示例中创建一个圆形canvas，用之生成材质THREE.SpriteMaterial，关系网中节点对象由精灵sprite代替。

nodeThreeObject – 节点对象访问器函数或属性，用于生成自定义3d对象以呈现为节点。返回值为一个ThreeJS Object3d的实例。如果返回false，则该节点将使用默认的3d对象类型。

3d-force-graph笔记