LoginSignup
0
0
@sasuke_sssin株式会社テクノフェイス

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

Posted at

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

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

1.PNG

コード

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

See the Pen three.js 入門 3_1 by sasuke (@vhmbdiog-the-flexboxer) on CodePen.

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

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

box2 右側
      //scale変更
      box2.scale.x = 1.5;
      box2.scale.y = 1.5;
      box2.scale.z = 0.5;
box3 左側
      //scale変更
      box3.scale.x = 0.2;
      box3.scale.y = 3;
      box3.scale.z = 0.1;

結果

4.PNG

CodePen

See the Pen three.js 入門 3_2 by sasuke (@vhmbdiog-the-flexboxer) on CodePen.

コード 全体

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0