Three.js X,Y,Z軸や、グリッド平面を表示する。

この記事を参考に、
x,y,z軸の表示や、グリッド平面を表示してみる。

https://notetoself-dy.com/three-js-axishelper-gridhelper/

まず、前記事の、カメラアングルを変える、のコードを元に、

```html:html
<html>
  <head>
    <meta charset="utf-8" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";

      // サイズを指定
      const width = 960;
      const height = 540;

      // レンダラーを作成
      const canvasElement = document.querySelector("#myCanvas");
      const renderer = new THREE.WebGLRenderer({
        canvas: canvasElement,
      });
      renderer.setSize(width, height);

      // シーンを作成
      const scene = new THREE.Scene();

      // カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height);
      // カメラの初期座標を設定
      camera.position.set(0, 0, 1000);

      // カメラコントローラーを作成
      const controls = new OrbitControls(camera, canvasElement);

      // 形状とマテリアルからメッシュを作成します
      const mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300), new THREE.MeshNormalMaterial());
      scene.add(mesh);

      tick();

      // 毎フレーム時に実行されるループイベントです
      function tick() {
        // レンダリング
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
      }
    </script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>
```

#### CodePen で書いた
<p class="codepen" data-height="700" data-default-tab="html,result" data-slug-hash="qBzgwWo" data-pen-title="three.js 入門 2_1" data-user="vhmbdiog-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/vhmbdiog-the-flexboxer/pen/qBzgwWo">
  three.js 入門 2_1</a> by sasuke (<a href="https://codepen.io/vhmbdiog-the-flexboxer">@vhmbdiog-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 軸を追加してみる。

AxesHelperと言うヘルパーを使う。

```js:js
//軸を追加する。
      const axesHelper = new THREE.AxesHelper( 1000 );
      scene.add( axesHelper );
```      
AxesHelperのコンストラクタの引数は線のサイズ。

![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/d1ca5102-0e5c-684a-e5c9-5d1f0f8f610b.png)

X軸が赤、Y軸が緑、Z軸が青、とのこと。

#### CodePen で書いた
<p class="codepen" data-height="700" data-default-tab="html,result" data-slug-hash="dyxRvjr" data-pen-title="three.js 入門 4_1" data-user="vhmbdiog-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/vhmbdiog-the-flexboxer/pen/dyxRvjr">
  three.js 入門 4_1</a> by sasuke (<a href="https://codepen.io/vhmbdiog-the-flexboxer">@vhmbdiog-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# グリッド平面を追加してみる。

GridHelperというヘルパーを使う。

```js:js
      //グリッドを追加する。
      const gridHelper = new THREE.GridHelper(2000, 50, 0xffff00) 
      scene.add(gridHelper);
```     

引数は、
<B> GridHelper (サイズ、分割数、colorCenterLine、colorGrid) </B>
とのこと。

（colorCenterLineのデフォルト色が暗めでわかりにくいので黄色（0xffff00）にしてある。）

![8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/f36662ae-3a06-b5be-2f66-03f71d18e734.png)

## 注意点
GridHelper　の第1引数のサイズが、箱の大きさよりも小さいと、グリッドが見えないので注意！

#### グリッドサイズ80のとき。
![9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/0d8dbdfb-8566-ae05-4a9d-b1e008196f2b.png)

はじめ、コードが間違っているのかと焦りましたが、グリッドのサイズが小さくて箱に隠れていただけでした。
(箱の大きさは300,300,300)

#### グリッドサイズ700のとき。

![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/397f17bc-392e-c43f-b5a2-b0c7b7a29d13.png)

#### グリッドサイズ2000のとき。

![12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/e23a4e4d-3331-e5f6-e581-a19aa5327bd5.png)

#### CodePen で書いた
<p class="codepen" data-height="700" data-default-tab="html,result" data-slug-hash="dyxRvBB" data-pen-title="three.js 入門 4_2" data-user="vhmbdiog-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/vhmbdiog-the-flexboxer/pen/dyxRvBB">
  three.js 入門 4_2</a> by sasuke (<a href="https://codepen.io/vhmbdiog-the-flexboxer">@vhmbdiog-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>