Three.jsに入門

とりあえず、このサイトを見て勉強。

https://ics.media/tutorial-three/quickstart/

> まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。

と言うので、とりあえず、下記コードを貼り付けて実行.

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

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

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

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

      // カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height);
      camera.position.set(0, 0, +1000);

      // 箱を作成
      const geometry = new THREE.BoxGeometry(400, 400, 400);
      const material = new THREE.MeshNormalMaterial();
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);

      tick();

      // 毎フレーム時に実行されるループイベントです
      function tick() {
        box.rotation.y += 0.01;
        renderer.render(scene, camera); // レンダリング

        requestAnimationFrame(tick);
      }
    </script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>
```

実行環境は、Vue.js 勉強の時に用意してた、VS Code に Live Server という拡張機能を入れたもの。

https://ics.media/entry/18544/#4.-live-server

実行すると、こんな画面表示になった。

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/fce3c59e-3b27-69aa-7d4a-b840ffd2781b.png)

平面のスクリーンショットだとわかりにくいですが、この箱は（自動的に）横回転しています。

![1_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/f6149262-6a8c-5095-d358-df777a5cf113.png)

##### (追記) CodePen で書いた
<p class="codepen" data-height="700" data-default-tab="html,result" data-slug-hash="jOjKpXQ" data-pen-title="three.js 入門1_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/jOjKpXQ">
  three.js 入門1_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>



# その２
サンプルのこの辺のソースをいじってこの箱を複数個にしてみた。

```js:html
      // 箱を作成
      const geometry = new THREE.BoxGeometry(400, 400, 400);
      const material = new THREE.MeshNormalMaterial();
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);

      // 箱2を作成
      const geometry2 = new THREE.BoxGeometry(200, 200, 200);
      const box2 = new THREE.Mesh(geometry2, material);
      //場所を変える
      box2.position.x = 400;
      box2.position.z = 400;
      scene.add(box2);

      // 箱3を作成
      const geometry3 = new THREE.BoxGeometry(100, 100, 100);
      const box3 = new THREE.Mesh(geometry2, material);
      //場所を変える
      box3.position.x = -600;
      box3.position.z = -400;
      scene.add(box3);

      tick();

      // 毎フレーム時に実行されるループイベントです
      function tick() {
        box.rotation.y += 0.01; //y回転
        box2.rotation.z += 0.01;  //z回転
        box3.rotation.x += 0.01;  //x回転
        
        renderer.render(scene, camera); // レンダリング

        requestAnimationFrame(tick);
      }
```

画面表示はこうなりました。

・箱を増やす。
・位置を重ならないようにずらす。

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/61e1636a-281d-da62-e87c-e6aa7cb225b2.png)

また、回転の軸もそれぞれ別の軸にしています。

```js:html
      // 毎フレーム時に実行されるループイベントです
      function tick() {
        box.rotation.y += 0.01; //y回転
        box2.rotation.z += 0.01;  //z回転
        box3.rotation.x += 0.01;  //x回転
```

![2_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/7cd00753-bd4c-3c3b-5341-1a62fb470e87.png)

箱は少しずつ回転してます。

![2_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/246a1c1a-6dff-a2ac-7271-a1b14f24564d.png)

##### (追記) CodePen で書いた
<p class="codepen" data-height="700" data-default-tab="html,result" data-slug-hash="WNqyKdJ" data-pen-title="three.js 入門1_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/WNqyKdJ">
  three.js 入門1_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>