ご挨拶
どうも。社会人１年目の若輩者です。普段はC++でアプリ開発をしているガルパンおじさんです。最終章第一話を聖地立川で観てきましたが、控えめに言って最高でした。ちなみに冷泉さん推しです。
まあ前置きはこのくらいにして本題ですが、この記事では私が最近遊んでいるWebGLについて書きたいと思います。といってもWebGLを直接いじるのは大変なので、簡単に利用できるThree.jsというJavaScriptのフレームワークを使用してブラウザ上に立方体を表示させるところまで、やろうと思います。筆者はhtml,javascript 初心者なので、いろいろとご容赦ください。
成果物
こんなの
https://tarakokutibiru.github.io/AdventCalendar2017_TUS/
Three.jsの入手
公式サイト(https://threejs.org) からdlしようとすると,とても重いのでGitHub(https://github.com/mrdoob/three.js/tree/master) からzipでdlするのがおすすめです。
実装
適当な場所に解凍したあと、htmlファイルを作りましょう。
シーンとカメラを作る。環境光とオブジェクトをつくってシーンに追加。最後に、レンダラーを作ってシーンを描画するっていう流れですね。適当なブラウザで作成したindex.htmlを開いてみてピンク色の立方体が表示されれば成功です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cube</title>
</head>
<body>
<script src="three.js/build/three.js"></script>
<script>
var main = function() {
// シーンの作成
var scene = new THREE.Scene();
// カメラの作成
var width = 600;
var height = 600;
var fov = 60;
var aspect = width / height;
var near = 1;
var far = 1000;
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 50);
// レンダラー
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
// ライトの作成
var lightColor = new THREE.Color( 1, 1, 1 );
var light = new THREE.DirectionalLight (lightColor); // 並行光
light.position.set(0, 0.7, 0.7);
scene.add(light);
// 図形の作成
var geometry = new THREE.CubeGeometry(20, 20, 20); // 四角形
var cubeColor = new THREE.Color( 1, 0.5, 1 );
var material = new THREE.MeshPhongMaterial({color: cubeColor}); // マテリアル
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.set(45,45,45);
scene.add(mesh);
// 描画
renderer.render(scene, camera);
};
window.addEventListener('DOMContentLoaded', main, false);
</script>
</body>
公開する
手軽に公開する方法はいくつかありますが、私はこちらを参考にGitHub上に公開してみました。
https://qiita.com/tonkotsuboy_com/items/f98667b89228b98bc096
最後に
本当は、「通常録音した音源をバイノーラル的に再生してみる」みたいなテーマを書こうと思ってたんですが、間に合わなかったので、Three.jsについての簡単な記事でお茶をにごしました。音をどういじると、どう聞こえるのか？みたいな実験記事を書こうと思ってたんですが、いろいろと下調べしてたら時間がなくなっちゃった感じです。これについてはまた何かの機会に記事にしたいと思います。では。ノシ