CX's JavaScript Diary

 | 

2013-06-27HTA(HTML Application)で WebGL を使う方法 このエントリーを含むブックマーク

cx2020130627

IE11 から WebGL の機能が追加されたようです。せっかくなので、HTA から使ってみました。

使用方法は、前回の HTA で Canvas を使用する方法と同じで、互換モード(X-UA-Compatible)を明示的に「IE=edge」(最新)と指定することで、WebGL が使えるようになります。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

以下は HTA より three.js ライブラリを使用した WebGL のサンプルになります。

<!DOCTYPE HTML>
<html>
<head>
<title>Hello, WebGL World!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="three.js"></script>
</head>
<body>
<script type="text/javascript">
var X_MAX = 640;
var Y_MAX = 480;
var R = 100;          // 半径
var X_SEGMENTS = 12;  // 経度分割数
var Y_SEGMENTS = 12;  // 緯度分割数
window.resizeTo(X_MAX+40, Y_MAX+60);

// レンダラー準備
var renderer = new THREE.WebGLRenderer();
renderer.setSize(X_MAX, Y_MAX);
document.body.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>
</body>
</html>
 |