Babylon.jsでいろんな形状を作ってみたい！

いろんな形状を作って遊ぶよー

公式ページから簡単なのから見ていくよー。

箱！

const box = BABYLON.MeshBuilder.CreateBox("box", {height: 1, width: 0.75, depth: 0.25});

kiyuka

便利なのでギズモで矢印も一緒に表示してるよー。方向わかりやすくていいねー。

Gizmos

const gizmoManager = new BABYLON.GizmoManager(scene);
gizmoManager.positionGizmoEnabled = true;
gizmoManager.attachToMesh(box);

kiyuka

次は球体だー

Creating A Sphere

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {});

kiyuka

パラメータ設定すると楕円もできるよー。

const sphere = BABYLON.MeshBuilder.CreateSphere(
    "sphere", { diameterX: 1, diameterY: 0.2, diameterZ: 0.5 });

kiyuka

円弧も行けるよー

const sphere = BABYLON.MeshBuilder.CreateSphere(
    "sphere", {arc: 0.25, sideOrientation: BABYLON.Mesh.DOUBLESIDE});

kiyuka

スライスもできちゃう！

const sphere = BABYLON.MeshBuilder.CreateSphere(
    "sphere", {slice: 0.4, sideOrientation: BABYLON.Mesh.DOUBLESIDE});

kiyuka

円柱です。円柱？

Creating A Cylinder

const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", { height: 2, diameter: 1 });

kiyuka

円錐ですの。頭を尖らせてるんですの。

const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {diameterTop: 0});

kiyuka

辺の数を変えると三角柱だよ！

const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {tessellation: 3});

kiyuka

円弧な円柱

const cylinder = BABYLON.MeshBuilder.CreateCylinder(
    "cylinder", {arc: 0.6, sideOrientation: BABYLON.Mesh.DOUBLESIDE});

kiyuka

ケーキだわーい

const cylinder = BABYLON.MeshBuilder.CreateCylinder(
    "cylinder", {arc: 0.1, enclose: true, height: 0.3 });

kiyuka

カプセルです？

Creating A Capsule

const capsule = new BABYLON.MeshBuilder.CreateCapsule(
    "capsule", { height: 1, radius: 0.25 }, scene)

kiyuka

全体的に四角形で下の方がとんがってる、変な形のカプセル

const capsule = new BABYLON.MeshBuilder.CreateCapsule(
    "capsule",
    {
        radius: 0.5, height: 2, tessellation: 4,
        topCapSubdivisions: 12, bottomCapSubdivisions: 1,
    });

kiyuka

カプセルくん、横になってお休み中

const capsule = new BABYLON.MeshBuilder.CreateCapsule(
    "capsule",
    {
        radius: 0.25, capSubdivisions: 6, subdivisions: 6, tessellation: 36, height: 2,
        orientation: BABYLON.Vector3.Forward()
    });

kiyuka

頭でっかちにすると気球になっちゃう、カプセルちゃん。

const capsule = new BABYLON.MeshBuilder.CreateCapsule(
    "capsule", {radius:0.5, height:10, radiusTop:4});

kiyuka

面面です(ΦωΦ)

Creating A Plane

const plane = BABYLON.MeshBuilder.CreatePlane(
    "plane", {height:2, width: 1, sideOrientation: BABYLON.Mesh.DOUBLESIDE});

kiyuka

円ですの

Creating A Disc

const disc = BABYLON.MeshBuilder.CreateDisc(
    "disc", { radius: 0.5, sideOrientation: BABYLON.Mesh.DOUBLESIDE });

kiyuka

三角形やで

const disc = BABYLON.MeshBuilder.CreateDisc(
    "disc", {tessellation: 3, radius: 0.5, sideOrientation: BABYLON.Mesh.DOUBLESIDE });

kiyuka

パックま！

const disc = BABYLON.MeshBuilder.CreateDisc(
    "disc", {tessellation: 12, arc: 5 / 6});

kiyuka

お腹の空いてくる形

Creating A Torus

const torus = BABYLON.MeshBuilder.CreateTorus("torus", { thickness: 0.5, diameter: 1 });

kiyuka

ペンタゴンなのだ

const torus = BABYLON.MeshBuilder.CreateTorus(
    "torus", { thickness: 0.25, diameter: 2, tessellation: 5 });

kiyuka

これよくわかんないけど面白い！

Creating A Torus Knot

トーラスの周りをクルクルするみたい。パラメータ変えると楽しい。

const torus = BABYLON.MeshBuilder.CreateTorus(
    "torus", { thickness: 0.5, diameter: 4 });
torus.rotation.x = Math.PI / 2

const torus_knot = BABYLON.MeshBuilder.CreateTorusKnot(
    "tk", {tube: 0.01, radialSegments: 1024, p:120, q:180});

kiyuka

地面。CreatePlane の方向違い的な。

Creating A Ground

const ground = BABYLON.MeshBuilder.CreateGround("ground", {height: 1.5, width: 2.5});

kiyuka

高さマップから地形っぽいものも作れるの

Creating Ground From a Height Map

const ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap(
    "gdhm", "textures/heightMap.png", 
    {width:5, height :5, subdivisions: 500, maxHeight: 1});

kiyuka

もじもじ。日本語はフォントを作る必要がありそう。

Creating A 3D Text object

var fontData = await (await fetch("https://assets.babylonjs.com/fonts/Droid Sans_Regular.json")).json();
var myText = BABYLON.MeshBuilder.CreateText("myText", "Hello World !! @ #$ % é", fontData, {
    size: 16,
    resolution: 64, 
    depth: 10
});

kiyuka

からふるせん

Creating Lines

const myPoints = [
    new BABYLON.Vector3(-2, -1, 0),
    new BABYLON.Vector3(0, 1, 0),
    new BABYLON.Vector3(2, -1, 0)
]
myPoints.push(myPoints[0]);

const myColors = [
    new BABYLON.Color4(1, 0, 0, 1),
    new BABYLON.Color4(0, 1, 0, 1),
    new BABYLON.Color4(0, 0, 1, 1),
    new BABYLON.Color4(1, 1, 0, 1)
]

const lines = BABYLON.MeshBuilder.CreateLines(
    "lines", {points: myPoints, colors: myColors});

// 単純に色指定するだけならこれで
// lines.color = BABYLON.Color3.Red();

kiyuka

破！線！

Creating Dashed Lines

const myPoints = [
    new BABYLON.Vector3(-2, -1, 0),
    new BABYLON.Vector3(0, 1, 0),
    new BABYLON.Vector3(2, -1, 0),
    new BABYLON.Vector3(3, 2, 0)
];

// dashSize, gapSize は長さではなくて比率。この場合だと 2：1 の長さ。
options = {
    points: myPoints,
    dashSize: 1000,
    gapSize: 500,
    dashNb: 16 // dashの数っぽい何か
}

const lines = BABYLON.MeshBuilder.CreateDashedLines("lines", options);

kiyuka

ラインシステム。システマチックなライン工です！
嘘です。複数の線を一つで管理する、みたいな感じのよう。

Creating A Line System

//Array of lines to construct linesystem
const myLines = [
    [ 	new BABYLON.Vector3(0, 0, 10),
        new BABYLON.Vector3(10, 0, 10)
    ],
    [	new BABYLON.Vector3(10, 0, 0),
        new BABYLON.Vector3(10, 10, 0),
        new BABYLON.Vector3(0, 10, 0)
    ]
];

//Create linesystem
const linesystem = BABYLON.MeshBuilder.CreateLineSystem("linesystem", {lines: myLines});

kiyuka

なんかすごいかっこいいのとかいっぱいある。これだけでしばらく遊べそう。
Creating A GreasedLine

kiyuka

りぼんちゃん
Creating Ribbons
線をいい感じに繋いで面を作っているっぽい

kiyuka

ちゅーーーーぶ

Creating Tubes

const myPath = [
        new BABYLON.Vector3(5.0, 0, 0.0),
        new BABYLON.Vector3(0, 1, 0.1),
        new BABYLON.Vector3(-4.0, 6, 0.2)
];

const tube = BABYLON.MeshBuilder.CreateTube("tube", 
    {path: myPath, radius: 0.5, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);

kiyuka

途中で半径を変えられるって！楽しい

kiyuka

プッシュプッシュ！

Extruding Shapes

const myShape = [
        new BABYLON.Vector3(0, 5, 0),
        new BABYLON.Vector3(1, 1, 0),
        new BABYLON.Vector3(5, 0, 0),
        new BABYLON.Vector3(1, -1, 0),
        new BABYLON.Vector3(0, -5, 0),
        new BABYLON.Vector3(-1, -1, 0),
        new BABYLON.Vector3(-5, 0, 0),
        new BABYLON.Vector3(-1, 1, 0)
];

const myPath = [
        new BABYLON.Vector3(0, 1, 0),
        new BABYLON.Vector3(0, 1.5, 2),
        new BABYLON.Vector3(0, 2.25, 4),
        new BABYLON.Vector3(0, 3.37, 6),
        new BABYLON.Vector3(0, 5.06, 8),
        new BABYLON.Vector3(0, 8.32, 10)
];


const extrusion = BABYLON.MeshBuilder.ExtrudeShape("star", {
    shape: myShape, closeShape: true, path: myPath, 
    cap: BABYLON.Mesh.CAP_ALL, sideOrientation: BABYLON.Mesh.DOUBLESIDE
}, scene);

kiyuka

ねじねじ

パスの位置を中心としてねじねじしているっぽい

const myShape = [
    new BABYLON.Vector3(1, 1, 0),
    new BABYLON.Vector3(0.2, 1.3, 0),
    new BABYLON.Vector3(0, 1, 0),
    new BABYLON.Vector3(-0.2, 1.3, 0),
    new BABYLON.Vector3(-1, 1, 0)
];

const myPath = [];
for(let i = 0; i < 100; i++) {
    const point = new BABYLON.Vector3(i / 5 - 10, i / 5 - 10, 0);
    myPath.push(point); 
}

const pathline = BABYLON.MeshBuilder.CreateLines("pl", {points: myPath});
pathline.color = BABYLON.Color3.Magenta();

let extrusion = BABYLON.MeshBuilder.ExtrudeShape("star", {
    shape: myShape, path: myPath, 
    scale: 0.5, 
    rotation: Math.PI / 10, 
    sideOrientation: BABYLON.Mesh.DOUBLESIDE});

これも楽しい

くるくる回るよ。回転体

const myShape = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(10, 5, 0),
    new BABYLON.Vector3(5, 10, 0),
    new BABYLON.Vector3(12, 15, 0),
    new BABYLON.Vector3(3, 20, 0)
];
const pathline = BABYLON.MeshBuilder.CreateLines("pl", {points: myShape});
pathline.color = BABYLON.Color3.Magenta();

const lathe = BABYLON.MeshBuilder.CreateLathe("lathe", {
    shape: myShape,  arc: 1,sideOrientation: BABYLON.Mesh.DOUBLESIDE});

kiyuka

ろっかくなっと

const lathe = BABYLON.MeshBuilder.CreateLathe("lathe", {
    shape: myShape, 
    radius: 2, 
    tessellation:6, 
    sideOrientation: BABYLON.Mesh.DOUBLESIDE});
lathe.convertToFlatShadedMesh();

kiyuka

穴が空くよ

Irregular Polygons

const polygon = BABYLON.MeshBuilder.CreatePolygon("polygon", {
    shape:shape, holes:holes, sideOrientation: BABYLON.Mesh.DOUBLESIDE });

kiyuka

多角形をぐぐっとプッシュ

Irregular Polygon Extrusion

const extrudedPolygon = BABYLON.MeshBuilder.ExtrudePolygon("polygon", {
    shape:shape, 
    holes:holes, 
    depth: 2, 
    sideOrientation: BABYLON.Mesh.DOUBLESIDE });

kiyuka

ぽりひぃどら

Provided Polyhedra

const shape = BABYLON.MeshBuilder.CreatePolyhedron(
    "shape" + i, {type: i, size: 3}, scene);

kiyuka

面白いの見つけた。ねじねじ。おひねり。
Lattice

kiyuka

まじまじまーじ
Merging Meshes
CSG2

kiyuka

まっがーれ

Drawing Curves

いろいろな線があるよ。べじえ。

var quadraticBezierVectors = BABYLON.Curve3.CreateQuadraticBezier(
    BABYLON.Vector3.Zero(),
    new BABYLON.Vector3(50, 30, 10),
    new BABYLON.Vector3(20, 50, 0),
    25);
var quadraticBezierCurve = BABYLON.MeshBuilder.CreateLines("qbezier", { 
    points: quadraticBezierVectors.getPoints() }, scene);

kiyuka

公式ドキュメントにある形状作るものは、一通り見れたかな？
そんなわけでCloseです。

色々作れて楽しかったですね。
細かいの含めるともっとありそうだけども。そしてそれがもっと面白そうなわけですけれども。