我一直在关注这里的教程: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)