如何在不使用webgl的情况下创建一个旋转的地球，因为IE9不支持webgl

Question

我已经开发了三个旋转的地球仪，但是我现在必须在不使用webGL的情况下这样做，而且我不知道该如何制作，还有其他支持的3D语言通过Internet Explorer 9？

Answer 1

如果您正在寻找一个快速简便的解决方案而没有真正具有某种交互式地球仪，并且您不希望修改任何东西，您可以尝试一下。

您可以通过纯CSS进行。我已经使用过了。

http://codepen.io/chinchang/pen/xckus

它背后的想法是将地球的背景图像设置为圆形的div，并为x轴上的背景动画。

html：

<div id="earth"></div>

CSS：

body {
  background-color: black;
}
#earth {
  width: 100px;
    height: 100px;
    background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
    border-radius: 50%;
    background-size: 210px;
    box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
        inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 210px; }
}

这是与之一起的教程：

http://kushagragour.in/blog/2012/09/rotating-earth-using-css/

Answer 2

您实际上可以在三j中使用帆布渲染器。Canvas 2D渲染由IE9支持。

renderer = new THREE.CanvasRenderer();

它会很慢，但是会起作用。这是从三js文档中获取的示例：

function webglAvailable() {
    try {
        var canvas = document.createElement( 'canvas' );
        return !!( window.WebGLRenderingContext && (
            canvas.getContext( 'webgl' ) ||
            canvas.getContext( 'experimental-webgl' ) )
        );
    } catch ( e ) {
        return false;
    }
}
if ( webglAvailable() ) {
    renderer = new THREE.WebGLRenderer();
} else {
    renderer = new THREE.CanvasRenderer();
}

Answer 3

与Avenoir相同，除非不依赖CSS3动画：

console.clear();
document.body.innerHTML = '';
clearInterval(interval);
var imgUrl = 'http://www.noirextreme.com/digital/Earth-Color4096.jpg';
var c = document.createElement('div');
document.body.appendChild(c);
c.style['background-image'] = 'url('' + imgUrl + '')';
c.style['background-size'] = 'cover';
c.style.height = '400px';
c.style.width = '400px';
c.style['border-radius'] = '50%';
c.style['box-shadow'] = '0px 0px 100px #000000 inset';
c.style['background-position'] = '0px 0px';
var interval = setInterval(function () {
		var arr = c.style['background-position'].split(' ');
		arr[0] = arr[0].split('px');
		arr[0][0] = (parseFloat(arr[0][0]) + 0.1).toString()
		c.style['background-position'] = arr[0].join('px') + ' ' + arr[1];
	}, 1000 / 60);