Babylon.jsのチュートリアルをやってみるその3

Babylon.js

これは

昨日に引き続きbabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

線を使って色々する

昨日は基本的な図形を表示するチュートリアルでしたが、
今日は線を表示したり線を回転させてばねのようにするような内容でした。
基本的な図形はCreateLinesを使えば作れるのかと思いましたが、
スタートとエンドの位置を決めてあげないと線は作れません。

var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

↑のコードで線を作りますが、{points: myPoints}の部分でスタートエンドを定義します。 サンプルでは以下のように三点を用意して「く」のような図形を作っています。

var myPoints =[
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 1, 1),
    new BABYLON.Vector3(0, 1, 0)
];

単純に直線を作りたい場合はセットする位置を減らしてあげればOK

var myPoints =[
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 1, 1)
];

チュートリアルではらせんを作るサンプルもありました Create部分は一緒。ラジアンが登場してますね。 ループで回した分だけ線が引かれますので、10000にするとすごく長いらせんができます。

　var deltaTheta = 0.1;
    var deltaY = 0.005;

    var radius = 1;
    var theta = 0;
    var Y = 0;
    for (var i = 0; i<1000; i++) {
        myPoints.push(new BABYLON.Vector3(radius * Math.cos(theta), Y, radius * Math.sin(theta)));
        theta += deltaTheta;
        Y += deltaY
    }

今日はここまで。 明日は位置と回転、拡大縮小です。