3D फिजिक्स सैंडबॉक्स के लिए सीनियर WebGL गेम आर्किटेक्ट

मैं आपके लिए एक वरिष्ठ WebGL गेम आर्किटेक्ट के रूप में कार्य करूंगा, जो Three.js और Cannon.js में विशेषज्ञता रखता है। मेरा लक्ष्य एक उच्च-प्रदर्शन 3D भौतिकी सैंडबॉक्स लॉजिक डिज़ाइन करना है। **मुख्य मैकेनिक्स:** - एक सीमित 3D कंटेनर के भीतर मोमेंटम-आधारित कोलिजन सिस्टम लागू करें। **आवश्यकताएँ:** 1. Cannon.js का उपयोग करके भौतिकी दुनिया के साथ एक Three.js सीन इनिशियलाइज़ करें। 2. एक "फोर्स इंटरैक्शन" सिस्टम सक्षम करें, जहां स्क्रीन पर क्लिक या टच करने से कैमरा और क्लिक पॉइंट के बीच वेक्टर के आधार पर 3D ऑब्जेक्ट्स पर तात्कालिक इम्पल्स लागू होता है। 3. यथार्थवादी ऊर्जा हानि का अनुकरण करने के लिए फ्रिक्शन, रेस्टिट्यूशन (उछाल), और लीनियर/एंगुलर डैम्पिंग लागू करें। 4. भौतिकी बॉडी पोज़िशन को Three.js मेश के साथ सिंक्रोनाइज़ करने के लिए एक कुशल एनीमेशन लूप का उपयोग करें। 5. सुनिश्चित करें कि कोड मॉड्यूलर है ताकि विभिन्न ज्योमेट्री (स्फेयर, बॉक्स, कन्वेक्स हल) आसानी से जोड़ी जा सकें। **कृपया कोर जावास्क्रिप्ट लॉजिक आउटपुट करें और इम्पल्स वेक्टर गणना के गणितीय कार्यान्वयन की व्याख्या करें।** --- **कोर जावास्क्रिप्ट लॉजिक:** ```javascript // मुख्य सीन, कैमरा, रेंडरर सेटअप const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // भौतिकी दुनिया सेटअप const world = new CANNON.World(); world.gravity.set(0, -9.82, 0); world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; // सीमित 3D कंटेनर (बाउंडिंग बॉक्स) const containerSize = 10; const containerBody = new CANNON.Body({ mass: 0, shape: new CANNON.Box(new CANNON.Vec3(containerSize, containerSize, containerSize)), position: new CANNON.Vec3(0, 0, 0) }); world.addBody(containerBody); // ऑब्जेक्ट्स के लिए स्टोरेज const physicsBodies = []; const meshes = []; // मॉड्यूलर ज्योमेट्री एडिशन फंक्शन function addObject(geometry, material, position, mass = 1) { // Three.js मेश बनाएं const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(position); scene.add(mesh); meshes.push(mesh); // Cannon.js बॉडी बनाएं let shape; if (geometry.type === 'SphereGeometry') { shape = new CANNON.Sphere(geometry.parameters.radius); } else if (geometry.type === 'BoxGeometry') { shape = new CANNON.Box(new CANNON.Vec3( geometry.parameters.width / 2, geometry.parameters.height / 2, geometry.parameters.depth / 2 )); } else if (geometry.type === 'ConvexGeometry') { // कन्वेक्स हल के लिए वर्टिसेस निकालें const vertices = geometry.attributes.position.array; const cannonVertices = []; for (let i = 0; i < vertices.length; i += 3) { cannonVertices.push(new CANNON.Vec3(vertices[i], vertices[i+1], vertices[i+2])); } shape = new CANNON.ConvexPolyhedron(cannonVertices); } const body = new CANNON.Body({ mass: mass, shape: shape, position: new CANNON.Vec3(position.x, position.y, position.z), material: new CANNON.Material({ friction: 0.3, // फ्रिक्शन गुणांक restitution: 0.5, // रेस्टिट्यूशन (उछाल) linearDamping: 0.1, // लीनियर डैम्पिंग angularDamping: 0.1 // एंगुलर डैम्पिंग }) }); world.addBody(body); physicsBodies.push(body); return { mesh, body }; } // इम्पल्स वेक्टर गणना फंक्शन function applyImpulseAtClick(event) { // स्क्रीन कोऑर्डिनेट्स को NDC (नॉर्मलाइज़्ड डिवाइस कोऑर्डिनेट्स) में बदलें const mouse = new THREE.Vector2(); mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // रेकास्टिंग के लिए रे कास्ट करें const raycaster = new THREE.Raycaster(); raycaster.setFromCamera(mouse, camera); // सभी मेश के साथ इंटरसेक्शन जांचें const intersects = raycaster.intersectObjects(meshes); if (intersects.length > 0) { const hitMesh = intersects[0].object; const meshIndex = meshes.indexOf(hitMesh); const body = physicsBodies[meshIndex]; // इम्पल्स वेक्टर की गणना (गणितीय व्याख्या नीचे) const cameraDirection = new THREE.Vector3(); camera.getWorldDirection(cameraDirection); // कैमरा से क्लिक पॉइंट तक दिशा वेक्टर const clickPoint = intersects[0].point; const impulseDirection = new THREE.Vector3() .subVectors(clickPoint, camera.position) .normalize(); // इम्पल्स की ताकत (मैग्नीट्यूड) const impulseMagnitude = 10; // कस्टमाइज़ेबल // अंतिम इम्पल्स वेक्टर const impulse = impulseDirection.multiplyScalar(impulseMagnitude); // Cannon.js बॉडी पर इम्पल्स लागू करें body.applyImpulse( new CANNON.Vec3(impulse.x, impulse.y, impulse.z), new CANNON.Vec3(clickPoint.x, clickPoint.y, clickPoint.z) ); } } // एनीमेशन लूप function animate() { requestAnimationFrame(animate); // भौतिकी दुनिया को स्टेप करें world.step(1/60); // भौतिकी बॉडी पोज़िशन को मेश के साथ सिंक्रोनाइज़ करें for (let i = 0; i < physicsBodies.length; i++) { meshes[i].position.copy(physicsBodies[i].position); meshes[i].quaternion.copy(physicsBodies[i].quaternion); } renderer.render(scene, camera); } // इवेंट लिसनर window.addEventListener('click', applyImpulseAtClick); window.addEventListener('touchstart', (e) => { const touch = e.touches[0]; applyImpulseAtClick({ clientX: touch.clientX, clientY: touch.clientY }); }); // सीन इनिशियलाइज़ेशन camera.position.set(0, 5, 15); camera.lookAt(0, 0, 0); // उदाहरण ऑब्जेक्ट्स जोड़ें addObject( new THREE.SphereGeometry(1, 32, 32), new THREE.MeshStandardMaterial({ color: 0xff0000 }), new THREE.Vector3(0, 5, 0) ); addObject( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({ color: 0x00ff00 }), new THREE.Vector3(2, 3, 0) ); animate(); ``` --- **इम्पल्स वेक्टर गणना का गणितीय कार्यान्वयन:** इम्पल्स वेक्टर की गणना निम्नलिखित गणितीय सिद्धांतों पर आधारित है: 1. **रे कास्टिंग (Ray Casting):** - स्क्रीन पर क्लिक पॉइंट को NDC (नॉर्मलाइज़्ड डिवाइस कोऑर्डिनेट्स) में बदलें: `x_ndc = (2 * x_screen / width) - 1`, `y_ndc = 1 - (2 * y_screen / height)` - कैमरा से एक रे बनाएं जो इस NDC पॉइंट से होकर गुजरती है - रे-मेश इंटरसेक्शन से 3D स्पेस में क्लिक पॉइंट का सटीक स्थान प्राप्त करें 2. **दिशा वेक्टर (Direction Vector):** - कैमरा पोज़िशन `P_camera` और क्लिक पॉइंट `P_click` के बीच वेक्टर: `V = P_click - P_camera` - इस वेक्टर को नॉर्मलाइज़ करें: `V_hat = V / |V|` - यह दिशा वेक्टर उस दिशा को दर्शाता है जिसमें इम्पल्स लागू होगा 3. **इम्पल्स मैग्नीट्यूड (Impulse Magnitude):** - इम्पल्स की ताकत `F` एक स्केलर मान है जो प्रभाव की तीव्रता को नियंत्रित करता है - यह मान गेम डिज़ाइन के अनुसार कस्टमाइज़ किया जा सकता है 4. **अंतिम इम्पल्स वेक्टर:** - `Impulse = V_hat * F` - यह वेक्टर Cannon.js के `applyImpulse` फंक्शन में पास किया जाता है 5. **भौतिकी प्रभाव:** - Cannon.js इम्पल्स को न्यूटन के दूसरे नियम (`F = ma`) के अनुसार लागू करता है - इम्पल्स बॉडी के वेग को तुरंत बदल देता है: `Δv = Impulse / mass` - फ्रिक्शन, रेस्टिट्यूशन और डैम्पिंग समय के साथ ऊर्जा को क्षय करते हैं यह गणितीय दृष्टिकोण सुनिश्चित करता है कि इम्पल्स हमेशा कैमरा से क्लिक पॉइंट की दिशा में लागू होता है, जिससे एक सहज और यथार्थवादी इंटरैक्शन अनुभव मिलता है।