Condivisione della tecnologia

Tutorial conciso sulla fotocamera Three.js

2024-07-12

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

La calibrazione della fotocamera è un concetto fondamentale nella computer grafica 3D che prevede la configurazione di una fotocamera virtuale per simulare la prospettiva e il comportamento di una fotocamera del mondo reale. In Three.js, una popolare libreria JavaScript per il rendering 3D, comprendere la calibrazione della fotocamera è fondamentale per creare scene 3D realistiche e coinvolgenti. In questo articolo esploreremo le basi della calibrazione della fotocamera in Three.js, per i principianti che desiderano migliorare le proprie capacità grafiche 3D.

Prerequisiti: prima di immergersi nella calibrazione della fotocamera, è necessario avere una conoscenza di base di JavaScript, HTML e Three.js. Sarà utile anche la familiarità con le coordinate 3D, le trasformazioni e il rendering.

Raccomandazione sullo strumento NSDT: Kit di sviluppo texture AI Three.js - Generatore di dati sintetici YOLO - Modifica online GLTF/GLB - Conversione online del formato del modello 3D - Editor di scene 3D programmabile - Plug-in per l'esportazione di modelli 3D REVIT - Motore di ricerca semantica di modelli 3D - Kit di sviluppo dell'asse virtuale Three.js - Riduzione della superficie online del modello 3D - Taglio online del modello STL 

1. Configura l'ambiente

Innanzitutto, crea un file HTML contenente il codice boilerplate necessario, inclusa la libreria Three.js:

  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. Crea scene e telecamere

Per inizializzare Three.js, crea una scena, una telecamera e un renderer:

  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. Posizionare la telecamera

La posizione della telecamera determina il punto di vista da cui viene renderizzata la scena. Puoi posizionare la telecamera nello spazio 3D utilizzando la sua proprietà position:

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

Questo codice imposta la posizione della telecamera su (0, 5, 10), il che significa che è x=0, y=5 e z=10 nel mondo 3D.

4. Puntare verso la telecamera

telecameralookAtIl metodo consente di definire il punto da guardare:

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

In questo esempio, la telecamera è orientata verso il punto (0, 0, 0), che è l'origine della scena.

5. Campo visivo (FOV)

Il campo visivo (FOV) della telecamera determina l'estensione della scena visibile attraverso la telecamera. Maggiore è il valore FOV, più ampio è il campo visivo, mentre più basso è il valore, maggiore è l'ingrandimento del campo visivo.Puoi usarefovFOV di regolazione degli attributi:

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

6. Proporzioni

Le proporzioni della telecamera determinano la forma della scena renderizzata. Di solito è impostato sulla larghezza del viewport divisa per la sua altezza:

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

7. Piano di ritaglio vicino e piano di ritaglio lontano

I piani di ritaglio vicino e lontano definiscono l'intervallo di distanza visibile dalla telecamera. Gli oggetti più vicini del piano vicino o più lontani del piano lontano verranno ritagliati e non sottoposti a rendering.Puoi usarenearEfarLe proprietà impostano questi valori:

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

8. Apertura

L'apertura, nota anche come "apertura della fotocamera" o "apertura dell'obiettivo", è un fattore chiave nella calibrazione della fotocamera e influisce sulla profondità di campo e sulla quantità di luce che entra nella fotocamera. In Three.js, possiamo simulare l'effetto di apertura regolando la proprietà di apertura della fotocamera.

  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. Aggiungi oggetti alla scena

Prima di renderizzare la scena, aggiungiamo alcuni oggetti 3D per rendere più visibile la calibrazione:

  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. Renderizza la scena

Ora che abbiamo impostato la scena, la telecamera e gli oggetti, possiamo renderizzare la scena:

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

11. Conclusione

Congratulazioni! Hai fatto il tuo primo passo nel mondo della calibrazione della fotocamera Three.js. Comprendendo le proprietà della fotocamera e il loro impatto sulla scena renderizzata, puoi creare esperienze 3D visivamente coinvolgenti e coinvolgenti. Sperimenta diverse posizioni della telecamera, valori FOV e oggetti nella scena per realizzare tutto il potenziale di Three.js e della calibrazione della telecamera.


Collegamento originale:Un breve tutorial sulla fotocamera Three.js - BimAnt