IE9はwebglをサポートしていないので、webglを使わずに回転する地球儀を作るには

Question

私はthreejsで回転する地球儀を開発しましたが、今はwebglを使わずにやる必要があります。 Internet Explorer 9でサポートされている他の3D言語がありますか？

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

実際にThreeJSでキャンバスレンダラーを使用することができます。キャンバスの2DレンダリングはIE9からサポートされています。

renderer = new THREE.CanvasRenderer(); 

遅くなるが、うまくいく。ここでは例がThreeJS docsから取られる：Avenoirとして

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アニメーションに頼らない以外：

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() { 
 
\t \t var arr = c.style['background-position'].split(' '); 
 
\t \t arr[0] = arr[0].split('px'); 
 
\t \t arr[0][0] = (parseFloat(arr[0][0]) + 0.1).toString() 
 
\t \t c.style['background-position'] = arr[0].join('px') + ' ' + arr[1]; 
 
\t }, 1000/60);