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

时间:2016-08-14 13:45:59

标签: javascript canvas d3.js svg three.js

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

0 个答案:

没有答案