Teknologian jakaminen

Three.js-kameran tiivis opetusohjelma

2024-07-12

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

Kameran kalibrointi on peruskäsite 3D-tietokonegrafiikassa, ja siihen kuuluu virtuaalikameran asentaminen simuloimaan todellisen kameran perspektiiviä ja käyttäytymistä. Three.js:ssä, suositussa 3D-renderöivässä JavaScript-kirjastossa, kameran kalibroinnin ymmärtäminen on ratkaisevan tärkeää realististen ja mukaansatempaavien 3D-kohtausten luomisessa. Tässä artikkelissa tutkimme Three.js:n kameran kalibroinnin perusteita aloittelijoille, jotka haluavat parantaa 3D-grafiikkataitojaan.

Edellytykset: Ennen kuin sukeltaa kameran kalibrointiin, sinulla on oltava perustiedot JavaScriptistä, HTML:stä ja Three.js:stä. 3D-koordinaattien, muunnosten ja renderöinnin tuntemus on myös hyödyllistä.

NSDT-työkalusuositus: Three.js AI Texture Development Kit - YOLO synteettinen tiedon generaattori - GLTF/GLB online-editointi - 3D-mallin muuntaminen verkossa - Ohjelmoitava 3D-näkymäeditori - REVIT-vienti 3D-mallin laajennus - 3D-mallin semanttinen hakukone - Three.js virtuaalisen akselin kehityssarja - 3D-mallin online-pinnan pienennys - STL-mallin online-leikkaus 

1. Määritä ympäristö

Luo ensin HTML-tiedosto, joka sisältää tarvittavan yleiskoodin, mukaan lukien Three.js-kirjaston:

  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. Luo kohtauksia ja kameroita

Voit alustaa Three.js:n luomalla kohtauksen, kameran ja renderöijän:

  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. Aseta kamera paikalleen

Kameran asento määrittää näkökulman, josta kohtaus renderöidään. Voit sijoittaa kameran 3D-avaruuteen käyttämällä sen sijaintiominaisuutta:

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

Tämä koodi asettaa kameran sijainnin arvoon (0, 5, 10), mikä tarkoittaa, että se on 3D-maailmassa kohdissa x=0, y=5 ja z=10.

4. Osoita kameraan

kameralookAtMenetelmän avulla voit määrittää pisteen, jota sen tulisi tarkastella:

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

Tässä esimerkissä kamera on suunnattu kohti pistettä (0, 0, 0), joka on kohtauksen lähtökohta.

5. Näkökenttä (FOV)

Kameran näkökenttä (FOV) määrittää kameran läpi näkyvän kohtauksen laajuuden. Mitä korkeampi FOV-arvo, sitä laajempi näkökenttä, ja mitä pienempi arvo, sitä suurennettu kuvakenttä.voit käyttääfovAttribuutin säätö FOV:

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

6. Kuvasuhde

Kameran kuvasuhde määrää renderoidun kohtauksen muodon. Se asetetaan yleensä näkymän leveyteen jaettuna sen korkeudella:

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

7. Lähellä leikkaustasoa ja kauas leikkaustasoa

Lähi- ja kaukoleikkaustasot määrittävät näkyvän etäisyyden kamerasta. Objektit, jotka ovat lähempänä lähitasoa tai kauempana kuin etätaso, leikataan eikä renderöidä.voit käyttäänearjafarOminaisuudet asettavat nämä arvot:

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

8. Aukko

Aukko, joka tunnetaan myös nimellä "kameran aukko" tai "objektiivin aukko", on avaintekijä kameran kalibroinnissa ja vaikuttaa syväterävyyteen ja kameraan tulevan valon määrään. Three.js:ssä voimme simuloida aukkotehostetta säätämällä kameran aukon ominaisuutta.

  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. Lisää esineitä kohtaukseen

Ennen kuin renderöit kohtauksen, lisätään joitain 3D-objekteja, jotta kalibrointi näkyy paremmin:

  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. Renderöi kohtaus

Nyt kun kohtaus, kamera ja objektit on asetettu, voimme hahmontaa kohtauksen:

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

11. Johtopäätös

Onnittelut! Olet ottanut ensimmäisen askelesi Three.js-kamerakalibroinnin maailmaan. Ymmärtämällä kameran ominaisuudet ja niiden vaikutuksen renderöityyn kohtaukseen voit luoda visuaalisesti mukaansatempaavia ja mukaansatempaavia 3D-kokemuksia. Kokeile erilaisia ​​kameran asentoja, FOV-arvoja ja näkymän kohteita hyödyntääksesi Three.js:n ja kameran kalibroinnin täyden potentiaalin.


Alkuperäinen linkki:Lyhyt opetusohjelma Three.js-kamerasta - BimAnt