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-pane'). width () و .height () لتهيئة الشبكة ، والتي تملأ div "المركز" بشكل صحيح بالأبعاد المطلوبة ، لكن لا يمكنني تغيير الحجم.

يمكنني نظريًا استخدام نفس الوظيفة للتعامل مع كلا سيناريوهين تغيير الحجم. يبدو أنني أواجه مشكلات مع الكاميرا .updateProjectMatrix () عندما يتم استدعاء الوظيفة. لدي تنبيه () داخل الوظيفة ويتم تنشيطه عند تغيير الحجم ، لذلك يمكنني فقط تحديد الكاميرا والعارض.

أحتاج أيضًا إلى أن تكون جميع العناصر الموجودة في اللوحة قابلة للنقر ، والتي لدي وظيفة لها ، ولكن يجب تحديثها ، أليس كذلك؟
أنا أستخدم CombinedCamera. (لا يمكنني العثور على أي وثائق عليها ، فقط مثال) ؛

هذا هو التخطيط الذي أستخدمه ، أكثر أو أقل: http://layout.jquery-dev.net/demos/simple.html
أحتاج إلى وظيفة تغيير الحجم لملء "ui-center-pane" ديناميكيًا بدون زر تغيير الحجم

شكر،
برنت

أنا آسف ، لكني لا أفهم ما هي المشكلة ، هل يمكنك محاولة تبسيط الشرح؟

حسنا آسف.

1. هل يمكنك شرح لي أو ربطني بوثائق CombinedCamera
2. عند تغيير الحجم ، تظهر أخطاء تقول "لا توجد طريقة updateProjectMatrix ()"
3. كيف وماذا يجب أن أقوم بالتحديث عند تغيير الحجم. (أيضًا ، كيف تؤثر على الأشعة المتقاطعة للتعامل مع الأحداث)

برنت

1 هل يمكن أن تشرح لي أو تربطني بوثائق CombinedCamera

هذا هو الشيء الوحيد الموجود:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 عند تغيير الحجم ، تظهر أخطاء تقول "لا توجد طريقة updateProjectMatrix ()"

عندما أذهب إلى http://layout.jquery-dev.net/demos/simple.html وأقوم بتغيير حجم الصفحة ، لا أرى مثل هذا الخطأ. لا أرى سوى Uncaught TypeError: Object #<Object> has no method 'getCookie'

3 كيف وماذا يجب أن أقوم بالتحديث عند تغيير الحجم. (أيضًا ، كيف تؤثر على الأشعة المتقاطعة للتعامل مع الأحداث)

يجب عليك تحديث نسبة أبعاد الكاميرا (العرض / الارتفاع). وقم بتعيين حجم جديد للعارض. بالنسبة لتأثير تغيير الحجم على الشعاع ، يرجى قراءة # 988.

camera.aspect = العرض / الارتفاع ؛ يعمل بشكل جيد ، لكن camera.updateProjectMatrix () تسبب في حدوث الخطأ. لا يجب أن يكون لها أي علاقة بالتخطيط ، فقط وظيفة onWindowResize ().

كان رابط UI-Layout على سبيل المثال.

هل يمكنك مشاركة رمزك أو رابط مباشر؟ camera بالتأكيد على طريقة updateProjectionMatrix() .

هنا مستودعي:
https://github.com/BioInfoBrent/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.updateProjectMatrix () ،
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 في رد فعل ثلاثة ألياف