Three.js ऑब्जेक्ट के चारों ओर कैमरा घुमाएं (जो स्थानांतरित हो सकता है)

Question

मेरे पास एक कैमरा है जो दृश्य में कुछ अलग तरीकों से चलता है। कैमरे को एक लक्ष्य स्थिति के चारों ओर घूमना चाहिए। मेरे मामले में, यह एक जाल पर एक बिंदु है जिसे उपयोगकर्ता ने लक्षित किया है। चूंकि कैमरे को आमतौर पर इस बिंदु से संबंधित चलने की आवश्यकता नहीं होती है, इसलिए मैं यहां पिवट विचार का उपयोग करने में सक्षम नहीं था: https://github.com/mrdoob/three.js/issues/1830। मेरे वर्तमान समाधान निम्नलिखित कोड का उपयोग करता है:

var rotationY = new THREE.Matrix4(); 
var rotationX = new THREE.Matrix4(); 
var translation = new THREE.Matrix4(); 
var translationInverse = new THREE.Matrix4(); 
var matrix = new THREE.Matrix4(); 
function rotateCameraAroundObject(dx, dy, target) { 
    // collect up and right vectors from camera perspective 
    camComponents.up = rotateVectorForObject(new THREE.Vector3(0,1,0), camera.matrixWorld); 
    camComponents.right = rotateVectorForObject(new THREE.Vector3(1,0,0), camera.matrixWorld); 

    matrix.identity(); 

    rotationX.makeRotationAxis(camComponents.right, -dx); 
    rotationY.makeRotationAxis(camComponents.up, -dy); 
    translation.makeTranslation(
     target.position.x - camera.position.x, 
     target.position.y - camera.position.y, 
     target.position.z - camera.position.z); 
    translationInverse.getInverse(translation); 

    matrix.multiply(translation).multiply(rotationY).multiply(rotationX).multiply(translationInverse); 
    camera.applyMatrix(matrix); 
    camera.lookAt(target.position); 
} 

मुद्दा है कि हम पुनरभिविन्यास की वजह से, lookAt उपयोग करने के लिए नहीं करना चाहती। हम उस रेखा को हटाने में सक्षम होना चाहते हैं।

यदि हम बिना किसी कोड के ऊपर दिए गए कोड का उपयोग करते हैं, तो हम बिंदु के चारों ओर घूमते हैं लेकिन हम बिंदु को नहीं देखते हैं। मेरी समझ यह है कि मेरी विधि कैमरे के दृश्य को घुमाएगी जितनी कैमरा स्वयं घूमती है, लेकिन इसके बजाय कैमरा केवल थोड़ी सी मात्रा घुमाया जाता है। क्या कोई मुझे यह समझने में मदद कर सकता है कि क्या गलत है?

संपादित करें: मेरे प्रश्न को स्पष्ट रूप से स्पष्ट करने के लिए मूल पोस्ट और कोड साफ़ करें।

मेरी सोच यह है कि मैं मूल (मेरी लक्ष्य स्थिति) में अनुवाद कर सकता हूं, अपनी वांछित राशि घुमा सकता हूं, और फिर शुरुआत स्थिति में अनुवाद कर सकता हूं। घूर्णन के कारण, मैं उत्पत्ति को देखकर एक नई स्थिति में रहने की उम्मीद करता हूं।

वास्तव में, मैं यह अब अनुवाद मैट्रिक्स इस्तेमाल किया जा रहा बिना परीक्षण कर रहा हूँ, इसलिए आव्यूह गुणन लाइन है:

matrix.multiply(rotationY).multiply(rotationX); 

और यह एक ही व्यवहार कर रहा है। अभी तक मदद करने के लिए सभी को धन्यवाद!

एक और बात! समस्या का एक हिस्सा यह है कि जब कैमरा उत्तर या दक्षिण ध्रुवों के करीब बुरी तरह व्यवहार करता है। मैं एक 'फ्री रोमिंग' महसूस करने की तलाश में हूं।

Answer 1

गिंबल लॉक जिसे आप संदर्भित कर रहे हैं (पुनरावृत्ति) कैमरा लुक के डिफ़ॉल्ट कार्यान्वयन में यूलर कोणों के उपयोग के कारण है। आप lookAt करने के लिए अपने कॉल करने से पहले

camera.useQuaternion = true; 

सेट करते हैं तो यूलर कोण उपयोग नहीं किया जाएगा। क्या यह आपकी समस्या का समाधान करेगा?

Answer 2

अपने पाश प्रस्तुत करना में निम्नलिखित रखो:

camera.position.x = target.position.x + radius * Math.cos(constant * elapsedTime);   
camera.position.z = target.position.z + radius * Math.sin(constant * elapsedTime); 
camera.lookAt(target.position); 

renderer.render(scene, camera); 

वैकल्पिक रूप से, आप THREE.OrbitControls या THREE.TrackballControls उपयोग कर सकते हैं। तीन.जेएस उदाहरण देखें।