週刊 WebでMinec◯aft的なものを作る! ~第1週目~

  • 77
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

はい、どーもー(初めまして?)!大学生プログラマーの"うーぴょん(さすらいうさぎ)"です!
なんか面白いことしたいねってことで、これから何番煎じになるかわからないけど週一ペースでWeb版Minec◯aft的なものを作っていきたいと思います!一応初心者でもわかりやすいような内容になるように書いていきます!

アジェンダ的な

スケジュール・計画

完全に未定。進めながら考えていくつもり。

使う言語

  • HTML
  • CSS
  • Javascript
  • (Ruby)

余裕があったらサーバ側も実装して、ユーザとかつけてみたい

前提

必要なアプリケーションは入っているものとして進めていきます!
あと、動作環境はMac + firefoxです!(windowsはcygwinとか入れないと辛そう)
序盤はpythonでサーバを立てて動作確認するのでpythonが必須!

ここから本題

必要なファイルを準備する

STEP1 ディレクトリの準備

自分はDocumentsディレクトリにプロジェクトディレクトリを入れました。とりあえず必要なファイルを新規作成していくところまで!

ターミナル
$ cd Documents
$ mkdir project
$ cd project
$ touch index.html
$ mkdir js
$ mkdir css
$ touch js/.keep
$ touch css/.keep

お好みでREADME.md.gitignoreを入れてもよし!

STEP2 index.htmlの中にテンプレートを入れる

適当なエディタを開いてindex.htmlに最低限のhtmlを書いていく・・・(ちなみに、自分はvi派(初心者))

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Minec◯aft Web Edition</title>
</head>
<body>
</body>
</html>

一応動作確認・・・

ターミナル
$ python -m SimpleHTTPServer 8080

こうすることで簡易的なサーバが立ち上がります!(pythonの標準ライブラリ。pythonさん、えらい!)動作確認の度にこのコマンドを使います
ブラウザでlocalhost:8080にアクセスしたら真っ白な画面が出てくるはず!
サーバ止める時はCtrl + Cを押します!

ここまでできたら、最低限の準備はOK!いよいよここからが本番!

描画領域の作成

STEP1 canvasの親を準備

とりあえず、canvasを入れる要素を準備

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Minec◯aft Web Edition</title>
</head>
<body>
  <div id="canvas_wrapper"></div>
</body>
</html>

STEP2 three.jsを読み込む

続いてhttps://github.com/mrdoob/three.js/blob/dev/build/three.min.jsからthree.min.jsをダウンロードして、jsディレクトリに突っ込んでおく!
リンク切れしたらゴメンなさい・・・
three.jsは、Webで3Dなものを書き出すのに便利なライブラリです!(WebGLというものを使いやすくしています)
これをhtmlが読み込めるようにします!

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Minec◯aft Web Edition</title>
  <script src="/js/three.min.js"></script>
</head>
<body>
  <div id="canvas_wrapper"></div>
</body>
</html>

描画してみる

STEP1 必要なファイルを準備

まずは、application.jsを作成して、htmlから読み出せるようにします!これがプログラムの本体になっていく(予定)です!(あまりにもサイズが大きくなりそうなら分割もあり。)

ターミナル
$ touch js/application.js
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Minec◯aft Web Edition</title>
  <script src="/js/three.min.js"></script>
  <script src="/js/application.js"></script>
</head>
<body>
  <div id="canvas_wrapper"></div>
</body>
</html>

STEP2 描画領域を設定

とりあえず描画領域と下地(背景)を作ってみる

js/application.js
window.onload = function() {
  var renderer = new THREE.WebGLRenderer({antialias: true});//描画領域の設定・書き出し用オブジェクト

  renderer.setSize(800, 480);//描画領域の大きさ
  renderer.setClearColor(0xffffff);//背景色
  document.getElementById("canvas_wrapper").appendChild(renderer.domElement);//描画領域の書き出し
}

とりあえずここまで書いて動かすと、小さめの黒い長方形が出てくるけど気にしないこと!
まだカメラの設定をしていないため変な感じになってしまう。

STEP3 シーンを加える

three.jsではSceneというクラスに明かりや物体を突っ込んでいきます。
まずはカメラの設置から、書き出しまで。

js/application.js
window.onload = function() {
  var renderer = new THREE.WebGLRenderer({antialias: true});
  var scene = new THREE.Scene();//シーンのオブジェクト。ここに物体を突っ込んでいく。
  var camera = new THREE.PerspectiveCamera(40, 800 / 480);//カメラ(視点)。第1引数は視野。第2引数はアスペクト比(画面の幅 / 高さ)

  renderer.setSize(800, 480);
  renderer.setClearColor(0xffffff);
  document.getElementById("canvas_wrapper").appendChild(renderer.domElement);

  camera.position.set(0, 0, 0);//カメラの設置座標
  camera.lookAt(new THREE.Vector3(1, 0, 0));//カメラを向ける向き。この場合、座標(1, 0, 0)を見つめるように設定される。
  renderer.render(scene, camera);//これを実行すると、書き出しが行われる
}

さっきからカメラカメラと言っているのは、視点のこと。これを設定することで、3D空間のどこから見て、どこを見つめるかを決めることができる。
three.jsはなぜか座標設定の方法が2種類存在してしまっているので注意。(どっちでもいいわけではない)
ここまで終わると、再び真っ白な画面になっているはず。(動いているか不安なら、描画領域の背景色を変えてみると分かりやすい)
renderer.renderは画面更新のつど呼んであげること。

STEP4 立方体を置いてみる

とりあえず立方体を置いてみる。

js/application.js
window.onload = function() {
  var renderer = new THREE.WebGLRenderer({antialias: true});
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(40, 800 / 480);
  var cube = new THREE.CubeGeometry(1, 1, 1);//形を決めるオブジェクト(引数は大きさ)
  var material = new THREE.MeshPhongMaterial({color: 0x965200});//材質を決めるオブジェクト(今回は色のみ茶色に設定)
  var mesh = new THREE.Mesh(cube, material);//物体のオブジェクト

  renderer.setSize(800, 480);
  renderer.setClearColor(0xffffff);
  document.getElementById("canvas_wrapper").appendChild(renderer.domElement);

  camera.position.set(0, 0, 0);
  camera.lookAt(new THREE.Vector3(1, 0, 0));

  mesh.position.set(5, 0, 0);//物体の設置位置
  scene.add(mesh);//シーンに物体を追加

  renderer.render(scene, camera);
}

なんか色々出てきましたが、形を決めるオブジェクト(THREE.CubeGeometry。今回は直方体) + 材質を組み合わせるオブジェクト(THREE.MeshPhongMaterial)を組み合わせた、mesh(THREE.Mesh)が物体の実体です。
とりあえず、ここまで書き上げて動かすと立方体が見えるはず!だけど真っ黒・・・。
スクリーンショット 2016-09-14 14.31.31.png

立方体を茶色に設定したはずなのに、なぜ・・・?
はい、この空間にはあるものが足りていません!そのあるものを次のSTEPで足していきます!

STEP5 空間に光を!

この空間に足りないもの。それは、明かり(光)です。これがないと物体が光を跳ね返さないので、色が真っ黒になってしまいます。(その割に背景色がしっかりついてたり、物体を認識できるのはなぜ?と突っ込んではいけない)
そんなわけで光を空間に加えます。

js/application.js
window.onload = function() {
  var renderer = new THREE.WebGLRenderer({antialias: true});
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(40, 800 / 480);
  var cube = new THREE.CubeGeometry(1, 1, 1);
  var material = new THREE.MeshPhongMaterial({color: 0x965200});
  var mesh = new THREE.Mesh(cube, material);
  var light = new THREE.AmbientLight(0xffffff);//空間を均一に照らす光。引数が光の色

  renderer.setSize(800, 480);
  renderer.setClearColor(0xffffff);
  document.getElementById("canvas_wrapper").appendChild(renderer.domElement);

  camera.position.set(0, 0, 0);
  camera.lookAt(new THREE.Vector3(1, 0, 0));

  mesh.position.set(5, 0, 0);
  scene.add(mesh);

  scene.add(light);//シーンに光を追加

  renderer.render(scene, camera);
}

このTHREE.AmbientLightは、懐中電灯のようにスポット的に照らす光ではなくて、空間を均一に照らす光です。
これをシーンに追加して、動かすことで・・・、動きました!!
スクリーンショット 2016-09-14 14.37.26.png
見事な立方体(?)です!カメラの座標やら視点を適当に動かすと一応わかる。(均一な光しか加えてないから少しわかりづらい)
スクリーンショット 2016-09-14 14.47.45.png
この写真は、カメラを(0, 3, 0)において、(5, 0, 0)に向けた時のもの

まとめ

three.jsを使うと3Dオブジェクトを簡単に作成できる。
一切ノープランのこの連載は無事に完成するのか!?次週に続く・・・

おまけ

第2週目はこちらから

週刊 WebでMinec◯aft的なものを作る! ~第2週目~
jsでオブジェクト志向なコードを書いていき、今作った立方体をブロックにしていきます!