Three.js - 在 SphereGeometry 上使用 SVG 纹理?

Ace*_*son 5 javascript svg canvas three.js d3.js

我一直在关注这里的教程:http : //www.delimited.io/blog/2015/5/16/interactive-webgl-globes-with-threejs-and-d3

此示例使用 Canvas 元素,然后将其作为纹理包装到三个 SphereGeometry 中。我对线条渲染的模糊程度不满意,所以选择渲染为 SVG。SVG 路径数据由 D3 和 topojson 构建。

我的问题是:我可以将此 SVG 数据转换为 SphereGeometry 纹理吗?我希望能够缩放并保留最终对象的细节 - 如果有办法用画布做到这一点,我也会感兴趣。

这是我绘制 SVG 的代码;

var width = 1024,
    height = 512;

var projection = d3.geo.equirectangular()
     .scale(163)
     .translate([width / 2, height / 2]);

var path = d3.geo.path()
     .projection(projection);

var svg = d3.select("body").append("svg")
     .attr("width", width)
     .attr("height", height);

d3.json("data/world.json", function(err, data) {
svg.append("path")
     .datum(topojson.feature(data,data.objects.countries))
     .attr("d", path)
     .attr("class", "countries");
Run Code Online (Sandbox Code Playgroud)