Three.js カメラアングルを変える

このページを参考にカメラアングルを変えてみる。

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

> Three.jsにはカメラの動きを自動的に制御する OrbitControls クラスが存在します。
>
>次の用途で役立つ機能です。
>
> * 周回軌道を描くように、カメラを配置する
> * ポインター操作でカメラの配置やアングルを変更する

この<B>「ポインター操作でカメラの配置やアングルを変更する」</b>をやりたい。

サンプルを確認してみる。

サンプルの再生ページ
https://ics-creative.github.io/tutorial-three/samples/camera_orbitcontrols_basic.html

サンプルのソース
https://github.com/ics-creative/tutorial-three/blob/main/samples/camera_orbitcontrols_basic.html

サンプルの再生ページでは、
マウスのポインターで、グリグリ箱を動かせる。

![8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/4001126d-f7fd-6124-015c-c204284fc8da.png)

![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/6442b186-918a-24fc-d6d1-8f154161ead6.png)

![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/7966f140-f248-2871-bb1e-755dec4dd723.png)

#### 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>

マウスでグリグリ触っていると、どうも、カメラアングルが変わっているというよりも、マウスで箱を動かしている感じがしてしまう。

# 複数の箱を置いてみる

次は、沢山箱を置いたらどうなるのか、やってみた。

元のコードは、箱一個だけでしたが、何個も箱を置くようにしてみました。

箱追加の部分を以下のようにしました。

```js:html
      // 形状とマテリアルからメッシュを作成します
      const geometry = new THREE.BoxGeometry(200, 200, 200);
      const material = new THREE.MeshNormalMaterial();
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
      
      const box2 = new THREE.Mesh(geometry, material);
      //場所を変える
      box2.position.x = 400;
      box2.position.z = 400;
      scene.add(box2);

      const box3 = new THREE.Mesh(geometry, material);      
      box3.position.z = -1000;
      scene.add(box3);

      const box4 = new THREE.Mesh(geometry, material);      
      box4.position.z = 400;
      scene.add(box4);

      const box5 = new THREE.Mesh(geometry, material);      
      box5.position.x = -400;
      scene.add(box5);
      
      const box6 = new THREE.Mesh(geometry, material);      
      box6.position.x = -400;      
      box6.position.z = 400;
      scene.add(box6);

      const box7 = new THREE.Mesh(geometry, material);      
      box7.position.x = 400;      
      box7.position.z = -1000;
      scene.add(box7);
```

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

![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/ec46431f-be09-74f0-a1b0-ac1e4bd8415f.png)

動かすとこうなる。

![6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/1f0574a0-e7b9-860b-f189-60abae38f1b5.png)

下から見ると、こんな感じ。

![9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/7aea4a18-170f-940e-9cc4-fdc622f3c4ef.png)

箱が一個の時は、カメラアングルが変わっているというよりも、箱自体をくるくる回転させてる感がありましたが、
箱を複数にすると、カメラアングルが変わってる感が出た気がします。

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

ソース全体はこんな感じ。
```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 geometry = new THREE.BoxGeometry(200, 200, 200);
      const material = new THREE.MeshNormalMaterial();
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      const box2 = new THREE.Mesh(geometry, material);
      //場所を変える
      box2.position.x = 400;
      box2.position.z = 400;
      scene.add(box2);

      const box3 = new THREE.Mesh(geometry, material);      
      box3.position.z = -1000;
      scene.add(box3);

      const box4 = new THREE.Mesh(geometry, material);      
      box4.position.z = 400;
      scene.add(box4);

      const box5 = new THREE.Mesh(geometry, material);      
      box5.position.x = -400;
      scene.add(box5);
      
      const box6 = new THREE.Mesh(geometry, material);      
      box6.position.x = -400;      
      box6.position.z = 400;
      scene.add(box6);

      const box7 = new THREE.Mesh(geometry, material);      
      box7.position.x = 400;      
      box7.position.z = -1000;
      scene.add(box7);

      tick();

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