前回の記事は、DragControls を使って、物体をドラッグしましたが、

DragControls を使ったこのやり方だと、物体を平面的に移動させることしかできない。
奥行きの方向にはドラッグできない。

奥行きの方向にも移動させたいと思って調べていたら、
TransformControlsを使えばできるらしいと分かった。

TransformControlsだけだと、カメラの視点移動ができないので、
OrbitControlsも使っています。
(視点移動できないと、物体位置を把握しにくいので、カメラ視点移動も使えるようにします)

また、奥方向に移動したかどうか、わかりやすくするために、
軸AxesHelperとグリッドGridHelperも表示させています。
（動かない基準が何も無いと、物体がどこに動いたのかわからなくなるので）

上記の記事を参考に、TransformControls、OrbitControlsを設定。

コード

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";
      import { TransformControls } from "three/addons/controls/TransformControls.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, 1, 3000);
      // カメラの初期座標を設定
      camera.position.set(500, 1000, 1500);

      // カメラコントローラーを作成
      const orbitControls = new OrbitControls(camera, canvasElement);
      orbitControls.update();
      orbitControls.addEventListener('change', tick);

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

      // TransformControls　コントローラーを作成
      const transControls = new TransformControls(camera, canvasElement);
      transControls.addEventListener('change', tick);
      transControls.attach(mesh);

      //軸を追加する。
      const axesHelper = new THREE.AxesHelper( 1000 );
      scene.add( axesHelper );

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

      transControls.addEventListener('dragging-changed', event => {
        orbitControls.enabled = !event.value;
      });
      scene.add(transControls);
      setShotrCutKey();
      tick();

      function setShotrCutKey() {
        window.addEventListener('keydown', event => {
          switch (event.keyCode) {
            case 87: // W = translate
              transControls.setMode('translate');
              break;
            case 69: // E = rotate
              transControls.setMode('rotate');
              break;
            case 82: // R = scale
              transControls.setMode('scale');
              break;
          }
        });
      }

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

初期画面表示

箱に矢印のUI（x, y, z方向）が表示されています。
x, y, z の矢印にカーソルをあわせてからドラッグすると
それぞれの方向に移動できます。

移動

1. 左から右に移動

2. 奥から手前に移動

3. 右から真ん中に移動

4. 垂直に上に移動

回転

TransformControlsを使えば、移動だけでなく、回転もできる。

キーボードで、E を押すと、UIのガイドが、円に変化し、回転させることができる。

拡大縮小

Rを押すと、また、ガイドが変わり、

(ある方向について)、縮めたり、

(ある方向について)、伸ばしたりできます。

CodePenで書いた

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