Three.js: आकार परिवर्तन, और पहलू अनुपात पर विंडो

आपको कैमरा अपडेट करने की भी आवश्यकता है:

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

मेरे पास एक "div" है, जिसमें डायनामिक आयाम हैं जो विंडो के आकार बदलने पर या जब पृष्ठ के भीतर अन्य तत्व छिपे हुए हैं। जब इस "div" कंटेनर का आकार बदल दिया जाता है, तो मुझे पूरी तरह से div को भरने के लिए कैनवास की आवश्यकता होती है। मैं नेटवर्क को इनिशियलाइज़ करने के लिए $ (center # सेंटर-पेन ’) का इस्तेमाल कर रहा हूँ।

मैं सैद्धांतिक रूप से दोनों आकार के परिदृश्यों को संभालने के लिए एक ही फ़ंक्शन का उपयोग कर सकता हूं। मुझे लगता है कि कैमरा .updateProjectionMatrix () के साथ समस्या हो रही है जब फ़ंक्शन को बुलाया जा रहा है। मेरे पास फंक्शन के भीतर एक अलर्ट () है और यह रिसाइज पर फायर करता है, इसलिए मैं केवल इसके कैमरा और रेंडरर का पता लगा सकता हूं।

मुझे क्लिक करने योग्य होने के लिए कैनवास के भीतर सभी वस्तुओं की भी आवश्यकता है, जिनके लिए मेरे पास एक फ़ंक्शन है, लेकिन इसे अपडेट करने की आवश्यकता है, सही?
मैं CombinedCamera का उपयोग कर रहा हूं। (मैं इस पर कोई दस्तावेज नहीं पा सकता, केवल एक उदाहरण);

यह वह लेआउट है जिसका मैं उपयोग कर रहा हूं, कम या ज्यादा: http://layout.jquery-dev.net/demos/simple.html
मुझे 'आकार-केंद्र-फलक' को गतिशील रूप से बिना आकार के बटन को भरने के लिए एक आकार बदलने वाले फ़ंक्शन की आवश्यकता है

धन्यवाद,
ब्रेंट

मुझे क्षमा करें, लेकिन मुझे समझ नहीं आ रहा है कि समस्या क्या है, क्या आप स्पष्टीकरण को सरल बनाने का प्रयास कर सकते हैं?

ठीक है माफ़ कर दो।

1. क्या आप मुझे कंबाइंडमेकेरा प्रलेखन के बारे में समझा या लिंक कर सकते हैं
2. आकार बदलने पर, यह कहते हुए त्रुटियां होती हैं कि "कोई विधि updateProjectionMatrix ()" नहीं है
3. कैसे, और क्या सभी, मुझे आकार बदलने पर अद्यतन करना चाहिए। (इसके अलावा, यह कैसे घटनाओं को नियंत्रित करने के लिए किरणों को प्रभावित करता है)

ब्रेंट

1 क्या आप मुझे कंबाइंडमेकेरा प्रलेखन के बारे में समझा या लिंक कर सकते हैं

केवल यही बात है:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 आकार बदलने पर, यह कहते हुए कि "कोई विधि अद्यतनप्रणालीमैट्रिक्स () नहीं है"

जब मैं http://layout.jquery-dev.net/demos/simple.html पर जाता हूं और उस पृष्ठ को आकार देता हूं, जिसमें ऐसी कोई त्रुटि नहीं है। मैं केवल Uncaught TypeError: Object #<Object> has no method 'getCookie' देखता हूं

3 कैसे, और क्या सभी, मुझे आकार बदलने पर अद्यतन करना चाहिए। (इसके अलावा, यह कैसे घटनाओं को नियंत्रित करने के लिए किरणों को प्रभावित करता है)

आपको कैमरा पहलू अनुपात (चौड़ाई / ऊंचाई) अपडेट करना चाहिए। और रेंडर करने के लिए एक नया आकार सेट करें। कैसे आकार बदलने से किरण प्रभावित होती है, कृपया # 988 पढ़ें।

कैमरा.स्पेक्ट = चौड़ाई / ऊंचाई; ठीक काम करता है, लेकिन camera.updateProjectionMatrix () त्रुटि फेंक रहा है। यह मेरे लेआउट के साथ कुछ भी नहीं करना चाहिए, बस onWindowResize () फ़ंक्शन।

यूआई-लेआउट लिंक उनके उदाहरण के लिए था।

क्या आप अपना कोड या एक लाइव लिंक साझा कर सकते हैं? camera निश्चित रूप से updateProjectionMatrix() विधि है।

यहाँ मेरा भंडार है:
https://github.com/BioInfoBrent/BIOINFORMATICS
फ़ाइल:
BIOINFORMATICS / js / networkMain.js

यह परियोजना अभी टुकड़ों में है, मध्य सेमेस्टर के बीच में फिर से लिखना। मूल परियोजना को एक बड़े "SWITCH" बयान द्वारा नियंत्रित किया गया था, मैं इसके साथ दूर करने की प्रक्रिया में हूं।

मेरे पास सप्ताह के अंत में वास्तुकला पूरी होगी, जो परियोजना के वास्तविक THREE.js पक्ष पर काम करने के लिए बहुत समय खाली कर देगा। मेरे पास कुछ और प्रश्न होंगे और एक या दो दिन में अपने प्रश्नों को स्पष्ट और निर्देशित और समझाने में सक्षम हो जाएगा।

ओह समझा। CombinedCamera कैमरा के पास updateProjectionMatrix() ।

@ zz85: हो सकता है कि यह एक जोड़ने के लिए अच्छा होगा updateProjectionMatrix() करने के लिए विधि CombinedCamera कि कॉल updateProjectionMatrix() दोनों पर cameraO और cameraP ?

धन्यवाद! मैं इसे देखूंगा। मेरा प्रोजेक्ट मेरे सर्वर पर है।
पता: http://cas-biodb.cas.unt.edu/bionet/dev.html
शीर्ष पर "नेटवर्क" बटन वर्तमान में केवल काम करने वाला हिस्सा है।

धन्यवाद!

निम्नलिखित ने इसे मेरे लिए हल किया:

camera.aspect = 1;
camera.updateProjectionMatrix ();
renderer.setSize (window.innerWidth, window.innerHeight);

मैं संस्करण 66 और कॉलिंग का उपयोग कर रहा हूं

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

CombinedCamera लिए काम नहीं किया। इसके बजाय मुझे कुछ ऐसा करना था

function onWindowResize(){

    if(camera.inPerspectiveMode){
        camera.cameraP.aspect = window.innerWidth / window.innerHeight;
        camera.cameraP.updateProjectionMatrix();
    }
    else{
        camera.cameraO.left = window.innerWidth / - 2;
        camera.cameraO.right = window.innerWidth / 2;
        camera.cameraO.top = window.innerHeight / 2;
        camera.cameraO.bottom = window.innerHeight / - 2;
        camera.cameraO.updateProjectionMatrix();
    }

    renderer.setSize( window.innerWidth, window.innerHeight );

}

मैं प्रतिक्रिया तीन फाइबर में glft का आकार बदलना चाहता हूं