three.js 添加svg贴图问题

因为需要在three.js创建的平面上添加图片，我运用了创建新的平面添加贴图的方式，jpg和png都可以实现，但是项目需要用svg图片，请问怎样添加svg贴图呢？

查看完整描述

1 回答

qq_非诚勿扰_3

TA贡献37条经验获得超16个赞

可以试试将svg转成图片格式再用于贴图，用js可以实现转化

反对回复 2016-10-21

唐叔叔
我用了canvg，可以把svg转成canvas再贴图，但是没效果，可能是我用法不对，你用过这个吗？

回复 2016-10-26
qq_非诚勿扰_3
转化成canvas之后应该还需要一个canvas -> 图片的过程，这里有一个canvas转图片的函数，返回值是一个url，将这个url作为加载贴图的路径即可 function makeImage(str,width) { width = width || 450; var canvas = document.createElement("canvas"); document.body.appendChild(canvas); canvas.width = width; canvas.height = width; var ctx = canvas.getContext("2d"); var strLenght = str.length; var start = 0, startX = 10, startY = 30, hasLine = true, lines = 1; while (hasLine) { while (startX < (width-17)) { var chart = str.substring(start, start + 1).split(" "); chart = unique(chart).join(""); if (/^[a-zA-Z\d]$/.test(chart)) { startX = startX + 8; } else if (!chart) { startX = startX + 6; } else if (/^[,\.;'\?!:`~&-_\/\\]$/.test(chart)) { startX = startX + 6; } else { startX = startX + 17; } start++; if (start > strLenght) { hasLine = false; break; } } startX = 10; startY = startY + 20; lines++; } canvas.height = (lines+1) * 20; start = 0; startX = 10; startY = 30; hasLine = true;

回复 2016-10-26
qq_非诚勿扰_3
while (hasLine) { while (startX < (width-17)) { var chart = str.substring(start, start + 1).split(" "); chart = unique(chart).join(""); ctx.font = "16px 宋体"; ctx.fillText(chart, startX, startY); if (/^[a-zA-Z\d]$/.test(chart)) { startX = startX + 8; } else if (!chart) { startX = startX + 6; } else if (/^[,\.;'\?!:`~&-_\/\\]$/.test(chart)) { startX = startX + 6; } else { startX = startX + 17; } start++; if (start > strLenght) { hasLine = false; break; } } startX = 10; startY = startY + 20; } ctx.font = "bold 16px arial"; ctx.textAlign = 'right'; ctx.fillText(width, startY+5); var dataurl = canvas.toDataURL('image/png'); return dataurl; function unique(data){ data = data || []; var a = {}; for (var i=0; i<data.length; i++) { var v = data[i]; if (typeof(a[v]) == ''){ a[v] = 1; } }; data.length=0; for (var i in a){ data[data.length] = i; } return data; } }

回复 2016-10-26

点击展开后面1条

热搜

最近搜索清空

three.js 添加svg贴图问题

three.js 添加svg贴图问题

1 回答

添加回答