थ्री.जेएस और ऑर्बिट कंट्रोल.जेएस - ग्राउंड प्लेन (जैसे Google धरती) के समानांतर पैन कैमरा

Question

मैं एक साधारण थ्री.जेएस डेमो पर काम कर रहा हूं जो OrbitControls.js का उपयोग करता है।

मैं OrbitControls में पैनिंग के व्यवहार को बदलना चाहता हूं। वर्तमान में, जब आप कैमरे को पैन करते हैं, तो यह कैमरे को ऐसे विमान में ले जाता है जो देखने की दिशा में लंबवत है। मैं इसे बदलना चाहता हूं ताकि कैमरा जमीन के मैदान से लगातार दूरी रखता है और इसके समानांतर चलता है। Google धरती एक समान नियंत्रण सेटअप का उपयोग करता है।

संपादित करें: मुझे इस विवरण का पहले स्थान पर उल्लेख करना चाहिए था, लेकिन मुझे उस बिंदु को भी पसंद करना चाहिए जहां आप क्लिक करते हैं और संपूर्ण ड्रैग में कर्सर के नीचे सीधे रहने के लिए ड्रैग करना प्रारंभ करते हैं। माउस आंदोलन के बीच ठोस कनेक्शन और स्क्रीन पर उपयोगकर्ता क्या होने की अपेक्षा करता है। अन्यथा, ऐसा लगता है कि जब मैं दृश्य के चारों ओर घूमने की कोशिश करता हूं तो मैं 'फिसल रहा हूं'।

क्या कोई मुझे उच्च स्तर का स्पष्टीकरण दे सकता है कि यह कैसे किया जा सकता है (OrbitControls.js के साथ या बिना)?

Answer 1

मैंने इसे समझ लिया। यहां अवलोकन है:

1. कहीं और मूसडाउन ईवेंट स्टोर करें।
2. जब माउस चलता है, तो नया मूसडाउन ईवेंट प्राप्त करें।
3. उन बिंदुओं में से प्रत्येक के लिए, उन क्लिकों को ढूंढें जहां वे क्लिक स्थित हैं (आपको अंक को कैमरे की जगह में रखना होगा, उन्हें विश्व स्थान में बदलना होगा, फिर प्रत्येक बिंदु के माध्यम से कैमरे से एक किरण को आग लगाना होगा विमान के साथ अपने चौराहे पाएं। This page रे-प्लेन चौराहे परीक्षण बताता है)।
4. ऑफ़सेट प्राप्त करने के लिए विश्व-अंतरिक्ष अंत चौराहे बिंदु से विश्व-स्थान प्रारंभ चौराहे बिंदु घटाएं।
5. कैमरे के लक्ष्य बिंदु से ऑफसेट घटाएं और आप कर चुके हैं!

OrbitControl.js के मामले में, कैमरा हमेशा लक्ष्य बिंदु को देखता है, और इसकी स्थिति उस बिंदु से संबंधित है। तो जब आप लक्ष्य बदलते हैं, तो कैमरा इसके साथ चलता है। चूंकि लक्ष्य हमेशा विमान पर स्थित होता है, इसलिए कैमरा उस विमान के समानांतर होता है (जब तक आप पैनिंग कर रहे हों)।

Answer 2

कुछ समय पहले मैं इस मुद्दे पर काम कर रहा था, यानी नेविगेशन मानचित्रण करने के लिए OrbitControls.js का अनुकूलन।

• यहां the code of MapControls.js है।
• नियंत्रण के the demo यहां है।

Answer 3

ऐसा लगता है कि यह एक अच्छी सुविधा होगी, और यह मौजूदा OrbitControls.js पर एक आसान परिवर्तन प्रतीत होता है। निम्नलिखित दो विधियों को बदलें।

var panLeft = function() { 

    var v = new THREE.Vector3(); 

    return function panLeft(distance, objectMatrix) { 

     var te = objectMatrix.elements; 

     // get elements from the X-column of matrix 
     v.set(te[ 0 ], 0, te[ 2 ]).normalize(); 
     v.multiplyScalar(- distance); 

     panOffset.add(v); 

    }; 

}(); 

var panUp = function() { 

    var v = new THREE.Vector3(); 

    return function panUp(distance, objectMatrix) { 

     var te = objectMatrix.elements; 

     // get elements from the Z-column of matrix 
     v.set(te[ 8 ], 0, te[ 10 ]).normalize(); 
     v.multiplyScalar(- distance); 

     panOffset.add(v); 

    }; 

}(); 

यदि आप विपरीत व्यवहार करने के लिए पैनिंग करना चाहते हैं तो संकेतों को फ़्लिप करें।

तीर कुंजियों को भी काम करना चाहिए। वांछित अगर handleKeyDown() संशोधित करें।

तीन.जेएस आर।75

Answer 4

आप जेड कुल्हाड़ी के लिए अपने कैमरे 'ऊपर' स्थापित करना चाहिए:

camera.up.set(0,0,1)

और फिर, OrbitControl की मुख्य समस्या यह अपने panUp() फ़ंक्शन है। यह तय किया जाना चाहिए।

मेरे पुल का अनुरोध: https://github.com/mrdoob/three.js/pull/12727

y कुल्हाड़ी कैमरा कुल्हाड़ियों के सापेक्ष है और दुनिया में एक निश्चित योजना के अनुरूप होना चाहिए। अपेक्षित वाई कुल्हाड़ी को परिभाषित करने के लिए, विश्व जेड कुल्हाड़ी के आधार पर कैमरा एक्स कुल्हाड़ी का 90 डिग्री रोटेशन करें।

v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix 
v.applyAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI/2); 
v.multiplyScalar(distance); 
panOffset.add(v) 

आनंद लें!