我一直关注这里的教程:http://www.delimited.io/blog/2015/5/16/interactive-webgl-globes-with-threejs-and-d3
此示例使用Canvas元素,然后将其作为纹理包装到THREE 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");