babylon.jsチュートリアル３ - Parametric Shapes

babylon.jsのチュートリアルを学習していきます。
https://doc.babylonjs.com/babylon101/parametric_shapes

Parametric Shapes

線の書き方を見ていきます。パラメトリック形状というのは、パラメータや数学データよって作られるメッシュで、線、リボン、チューブとかいろいろあるのだが、チュートリアルでは線の描き方だけやりましょうか。みたいな説明が書いてあると思う。

Lines

配列で点を指定して、BABYLON.MeshBuilder.CreateLinesで点を結ぶ線を描きます。

  // line生成
  var myPoints = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 1, 1),
    new BABYLON.Vector3(0, 1, 0),
    new BABYLON.Vector3(1, 1, 1)    
  ];
  
  var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

See the Pen babylon101 Parametric Shapes Lines by nobuyuki ishii (@nobuyuki-ishii) on CodePen.

spiral, dashed line

らせんを描きます。点の集合なので、描き方は1コ前の線と同じですが、BABYLON.MeshBuilder.CreateDashedLinesを使って、破線にしました。
パラメータdashNbに破線のダッシュの数を指定。

  // らせん生成
  var myPoints = [];

  var deltaTheta = 0.1;
  var deltaY = 0.005;

  var radius = 1;
  var theta = 0;
  var Y = 0;
  for (var i = 0; i<400; i++) {
    myPoints.push(new BABYLON.Vector3(radius * Math.cos(theta), Y, radius * Math.sin(theta)));
    theta += deltaTheta;
    Y += deltaY
  }
	
	// 破線でらせん
	var lines = BABYLON.MeshBuilder.CreateDashedLines("lines", {points: myPoints, dashNb:400}, scene); 

See the Pen babylon101 Parametric Shapes Dashed Lines spiral by nobuyuki ishii (@nobuyuki-ishii) on CodePen.

updatable, instance

updatableは更新を許可するオプション。これをtrueに設定し、別途、作成するメッシュのinstanceオプションに以前に作成したメッシュを指定すると書き換えができる。instanceに指定するのは、最初にCreateLinesしたときの戻り値lines。
updatableがfalseだと、更新できず、何も変化しない。instanceを指定しないと上書きにならないので、別のメッシュとして追加される。

  // line生成
  var myPoints = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 1, 1),
    new BABYLON.Vector3(0, 1, 0)
  ];
  
  var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints, updatable: true}, scene);
  
  // line更新
  var newPoints = [
    new BABYLON.Vector3(1, 1, 1),
    new BABYLON.Vector3(1, 1, 0),
    new BABYLON.Vector3(0, 1, 1)
  ];
  
  lines = BABYLON.MeshBuilder.CreateLines("lines", {points: newPoints, instance: lines}, scene);

See the Pen babylon101 Parametric Shapes option updatable and instance by nobuyuki ishii (@nobuyuki-ishii) on CodePen.