Tutoriel concis de caméra Three.js

Tutoriel concis sur la caméra Three.js

2024-07-12

L'étalonnage de la caméra est un concept fondamental en infographie 3D qui implique la configuration d'une caméra virtuelle pour simuler la perspective et le comportement d'une caméra du monde réel. Dans Three.js, une bibliothèque JavaScript de rendu 3D populaire, comprendre l'étalonnage de la caméra est crucial pour créer des scènes 3D réalistes et immersives. Dans cet article, nous explorerons les bases de l'étalonnage de la caméra dans Three.js, pour les débutants cherchant à améliorer leurs compétences en graphisme 3D.

Prérequis : avant de vous lancer dans l'étalonnage de la caméra, vous devez avoir une compréhension de base de JavaScript, HTML et Three.js. La connaissance des coordonnées 3D, des transformations et du rendu sera également utile.

Recommandation de l'outil NSDT： Kit de développement de textures IA Three.js - Générateur de données synthétiques YOLO - Édition en ligne GLTF/GLB - Conversion en ligne du format de modèle 3D - Éditeur de scène 3D programmable - Plug-in d'exportation de modèle 3D REVIT - Moteur de recherche sémantique de modèles 3D - Kit de développement d'axe virtuel Three.js - Réduction de surface en ligne du modèle 3D - Découpe en ligne de modèle STL

1. Configurer l'environnement

Tout d'abord, créez un fichier HTML contenant le code passe-partout nécessaire, y compris la bibliothèque Three.js :


<!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. Créez des scènes et des caméras

Pour initialiser Three.js, créez une scène, une caméra et un moteur de rendu :


// 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. Positionnez la caméra

La position de la caméra détermine le point de vue à partir duquel la scène est rendue. Vous pouvez positionner la caméra dans l'espace 3D à l'aide de sa propriété position :

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

Ce code définit la position de la caméra sur (0, 5, 10), ce qui signifie qu'elle se trouve à x=0, y=5 et z=10 dans le monde 3D.

4. Pointez la caméra

caméralookAtLa méthode vous permet de définir le point sur lequel elle doit se pencher :


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

Dans cet exemple, la caméra est orientée vers le point (0, 0, 0), qui est l'origine de la scène.

5. Champ de vision (FOV)

Le champ de vision (FOV) de la caméra détermine l'étendue de la scène visible à travers la caméra. Plus la valeur FOV est élevée, plus le champ de vision est large et plus la valeur est faible, plus le champ de vision est agrandi.vous pouvez utiliserfovChamp de vision d'ajustement des attributs :

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

6. Rapport hauteur/largeur

Le rapport hauteur/largeur de la caméra détermine la forme de la scène rendue. Il est généralement défini sur la largeur de la fenêtre divisée par sa hauteur :


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

7. Plan de détourage proche et plan de détourage éloigné

Les plans de détourage proche et éloigné définissent la plage de distance visible depuis la caméra. Les objets plus proches que le plan proche ou plus éloignés que le plan éloigné seront tronqués et ne seront pas rendus.vous pouvez utilisernearetfarLes propriétés définissent ces valeurs :


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

8. Ouverture

L'ouverture, également appelée « ouverture de l'appareil photo » ou « ouverture de l'objectif », est un facteur clé dans l'étalonnage de l'appareil photo et affecte la profondeur de champ et la quantité de lumière entrant dans l'appareil photo. Dans Three.js, nous pouvons simuler l'effet d'ouverture en ajustant la propriété d'ouverture de la caméra.


// 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. Ajouter des objets à la scène

Avant de rendre la scène, ajoutons quelques objets 3D pour rendre le calibrage plus visible :


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

10. Rendre la scène

Maintenant que la scène, la caméra et les objets sont configurés, nous pouvons restituer la scène :


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

11. Conclusion

Toutes nos félicitations! Vous avez fait vos premiers pas dans le monde de l'étalonnage des caméras Three.js. En comprenant les propriétés de la caméra et leur impact sur la scène rendue, vous pouvez créer des expériences 3D visuellement attrayantes et immersives. Expérimentez avec différentes positions de caméra, valeurs de champ de vision et objets dans la scène pour exploiter tout le potentiel de Three.js et de l'étalonnage de la caméra.

Lien d'origine :Un bref tutoriel sur la caméra Three.js - BimAnt

Partage de technologie