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

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

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

# Lines

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

```js
  // 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);
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="nobuyuki-ishii" data-slug-hash="qBZXQvJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="babylon101 Parametric Shapes Lines">
  <span>See the Pen <a href="https://codepen.io/nobuyuki-ishii/pen/qBZXQvJ">
  babylon101 Parametric Shapes Lines</a> by nobuyuki ishii (<a href="https://codepen.io/nobuyuki-ishii">@nobuyuki-ishii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

```js
  // らせん生成
  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); 
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="nobuyuki-ishii" data-slug-hash="abNyPOa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="babylon101 Parametric Shapes Dashed Lines spiral">
  <span>See the Pen <a href="https://codepen.io/nobuyuki-ishii/pen/abNyPOa">
  babylon101 Parametric Shapes Dashed Lines spiral</a> by nobuyuki ishii (<a href="https://codepen.io/nobuyuki-ishii">@nobuyuki-ishii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

```js
  // 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);
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="nobuyuki-ishii" data-slug-hash="mdPMaOJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="babylon101 Parametric Shapes option updatable and instance">
  <span>See the Pen <a href="https://codepen.io/nobuyuki-ishii/pen/mdPMaOJ">
  babylon101 Parametric Shapes option updatable and instance</a> by nobuyuki ishii (<a href="https://codepen.io/nobuyuki-ishii">@nobuyuki-ishii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>