Three.js scaleで大きさを変える

この記事を参考にして、
scale で箱の大きさを変えてみる。

https://gupuru.hatenablog.jp/entry/2013/11/30/193940

まず、同じ大きさの箱を３つ並べる。

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/650951a3-7429-94d3-042c-7fdc3c60443a.png)

#### コード
```js: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"
        }
      }
    </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(200, 200, 200);
      const material = new THREE.MeshNormalMaterial();
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);

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

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

      tick();

      // 毎フレーム時に実行されるループイベントです
      function tick() {
        box.rotation.y += 0.01; //
        box2.rotation.y += 0.01;  //
        box3.rotation.y += 0.01;  //
        
        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="yLdwoaa" data-pen-title="three.js 入門 3_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/yLdwoaa">
  three.js 入門 3_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>


# 左右の箱の大きさをscaleで変えてみる。

以下の部分だけコードに追加。

```js:box2 右側
      //scale変更
      box2.scale.x = 1.5;
      box2.scale.y = 1.5;
      box2.scale.z = 0.5;
```

```js:box3 左側
      //scale変更
      box3.scale.x = 0.2;
      box3.scale.y = 3;
      box3.scale.z = 0.1;
```

#### 結果

![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/1df1a03c-858e-f0a8-047a-aa5285d6143e.png)

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

#### コード 全体
```js: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"
        }
      }
    </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(200, 200, 200);
      const material = new THREE.MeshNormalMaterial();
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);

      // 箱2を作成
      const box2 = new THREE.Mesh(geometry, material);
      //場所を変える
      box2.position.x = 400;
      
      //scale変更
      box2.scale.x = 1.5;
      box2.scale.y = 1.5;
      box2.scale.z = 0.5;

      scene.add(box2);

      // 箱3を作成
      const box3 = new THREE.Mesh(geometry, material);
      //場所を変える
      box3.position.x = -400;

      //scale変更
      box3.scale.x = 0.2;
      box3.scale.y = 3;
      box3.scale.z = 0.1;

      scene.add(box3);

      tick();

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

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