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

2024-07-12

カメラキャリブレーションは、現実世界のカメラの視点と動作をシミュレートする仮想カメラのセットアップを含む 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 ファイルを作成します。


<!DOCTYPE html>
<html>
<head>
    <title>Camera Calibration in Three.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Your Three.js code will go here
    </script>
</body>
</html>

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

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


// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
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このメソッドを使用すると、注目すべき点を定義できます。


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

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

5. 視野 (FOV)

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

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

6. アスペクト比

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


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

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

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


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

8. 絞り

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


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

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

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


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

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

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


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

11. 結論

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

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

技術共有