प्रौद्योगिकी साझेदारी

Three.js कैमरा संक्षिप्त पाठ्यक्रम

2024-07-12

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

कैमरा मापनं 3D सङ्गणकचित्रकलायां मौलिकसंकल्पना अस्ति यस्मिन् वास्तविक-जगतः कॅमेरा-दृष्टिकोणस्य व्यवहारस्य च अनुकरणार्थं आभासी-कॅमेरा-स्थापनं भवति Three.js इति लोकप्रिये 3D रेण्डरिंग् जावास्क्रिप्ट् पुस्तकालये यथार्थवादीनां विसर्जनशीलानाञ्च 3D दृश्यानां निर्माणार्थं कॅमेरा-मापनस्य अवगमनं महत्त्वपूर्णम् अस्ति । अस्मिन् लेखे वयं Three.js इत्यस्मिन् कॅमेरा-मापनस्य मूलभूतविषयान् अन्वेषयामः, तेषां 3D-ग्राफिक्स्-कौशलं सुधारयितुम् इच्छन्तीनां आरम्भकानां कृते ।

पूर्वापेक्षाः : कॅमेरा-मापन-विषये गोतां कर्तुं पूर्वं भवतां जावास्क्रिप्ट्, एचटीएमएल, Three.js इत्यादीनां मूलभूत-अवगमनं भवितुमर्हति । 3D निर्देशांकैः, परिवर्तनैः, प्रतिपादनैः च परिचितः अपि सहायकः भविष्यति ।

एनएसडीटी उपकरण अनुशंसा： Three.js AI बनावट विकास किट - YOLO सिंथेटिक डाटा जनरेटर - GLTF/GLB ऑनलाइन सम्पादनम् - 3D मॉडल प्रारूप ऑनलाइन रूपान्तरण - प्रोग्रामेबल 3D दृश्य सम्पादक - REVIT निर्यात 3D मॉडल प्लग-इन् - 3D मॉडल शब्दार्थ अन्वेषण इञ्जिन - Three.js आभासी अक्ष विकास किट - 3D मॉडल ऑनलाइन पृष्ठीय न्यूनीकरण - STL मॉडल ऑनलाइन कटिंग 

1. वातावरणं स्थापयतु

प्रथमं, Three.js पुस्तकालयं सहितं आवश्यकं boilerplate कोडं समाविष्टं 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: 1.1.

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 camera - BimAnt इत्यस्य विषये संक्षिप्तं पाठ्यक्रमम्

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति विकासक दस्तावेजीकरणस्थानकं भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु

मम सम्पर्कसूचना

मेल