Babylonjsで遊んでみた

Babylonjsとは

強力で美しく、シンプルな、完全にオープンソースの Web レンダリング エンジン

Babylon.js ドキュメントより

特徴

１. エコシステムが充実している

• ローカル環境なしでBabylonjsに触れられるplayground
• ネイティブアプリ対応のBabylonNativeやAR拡張のBabylonAR
• 充実のアセットBabylonJS/Assets

2. Typescriptのサポート

• 型定義が同梱されているため、スタブを別で管理する必要がない。@types/babylonjs

基本的な書き方

chromeでは動かないかもしれないです。その時はEdgeでご覧ください。

See the Pen Untitled by チロ (@lapinChiro) on CodePen.

javascript部分の基本

function main () {
  /**
   * canvas要素を取得
   */
  const canvas = document.getElementById( 'renderCanvas' );
  
  /**
   * WebGLをjavascriptから扱うためのエンジンを初期化
   */
  const engine = new BABYLON.Engine( canvas );
  
  /**
   * カメラ、ライト、メッシュの入ったシーンを作成する
   */
  const buildScene = () => {
    /**
     * シーン自体の初期化。この中に物体を詰め込んでいく
     */
    const scene = new BABYLON.Scene(engine);
    
    /**
     * カメラの初期化
     */
    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
    
    camera.attachControl(canvas, true);
    
    /**
     * ライトの初期化
     */
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    
    /**
     * 物体の初期化。今回はただの立方体
     */
    const box = BABYLON.MeshBuilder.CreateBox( "box", {}, scene );
    
    return scene;
  }
  
  const scene = buildScene();
  
  /**
   * エンジンを動かして、カメラ、ライト、メッシュの入ったシーンをレンダリングする
   */
  engine.runRenderLoop( () =>
  {
    scene.render();
  });
  
  window.addEventListener('resize', () => {
    engine.resize();
  });
}

window.addEventListener('DOMContentLoaded', main);

reactに組み込んでみた