एक ही नियंत्रण के साथ कई कैमरों को नियंत्रित करें

Question

मेरे पास दो अलग-अलग तीनj दृश्य हैं और प्रत्येक का अपना कैमरा है। मैं प्रत्येक कैमरे को एक अलग TrackballControls उदाहरण के साथ व्यक्तिगत रूप से नियंत्रित कर सकता हूं।

क्या इन नियंत्रणों को एक साथ 'लॉक' या 'बाइंड' करने का कोई विश्वसनीय तरीका है, ताकि एक में हेरफेर करने से एक ही कैमरे को दूसरे में बदल दिया जा सके? मेरा वर्तमान दृष्टिकोण change श्रोताओं को नियंत्रण में जोड़ना और दोनों कैमरों को किसी भी बदलाव में अपडेट करना है, लेकिन यह बहुत साफ नहीं है, क्योंकि एक के लिए दोनों नियंत्रण एक बार में बदल सकते हैं (धुंधला होने के कारण)।

Answer 1

मेरा मानना ​​है कि अगर आप पहले के मूल्यों से पीछे नहीं कैमरे के मैट्रिक्स की स्थापना की और दोनों कैमरों का स्वत: मैट्रिक्स अपडेट अक्षम यह काम करना चाहिए:

camera2.matrix = camera1.matrix; 
camera2.projectionMatrix = camera1.projectionMatrix; 
camera1.matrixAutoUpdate = false; 
camera2.matrixAutoUpdate = false; 

लेकिन अब आप मैन्युअल रूप से मैट्रिक्स अद्यतन करने की आवश्यकता अपने renderloop में:

camera1.updateMatrix(); 

कि कॉल position, rotation और scale (कि नियंत्रण के द्वारा अद्यतन किया गया है) के लिए मान ले जाएगा और उन्हें camera1.matrix में रचना है, जो प्रति असाइनमेंट से पहले है दूसरे कैमरे के लिए मैट्रिक्स के रूप में भी इस्तेमाल किया जाता है।

हालांकि, यह थोड़ा हैकी लगता है और सभी प्रकार की अजीब समस्याओं का कारण बन सकता है। मैं व्यक्तिगत रूप से संभवतः अधिक स्पष्ट दृष्टिकोण को प्राथमिकता दूंगा जो आपने पहले ही लागू कर लिया है।

प्रश्न यह है कि आप दो कैमरे का उपयोग क्यों कर रहे हैं- और नियंत्रण-उदाहरण? जब तक कैमरे को दृश्य में जोड़ा नहीं जाता है, तब तक आप एक ही कैमरे का उपयोग करके दोनों दृश्य प्रस्तुत कर सकते हैं।

Answer 2

क्या इन ऑब्जेक्ट्स को नियंत्रित करने के लिए ऑब्जर्वर या प्रकाशक डिज़ाइन पैटर्न का उपयोग करना संभव है?

ऐसा लगता है कि आप कैमरे को नियंत्रण में जोड़ रहे हैं। आप एक ऑब्जेक्ट बना सकते हैं जिसमें एक ही नियंत्रण इंटरफ़ेस हो, लेकिन जब आप ऑब्जेक्ट को कमांड पास करते हैं, तो यह सब्स्क्राइब किए गए या पंजीकृत कैमरों में से एक ही कमांड को दोहराता है।

/* छद्म कोड: ES6 */

class MasterControl { 
    constructor(){ 
     this.camera_bindings = []; 
    } 
    control_action1(){ 
     for(var camera of this.camera_bindings){ 
      camera.control_action1(); 
     } 
    } 
    control_action2(arg1, arg2){ 
     for(var camera of this.camera_bindings){ 
      camera.control_action2(arg1, arg2); 
     } 
    } 

    bindCamera(camera){ 
     if(this.camera_bindings.indexOf(camera) === -1){ 
      this.camera_bindings.push(camera); 
     } 
    } 
} 

var master = new MasterControl(); 
master.bindCamera(camera1); 
master.bindCamera(camera2); 
master.bindCamera(camera3); 

let STEP_X = -5; 
let STEP_Y = 10; 
//the following command will send the command to all three cameras 
master.control_action2(STEP_X, STEP_Y); 

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

नोट: मैंने अपने psuedocode es6 में लिखा है, क्योंकि यह सरल और संवाद करने में आसान है। आप इसे es5 या पुराने में लिख सकते हैं, लेकिन आपको क्लास परिभाषा को कार्यात्मक ऑब्जेक्ट परिभाषाओं की एक श्रृंखला में बदलना चाहिए जो मास्टर ऑब्जेक्ट और इसकी कार्यक्षमता बनाता है।