はてなブログで JavaScript を使ってみるテスト（その３）

はてなブログで HTML5 + WebGL（Three.js）を使ってみるテスト。

IE11 であれば WebGL が使えるはずですが、はてなブログの内部で、以下のIE互換モードが指定がされている為に、表示してくれないようです。。。

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9; IE=10" />

ソース

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<div id="world-20130911-002"></div>
<script type="text/javascript">
var X_MAX = 440;
var Y_MAX = 440;
var R = 100;          // 半径
var X_SEGMENTS = 12;  // 経度分割数
var Y_SEGMENTS = 12;  // 緯度分割数

// レンダラー準備
var renderer = new THREE.WebGLRenderer();
renderer.setSize(X_MAX, Y_MAX);
document.getElementById("world-20130911-002").appendChild(renderer.domElement);

// カメラ準備
var camera = new THREE.PerspectiveCamera(45, X_MAX / Y_MAX, 1, 1000);
camera.position.z = 300;

// シーン（空間）準備
var scene = new THREE.Scene();

// オブジェクトの形状設定
var geometry = new THREE.SphereGeometry(R, X_SEGMENTS, Y_SEGMENTS);
var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh(geometry, material);
sphere.overdraw = true;

// シーン（空間）にオブジェクトを追加
scene.add(sphere);

// レンダラーにシーンとカメラを設定しオブジェクトを描画
renderer.render(scene, camera);
</script>

実行結果

追記

2014.04.13 時点で確認したところ、いつの間にか、「IE=11」が追加されていたようです。

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9; IE=10; IE=11" />