0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

babylon.jsチュートリアル1 - First Steps

babylon.jsのチュートリアルを学習していきます。

babylon.jsとは

https://www.babylonjs.com/
webで動作する3Dレンダリングエンジンで、three.jsのようにwebglを容易に扱うことのできるライブラリです。

First Steps

https://doc.babylonjs.com/babylon101/first
球体を表示するサンプルから、仕組みを理解します。

See the Pen babylon101 first step by nobuyuki ishii (@nobuyuki-ishii) on CodePen.

html

描画領域をcanvasで定義し、ライブラリを読み込む。cdn有。

<!-- babylon.jsの描画領域 -->
<canvas id="renderCanvas" touch-action="none"></canvas>

<!-- babylon.js本体 -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- .glTF, .obj, .stlファイルを読み込み可能にするライブラリ -->
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- ポインタイベントの各種ブラウザ対応 -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

js

以下の流れで描画。
1.エンジン生成
2.シーン生成
3.シーンに設定(カメラ、光)追加
4.シーンに図形追加

カメラと光を設定していますが、カメラがないと見えないし、光がないと立体感がでないので、これらは必須の処理になるものと思います。また、最後のレンダー、リサイズ処理もないと正しい表示ができないので必須。
bayblon.js playgroundというサンプルを閲覧、改変できるweb上のエディタでは、createScene関数だけ定義すれば、動作するようになっています。エンジン、レンダー、リサイズといった処理は裏側でやってくれているようです。といったところからも、これらは必須と云えるものと理解しました。
https://playground.babylonjs.com/

var canvas = document.getElementById("renderCanvas");
// エンジン生成
var engine = new BABYLON.Engine(canvas, true);

var createScene = function() {
  // シーン生成
  var scene = new BABYLON.Scene(engine);

  // カメラ追加
  // カメラがないと何も見えない
  var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
  // カメラを操作可能とする
  camera.attachControl(canvas, true);

  // 光設定
  // 光がないと、立体感がでない
  var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
  var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

  // 球追加
  var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);

  return scene;
};

// シーン作成
var scene = createScene();

// シーンを繰り返しレンダリング
// これがないと、図形が描画されない
engine.runRenderLoop(function () {
  scene.render();
});

// サイズ変更時にリサイズ
// これがないと、ウィンドウサイズを変更したときに状態が保持されない
window.addEventListener("resize", function () {
  engine.resize();
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?