技術共有

Three.js カメラの簡潔なチュートリアル

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

カメラ キャリブレーションは、現実世界のカメラの視点と動作をシミュレートする仮想カメラのセットアップを含む 3D コンピュータ グラフィックスの基本的な概念です。人気の 3D レンダリング JavaScript ライブラリである Three.js では、カメラのキャリブレーションを理解することが、リアルで没入型の 3D シーンを作成するために重要です。この記事では、3D グラフィックス スキルの向上を目指す初心者向けに、Three.js でのカメラ キャリブレーションの基本について説明します。

前提条件: カメラのキャリブレーションに入る前に、JavaScript、HTML、および Three.js の基本を理解しておく必要があります。 3D 座標、変換、レンダリングに精通していることも役に立ちます。

NSDT ツールの推奨事項: Three.js AI テクスチャ開発キット - YOLO 合成データ ジェネレーター - GLTF/GLBオンライン編集 - 3Dモデル形式のオンライン変換 - プログラム可能な 3D シーンエディター - REVIT エクスポート 3D モデル プラグイン - 3Dモデルセマンティック検索エンジン - Three.js 仮想軸開発キット - 3D モデルのオンライン表面縮小 - STLモデルのオンラインカッティング 

1. 環境をセットアップする

まず、Three.js ライブラリを含む、必要な定型コードを含む HTML ファイルを作成します。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Camera Calibration in Three.js</title>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  6. </head>
  7. <body>
  8. <script>
  9. // Your Three.js code will go here
  10. </script>
  11. </body>
  12. </html>

2. シーンとカメラを作成する

Three.js を初期化するには、シーン、カメラ、レンダラーを作成します。

  1. // Set up the scene, camera, and renderer
  2. const scene = new THREE.Scene();
  3. const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  4. const renderer = new THREE.WebGLRenderer();
  5. renderer.setSize(window.innerWidth, window.innerHeight);
  6. document.body.appendChild(renderer.domElement);

3. カメラの位置を決めます

カメラの位置によって、シーンがレンダリングされる視点が決まります。位置プロパティを使用して、3D 空間にカメラを配置できます。

camera.position.set(0, 5, 10);

このコードは、カメラの位置を (0, 5, 10) に設定します。これは、カメラが 3D 世界の x=0、y=5、z=10 にあることを意味します。

4. カメラを向けます

カメラlookAtこのメソッドを使用すると、注目すべき点を定義できます。

  1. const target = new THREE.Vector3(0, 0, 0);
  2. camera.lookAt(target);

この例では、カメラはシーンの原点である点 (0, 0, 0) に向けられています。

5. 視野 (FOV)

カメラの視野 (FOV) によって、カメラを通して見えるシーンの範囲が決まります。 FOV 値が高いほど視野が広くなり、値が低いほど視野が拡大されます。使用できますfov属性調整FOV:

camera.fov = 60; // Example FOV value in degrees

6. アスペクト比

カメラのアスペクト比によって、レンダリングされるシーンの形状が決まります。通常、ビューポートの幅を高さで割った値に設定されます。

  1. const aspectRatio = window.innerWidth / window.innerHeight;
  2. camera.aspect = aspectRatio;

7. ニアクリッピングプレーンとファークリッピングプレーン

近方および遠方のクリッピング プレーンは、カメラからの可視距離範囲を定義します。近い平面より近いオブジェクト、または遠い平面より遠いオブジェクトはクリップされ、レンダリングされません。使用できますnearそしてfarプロパティは次の値を設定します。

  1. camera.near = 0.1;
  2. camera.far = 1000;

8. 絞り

「カメラ絞り」または「レンズ絞り」とも呼ばれる絞りは、カメラのキャリブレーションにおける重要な要素であり、被写界深度とカメラに入る光の量に影響します。 Three.js では、カメラの絞りプロパティを調整することで絞り効果をシミュレートできます。

  1. // Aperture (Camera's f-stop) - Controls depth of field and light gathering
  2. const aperture = 0.1; // Increase this value for a shallower depth of field
  3. camera.aperture = aperture;

9. シーンにオブジェクトを追加する

シーンをレンダリングする前に、キャリブレーションをより見やすくするためにいくつかの 3D オブジェクトを追加しましょう。

  1. const geometry = new THREE.BoxGeometry();
  2. const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  3. const cube = new THREE.Mesh(geometry, material);
  4. scene.add(cube);

10. シーンをレンダリングする

シーン、カメラ、オブジェクトを設定したので、シーンをレンダリングできます。

  1. function animate() {
  2. requestAnimationFrame(animate);
  3. renderer.render(scene, camera);
  4. }
  5. animate();

11. 結論

おめでとう! Three.js カメラ キャリブレーションの世界への第一歩を踏み出しました。カメラのプロパティとそれがレンダリングされたシーンに与える影響を理解することで、視覚的に魅力的で没入型の 3D エクスペリエンスを作成できます。 Three.js とカメラ キャリブレーションの可能性を最大限に発揮するには、シーン内のさまざまなカメラ位置、FOV 値、オブジェクトを試してください。


元のリンク:Three.js カメラに関する簡単なチュートリアル - BimAnt