【入門】Three.jsで3Dオブジェクトを作り、カメラをマウス操作できるようにした。

こんにちは、たかです。

本業と育児の合間でプログラミングを学習しています。

3Dアニメーションを学ぼうと思って、Three.jsを勉強し始めました。

その覚書として書いていきます。

前回は、3Dオブジェクトに影をつける練習をしました。

今回は、カメラをマウスでぐりぐりと動かせるようにしてました。
実際に行った手順を紹介します。

カメラ制御の設定手順
まとめ
最後に

カメラ制御の設定手順

以下の手順を踏むことで出来ます。

①OrbitControl.jsのCDNを追加する
②カメラコントローラーを作成
③プロパティ紹介（おまけ）

①OrbitControl.jsのCDNを追加する

カメラをマウスで操作するための機能はThree.jsライブラリにはないので、
OrbitControl.jsのCDNを読み込む必要があります。
こちらを追加して読み込みます。

<script src="https://unpkg.com/three@0.131.3/examples/js/controls/OrbitControls.js"></script>

公式はこちら。

three.js/OrbitControls.js at dev · mrdoob/three.js

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

②カメラコントローラーを作成する

カメラを作成したあとに、以下のようにコントローラーを作るだけでマウスの動きに反応してくれるようになります。

// カメラコントローラーを作成
const controls = new THREE.OrbitControls(
 camera,
 document.getElementById("myCanvas")
);

コントローラーの引数として、事前に作ったカメラのインスタンスと対象となるDOM要素を指定するだけです。
左クリックでドラッグ、右クリックでドラッグ、マウスホイール（ピンチアウト？）
それぞれ試してみてください。

以上の2つの操作で目的は完了です。

③プロパティ紹介（おまけ）

このカメラにはプロパティがいくつかあります。
詳しくは、公式を見てみてください。

three.js docs

滑らかに動かす

.enableDamping を true にすることでカメラの動きにダンピング（減衰）をつけることができます。
.dampingFactor の設定値を変更することでその速度を調整できます。

// 滑らかにカメラコントローラーを制御する
controls.enableDamping = true; //動きにダンピング（減衰）をつけることができる
controls.dampingFactor = 0.05; //減衰速度

ダンピングさせるには、レンダリングする度に .update(); する必要があります。

// 毎フレーム時に実行されるループイベントです
function tick() {
 // カメラコントローラーを更新
 controls.update();
 // レンダリング
 renderer.render(scene, camera);
 requestAnimationFrame(tick);
}

ズーム速度を制御する

.enableZoom を false にするとズームできなくなります。
trueにした上で、.zoomSpeed を変更することでその速度を調整できます。

//ズーム速度を制御する
controls.enableZoom = true; //falseにするとズーム不可
controls.zoomSpeed = 5; //ズームスピード調整

回転速度を制御する

.enableRotate を false にするとズームできなくなります。
trueにした上で、.rotateSpeed を変更することでその速度を調整できます。

//回転速度を制御
controls.enableRotate = true; //falseにすると回転不可
controls.rotateSpeed = 5; //回転スピード調整

パン操作を制御する

.enablePan を false にするとズームできなくなります。
trueにした上で、.panSpeed を変更することでその速度を調整できます。

//パン操作を制御
controls.enablePan = true; //falseにするとパン操作（右クリックドラッグで動かすやつ）不可
controls.panSpped = 5; //パンスピード調整

カメラ距離の最大最小を設定する

カメラがどこまで近づけて、どこまで遠ざかることができるのか設定します。
.minDistance で最小値を決め、.maxDistance で最大値を決めることが出来ます。

//カメラ距離の最大・最小設定
controls.minDistance = 30; //最小値
controls.maxDistance = 300; //最大値

まとめ

以下のプロパティ操作を覚えることで、影を表現することはできるということがわかりました。

①OrbitControl.jsのCDNを追加する
⇒ <script src=”https://unpkg.com/three@0.131.3/examples/js/controls/OrbitControls.js”></script>
②カメラコントローラーを作成
⇒ const controls = new THREE.OrbitControls(camera, document.getElementById(“myCanvas”));
③プロパティ紹介（おまけ）
⇒公式を確認

今回のコードはこちら