はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

babylon.js ステップ2 いろいろなプリミティブを表示

早速いきます

BABYLON.MeshBuilderを使っていろいろ作っていきます

Three.jsならジオメトリを作って、マテリアルを設定してメッシュを作るのですが、babylonは一行です。

球体

f:id:hollywis:20200619140955p:plain

  // Add and manipulate meshes in the scene
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameterX: 1, diameterY: 0.75, diameterZ: 0.25}, scene);

diameterとは直径のことです。x,y,x好きなサイズに出来ます

Babylon.js Playground

f:id:hollywis:20200619141013p:plain

    // Add and manipulate meshes in the scene
    var box = BABYLON.MeshBuilder.CreateBox("box", {height: 1, width: 0.75, depth: 0.25}, scene);

height高さ, width横幅, depth奥行きを設定出来ます

https://www.babylonjs-playground.com/#K6M44R

Plane平面

f:id:hollywis:20200619141024p:plain

       // Add and manipulate meshes in the scene
    var plane = BABYLON.MeshBuilder.CreatePlane("plane", {height:2, width: 1}, scene);

箱の奥行きないバージョンですね


www.babylonjs-playground.com

地面Ground

Three.jsには無いプリミティブ

f:id:hollywis:20200619141230p:plain

    // Add and manipulate meshes in the scene
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {height: 1.5, width: 2.5, subdivisions: 4}, scene);

subdivisionsとはsquare(正方形)の数です。これは4個ですね

Babylon.js Playground

まとめ

プリミティブには球体、箱、平面、そして地面がありました。

どれも1行でシーンに追加出来て、Three.jsよりシンプルです。

Three.jsには無かった、地面Groundが気になる所です

次回は、その他の数学的な形状です

hollywis.hatenablog.com