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

Question

我已经用三个is开发了一个旋转的地球，但我现在不能使用webgl，我也不知道如何制作它，还有其他的3D语言是由internet explorer 9支持的吗？

Answer 1

如果你正在寻找一个快速和简单的解决方案，而不是真的有某种类型的交互式globe，并且你不希望修改任何东西，你可以尝试这个。

你可以通过纯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

你可以在ThreeJS中实际使用画布渲染器。IE9支持Canvas 2D渲染。

renderer = new THREE.CanvasRenderer();

它会很慢，但它会起作用的。下面是取自ThreeJS docs的一个示例

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

除了不依赖于CSS3动画之外，与Avenoir相同：

​

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);

​