D3: How to 'rotate' background texture along with the projection

41 Views Asked by At

I am building a spinning globe with D3 with a image texture. I have built the globe and spinning it using

    this.projection = d3.geoOrthographic()
                        .fitExtent([[this.inset, this.inset], 
                                   [this.width - this.inset, this.height - this.inset]], 
                                   this.outline);
    this.path = d3.geoPath(this.projection, this.context);
    this.projection.rotate([this.options.speed * performance.now(), -15]);
    while(true){
        this.context.save();
        this.context.beginPath();
        this.projection.precision(0);
        this.path(this.land_geo);
        this.context.fillStyle = this.landTexture;
        this.context.fillStyle="DarkSeaGreen";
        this.context.fill();
        this.context.restore();
}

While the texture is shown and the globe spins, it looks more like the texture is a static background and the globe is like a looking glass. How can I make the texture shift along with the globe?

Spinning Globe

0

There are 0 best solutions below