記事ディレクトリ

序文
1. カメラコントロール

序文

カメラコントロールは、開発者がアプリケーションにカメラ機能を簡単に追加できるようにする、モバイルデバイスで利用できるソフトウェアツールです。カメラコントロールは、写真の撮影、ビデオの録画、フラッシュ制御、フォーカスなどの機能を提供し、開発者がそれらをカスタマイズおよび調整できるようにします。カメラコントロールを使用すると、開発者はカメラアプリケーションを迅速に構築したり、カメラ機能を既存のアプリケーションに統合したりできるため、ユーザーに優れた写真とビデオのエクスペリエンスを提供できます。

1. カメラコントロール

Three.js ではさまざまなカメラコントロールが利用できます。

TrackballControls: マウスをドラッグし、ホイールをスクロールしてズームし、キーボードを使用してカメラを移動して、球状のカメラ回転操作を実現できます。
OrbitControls: マウスをドラッグし、スクロールホイールでズームすることで、惑星の軌道に似たカメラの回転操作を実現できます。
FlyControls: 3 次元空間でのカメラの移動と回転をマウスの動きとキーボード操作で制御できます。
RollControls: シーン内のカメラのロールオーバーを制御するために使用できます。
FirstPersonControls: 一人称ゲームの操作と同様に、マウスとキーボードを使用してカメラの移動と回転を制御できます。

カメラコントロールを使用すると、カメラの操作が効果的に簡素化され、ユーザーの対話性とエクスペリエンスが向上します。

1.TrackballControls トラックボールコントロール

Three.js の TrackballControls (トラックボールコントロール) は、ユーザーがシーンのドラッグ、ズーム、回転によって 3D シーンを操作できるようにする対話型コントロールです。これは Three.js のカメラと連携して動作するコントロールであり、さまざまなユーザーインタラクションモードをサポートするように構成できます。

TrackballControls を使用すると、ユーザーはカメラを回転したり、シーンをズームインおよびズームアウトしたり、シーン内のオブジェクトを自由に移動したりできます。マウスまたはタッチスクリーンで操作でき、キーボードとジョイスティックの制御もサポートしています。使用する場合は、レンダラーに追加し、カメラとシーンに関連付ける必要があります。

TrackballControls を使用したコードサンプルを次に示します。

// 创建一个轨迹球控件
var controls = new THREE.TrackballControls(camera);

// 将轨迹球控件添加到渲染器中
renderer.domElement.addEventListener('mousedown', function() {
    
    
  controls.enabled = true;
});
renderer.domElement.addEventListener('mouseup', function() {
    
    
  controls.enabled = false;
});

// 使用轨迹球控件更新相机的位置和方向
function render() {
    
    
  requestAnimationFrame(render);
  controls.update();
  renderer.render(scene, camera);
}
render();

上記のコードでは、まずトラックボールコントロールを作成し、それをレンダラーに追加します。次に、ユーザーがマウスでカメラを移動したりシーンをズームしたりできるように、コントロールをマウスイベントに関連付けます。最後に、トラックボールコントロールを使用してカメラの位置と方向を更新し、シーンをレンダリングします。

ここに画像の説明を挿入

2.FirstPersonControls 一人称コントロール

Three.js の FirstPersonControls は、ユーザーが一人称視点で Three.js シーン内を移動および操作できるようにするコントロールです。

コントロールは次の機能を提供します。

マウスの動きでカメラの方向と角度を制御します。
キーボードを使用してカメラの移動と回転を制御します。
マウスズーム機能をサポートします。

このコントロールを使用するには、それをシーンに追加し、カメラをパラメーターとしてコントロールコンストラクターに渡す必要があります。その後、アニメーションループ内からコントロールの update() メソッドを呼び出して、フレームごとにカメラの位置と方向を更新できます。

以下は、FirstPersonControls コントロールを使用したサンプルコードです。

// 创建一个Three.js场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

// 创建一个FirstPersonControls控件
var controls = new THREE.FirstPersonControls(camera);
controls.movementSpeed = 10;
controls.lookSpeed = 0.1;

// 将相机添加到场景中
scene.add(camera);

// 在动画循环中更新控件
function animate() {
    
    
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

上の例では、FirstPersonControls コントロールを作成し、カメラをパラメーターとしてコンストラクターに渡しました。次に、カメラの動きと回転速度を制御するために、コントロールの MovementSpeed プロパティと lookSpeed プロパティを設定します。最後に、アニメーションループでコントロールの update() メソッドを呼び出して、カメラの位置と方向を更新します。

ここに画像の説明を挿入

3.FlyControls フライトコントロール

FlyControls は、航空機の制御をシミュレートするために使用できる Three.js のコントローラーです。マウスとキーボードで飛行方向と速度を制御できます。

FlyControls を使用する前に、カメラオブジェクトとレンダラーオブジェクトを作成する必要があります。

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

次に、FlyControls オブジェクトを作成し、それにカメラオブジェクトを渡します。

var controls = new THREE.FlyControls(camera);

カメラの飛行を次の方法で制御できるようになりました。

function animate() {
    
    
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

FlyControls には、movementSpeed、rollSpeed、dragToLook など、調整できるプロパティがいくつかあります。これらのプロパティを設定することで、カメラの飛行動作を変更できます。

controls.movementSpeed = 100;
controls.rollSpeed = Math.PI / 24;
controls.dragToLook = true;

FlyControls には、変更、ロック、ロック解除などのリッスンできるイベントがいくつかあり、対応するイベントがトリガーされたときにそれに応じて応答できます。

controls.addEventListener('change', function() {
    
    
    console.log('controls changed');
});

ここに画像の説明を挿入

4.RollControls ローリングコントロール

RollControls は Three.js のコントローラーで、シーン内のカメラのロールを制御するために使用できます。カメラの回転とは、カメラがシーン内の中心点の周りを回転し、カメラの方向が常に中心点に向かうことを意味します。RollControls を使用すると、ユーザーはマウスまたはタッチジェスチャを通じてカメラのロールを制御し、より良いインタラクション効果を実現できます。

以下は、RollControls を使用してカメラロールを制御するサンプルコードです。

// 创建场景、相机、渲染器等元素
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

// 添加一个立方体到场景中
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
    
     color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 将相机的位置设置为(0, 0, 3)，并将其方向朝向场景中心点
camera.position.z = 3;
camera.lookAt(0, 0, 0);

// 创建一个RollControls控制器，并将其绑定到相机上
var controls = new THREE.RollControls(camera);
controls.target.set(0, 0, 0);

// 将渲染器的输出添加到页面中
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染场景
function render() {
    
    
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

render();

この例では、最初にシーン、カメラ、レンダラなどの要素を作成し、立方体をシーンに追加しました。次に、カメラの位置を (0, 0, 3) に設定し、シーンの中心に向けます。

次に、RollControls コントローラーを作成し、カメラにバインドします。コントローラーの target プロパティを設定することで、カメラのターゲットポイントをシーンの中心として指定します。

最後に、シーンをレンダリングし、アニメーションを有効にします。ユーザーは、マウスまたはタッチジェスチャを通じてカメラのロールを制御し、より優れたインタラクティブ効果を実現できます。

ここに画像の説明を挿入

5. OrbitControls トラックコントロール

OrbitControlsはThree.jsが提供するオービットコントロールで、カメラの位置や方向を制御し、シーンの回転やズーム、移動などの操作を実現することができます。

OrbitControls の使用は非常に簡単です。シーン内に OrbitControls オブジェクトを作成し、それにパラメーターとしてカメラを渡すだけです。

var controls = new THREE.OrbitControls(camera);

レンダリングループでは、OrbitControls の update メソッドを呼び出して、カメラの位置と方向を更新する必要があります。

function animate() {
    
    
    requestAnimationFrame(animate);

    // 更新控件
    controls.update();

    // 渲染场景
    renderer.render(scene, camera);
}

次に、コントロールにいくつかのパラメータを設定して、さまざまなコントロール効果を実現できます。

EnableZoom: ズームを有効にするかどうか、デフォルトは true
EnableRotate: 回転を有効にするかどうか、デフォルトは true です
EnablePan: パンニングを有効にするかどうか、デフォルトは true です
minDistance: カメラが前方に移動できる最小距離、デフォルトは 0
maxDistance: カメラが後方に移動できる最大距離。デフォルトは無限大です。
minPolarAngle: カメラが下方向に回転できる最小角度。デフォルトは 0 です。
maxPolarAngle: カメラが上向きに回転できる最大角度。デフォルトは Math.PI です。
minAzimuthAngle: カメラが左に回転できる最小角度、デフォルト - 無限
maxAzimuthAngle: カメラが右に回転できる最大角度。デフォルトは無限大です。

たとえば、次のコードはズームと回転のみを設定し、カメラの最小距離は 10、最大距離は 100 です。

var controls = new THREE.OrbitControls(camera);
controls.enableZoom = true;
controls.enableRotate = true;
controls.enablePan = false;
controls.minDistance = 10;
controls.maxDistance = 100;

ここに画像の説明を挿入

6. 完全なケースのソースコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      
      
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
  <script src="../lib/three/OBJLoader.js"></script>
  <script src="../lib/three/MTLLoader.js"></script>
  <script src="../lib/three/OBJMTLLoader.js"></script>

  <!-- 轨迹球控件 -->
  <script src="../lib/three/TrackballControls.js"></script>
  <!-- 第一人称控件 -->
  <script src="../lib/three/FirstPersonControls.js"></script>
  <!-- 飞行控件 -->
  <script src="../lib/three/FlyControls.js"></script>
  <!-- 翻滚控件 -->
  <script src="../lib/three/RollControls.js"></script>
  <!-- 轨道控件 -->
  <script src="../lib/three/OrbitControls.js"></script>
</head>
<body>

</body>
</html>

<script>
  const clock = new THREE.Clock()
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(100,100,0);
  camera.lookAt(new THREE.Vector3(0,0,0));

  //const trackball = new THREE.TrackballControls(camera);
  //const controls = new THREE.FirstPersonControls(camera)
  //controls.lookSpeed = 0.2
  //const controls = new THREE.FlyControls(camera)
  //controls.rollSpeed = 0.5
  //const controls = new THREE.RollControls(camera)
  const controls = new THREE.OrbitControls(camera)


  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(2000,8000,4000);
  scene.add(spotLight);

  const loader = new THREE.OBJMTLLoader()

  loader.load('../assets/models/city.obj', '../assets/models/city.mtl', (mesh) => {
      
      
    scene.add(mesh);
  });

  const animation = () => {
      
      
    controls.update(clock.getDelta());
    // 渲染
    renderer.render(scene, camera);

    requestAnimationFrame(animation);
  }
  animation()
</script>

[Yugong シリーズ] 2023 年 8 月の Three.js トピック - カメラ制御

記事ディレクトリ

序文

1. カメラコントロール

1.TrackballControls トラックボールコントロール

2.FirstPersonControls 一人称コントロール

3.FlyControls フライトコントロール

4.RollControls ローリングコントロール

5. OrbitControls トラックコントロール

6. 完全なケースのソースコード

おすすめ

[Yugong シリーズ] 2023 年 8 月の Three.js トピック - カメラ制御

記事ディレクトリ

序文

1. カメラコントロール

1.TrackballControls トラックボール コントロール

2.FirstPersonControls 一人称コントロール

3.FlyControls フライト コントロール

4.RollControls ローリングコントロール

5. OrbitControls トラック コントロール

6. 完全なケースのソースコード

おすすめ

1.TrackballControls トラックボールコントロール

3.FlyControls フライトコントロール

5. OrbitControls トラックコントロール