みなさんこんにちは。
最近急に寒くなってきて、毎日お鍋が食べたくなる三橋です。
今日は最近話題のWebGLという技術を使って
javaScriptで３D表現に挑戦しました。
こちらの本を参考にしております。
丁寧な解説でおすすめです。
３Dに関してまったく素人な僕は
「すりーでぃー」と聞くと、MAYAというソフトなどを使って、モデリングして、
レンダリングにはかなり時間がかかって、、、、というイメージで遠い世界に感じますが、
jsで作れるいう話をきいて挑戦してみました。
1,WebGLとは
「WebGL」とは簡単に言うと、
ブラウザー上で3DCGプログラミングを実現できる技術です。
(OpenGLというグラフィックAPIのweb版らしいです)
こちらのスライドがわかりやすいです。
■WebGL and Three.js
https://www.slideshare.net/yomotsu/webgl-and-threejs
しかしこのWebGLをそのままで書くとかなりやっかいで難しいのです、、
それを書きやすくしてくれたのがThree.jsです。
webGL界のjQueryみたいな感じですね！！
今回はこのThree.jsを使って記述していきます。
■Three.js公式サイト
ブラウザでこんな表現できるんだ！と驚くサンプルもたくさんあります。
1,Three.jsをつかって挑戦
3d表現の手順は、
1、空間(シーン)の作成
<span style="line-height: 1.5em;">2、視点と範囲(カメラ)を作成
</span><span style="line-height: 1.5em;">3、表示するオブジェクトを作成
</span><span style="line-height: 1.5em;">4、ライトを追加
</span>5、制作した3d空間を表示(レンダリング)
という順次で進んできます。
５番以外は順不同です。4番は今回は割愛します。
では、早速javaScrpit をかいていきます。
１、シーン(空間)の作成
var scene = new THREE.Scene();
２、視点と範囲(カメラ)を作成
// カメラの視野角 (fov, aspect, near, far)
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
// fov 垂直方向の視野角()
// aspect 描画範囲の縦横比
// near 視点からどれだけ離れた位置から表示するか
// far 視点からどれだけ離れた位置まで表示するか
// カメラの位置設定(x, y, z)
camera.position.set(200,200,200);
３、メッシュ(物体)の作成
ジオメトリー(形状)、マテリアル(材質)を定義します。
var geometry = new THREE.SphereGeometry(); // ジオメトリー
// 引数に分割数など持たせれば、綺麗な球体にもなります
var material = new THREE.MeshNormalMaterial(); // マテリアル
sphere = new THREE.Mesh(geometry, material);
sphere.position.set(0, 0, 0); // 位置をセット
scene.add(sphere); // シーンに追加
４、表示処置(レンダラー)
var renderer = new THREE.WebGLRenderer(); //WebGLRendererをつかいます
renderer.setSize(width, height); //レンダリングするサイズをセットします
renderer.setClearColor(000000, 1); // 背景色設定します
renderer.render(scene, camera); // レンダリングします
document.getElementById('stage').appendChild(renderer.domElement); // div#stageに追加します
球体ができました！
スフィアと呼ぶらしいです。
他にもマウスで視点を変えたり
ぐるんぐるんアニメーションさせたり色々できます！
拡張して遊んでみました。
jsが扱える方は挑戦できると思うので、よかったら
遊んでみてください。
読んでくれた方ありがとうございます！
それではお互い食べ過ぎに注意しましょう！
失礼致しますー。
