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 मॉडल ऑनलाइन कटिंग
प्रथमं, Three.js पुस्तकालयं सहितं आवश्यकं boilerplate कोडं समाविष्टं 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>
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);
कॅमेरा-स्थानम् एव दृश्यं यस्मात् दृष्टिकोणात् प्रतिपादितं भवति तत् निर्धारयति । भवन्तः तस्य स्थितिगुणस्य उपयोगेन कॅमेरा 3D स्थाने स्थापयितुं शक्नुवन्ति:
camera.position.set(0, 5, 10);
एषः कोडः कॅमेरा-स्थानं (0, 5, 10) इति सेट् करोति, यस्य अर्थः अस्ति यत् 3D-जगति x=0, y=5, z=10 इत्यत्र अस्ति ।
कॅमेराlookAt
विधिः भवन्तं परिभाषितुं शक्नोति यत् तया द्रष्टव्यं बिन्दुः:
- const target = new THREE.Vector3(0, 0, 0);
- camera.lookAt(target);
अस्मिन् उदाहरणे कॅमेरा दृश्यस्य उत्पत्तिस्थानं (0, 0, 0) इति बिन्दुं प्रति उन्मुखः अस्ति ।
कॅमेरा-दृश्यक्षेत्रं (FOV) कॅमेरा-माध्यमेन दृश्यमानस्य दृश्यस्य विस्तारं निर्धारयति । FOV मूल्यं यत्किमपि अधिकं भवति तथा दृश्यक्षेत्रं विस्तृतं भवति, मूल्यं च यत्किमपि न्यूनं भवति तत् दृश्यक्षेत्रं अधिकं वर्धितं भवति ।भवन्तः उपयोक्तुं शक्नुवन्तिfov
विशेषता समायोजन FOV: 1.1.
camera.fov = 60; // Example FOV value in degrees
कॅमेरा इत्यस्य आस्पेक्ट रेश्यो रेण्डर्ड् दृश्यस्य आकारं निर्धारयति । प्रायः दृश्यद्वारस्य विस्तारं तस्य ऊर्ध्वतायाः विभक्तं भवति:
- const aspectRatio = window.innerWidth / window.innerHeight;
- camera.aspect = aspectRatio;
समीपस्थं दूरं च कटनविमानं कॅमेरातः दृश्यमानं दूरं परिभाषयति । समीपविमानात् समीपस्थानि दूरविमानात् दूरतराणि वा वस्तूनि क्लिप् भवन्ति न तु रेण्डर् भविष्यन्ति ।भवन्तः उपयोक्तुं शक्नुवन्तिnear
तथाfar
गुणाः एतानि मूल्यानि सेट् कुर्वन्ति:
- camera.near = 0.1;
- camera.far = 1000;
एपर्चर, "कॅमेरा एपर्चर" अथवा "लेन्स एपर्चर" इति अपि ज्ञायते, कॅमेरा-मापनस्य प्रमुखः कारकः अस्ति, क्षेत्रस्य गभीरताम्, कॅमेरा-मध्ये प्रविशन्तं प्रकाशस्य परिमाणं च प्रभावितं करोति 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;
दृश्यं रेण्डर् कर्तुं पूर्वं, मापनं अधिकं दृश्यमानं कर्तुं केचन 3D ऑब्जेक्ट्स् योजयामः:
- const geometry = new THREE.BoxGeometry();
- const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
- const cube = new THREE.Mesh(geometry, material);
- scene.add(cube);
इदानीं यदा अस्माकं दृश्यं, कॅमेरा, वस्तूनि च स्थापितानि सन्ति, तदा वयं दृश्यं रेण्डर् कर्तुं शक्नुमः:
- function animate() {
- requestAnimationFrame(animate);
- renderer.render(scene, camera);
- }
- animate();
अभिनन्दनम् ! भवान् Three.js कॅमेरा-मापनस्य जगति प्रथमं सोपानं कृतवान् । कॅमेरा-गुणान् अवगत्य रेण्डर्ड्-दृश्ये तेषां प्रभावं च अवगत्य भवान् दृग्गतरूपेण आकर्षकं विमर्शकरं च 3D अनुभवं निर्मातुम् अर्हति । Three.js इत्यस्य पूर्णक्षमताम्, कॅमेरा-मापनस्य च साक्षात्कारं कर्तुं दृश्ये भिन्न-भिन्न-कॅमेरा-स्थानानि, FOV-मूल्यानि, वस्तुनि च प्रयोगं कुर्वन्तु ।
मूललिङ्कः : १.Three.js camera - BimAnt इत्यस्य विषये संक्षिप्तं पाठ्यक्रमम्