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 () для инициализации сети, которая правильно заполняет "center" div желаемыми размерами, но я не могу изменить размер.

Теоретически я могу использовать одну и ту же функцию для обработки обоих сценариев изменения размера. Похоже, у меня проблемы с camera.updateProjectionMatrix () при вызове функции. У меня есть alert () внутри функции, и он срабатывает при изменении размера, поэтому я могу понять только камеру и средство визуализации.

Мне также нужно, чтобы все объекты на холсте были интерактивными, для чего у меня есть функция, но ее нужно обновить, верно?
Я использую CombinedCamera. (Я не могу найти по нему никакой документации, только пример);

Я более или менее использую этот макет: http://layout.jquery-dev.net/demos/simple.html
Мне нужна функция изменения размера, чтобы динамически заполнять "ui-center-pane" без кнопки изменения размера

Благодаря,
Brent

Извините, но я не понимаю, в чем проблема, вы можете попытаться упростить объяснение?

Хорошо, прости.

1. Не могли бы вы объяснить или связать меня с документацией CombinedCamera
2. при изменении размера появляется сообщение об отсутствии метода updateProjectionMatrix ().
3. Как и что мне следует обновлять при изменении размера. (Также, как это влияет на пересекающиеся лучи для обработки событий)

Brent

1 Не могли бы вы объяснить или связать меня с документацией CombinedCamera

Это единственное, что есть:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 при изменении размера появляется сообщение об отсутствии метода updateProjectionMatrix ().

Когда я перехожу на http://layout.jquery-dev.net/demos/simple.html и меняю размер страницы, я не вижу такой ошибки. Я вижу только Uncaught TypeError: Object #<Object> has no method 'getCookie'

3 Как и что мне следует обновлять при изменении размера. (Также, как это влияет на пересекающиеся лучи для обработки событий)

Вам следует обновить соотношение сторон камеры (ширина / высота). И установите новый размер для рендерера. О том, как изменение размера влияет на луч, читайте в # 988.

camera.aspect = ширина / высота; работает нормально, но camera.updateProjectionMatrix () выдает ошибку. Это не должно иметь ничего общего с моим макетом, только функция onWindowResize ().

Ссылка UI-Layout была на их пример.

Вы можете поделиться своим кодом или живой ссылкой? camera определенно имеет метод updateProjectionMatrix() .

Вот мой репозиторий:
https://github.com/BioInfoBrent/BIOINFORMATICS
Файл:
БИОИНФОРМАТИКА / js / networkMain.js

Сейчас проект разбит на части, в середине семестра его переписывают. Первоначальный проект контролировался одним большим заявлением "SWITCH", я в процессе покончить с этим.

Я завершу архитектуру в конце недели, что освободит много времени для работы над фактической стороной проекта THREE.js. У меня будет еще несколько вопросов, и я смогу направлять и объяснять свои вопросы более четко через день или два.

Ах я вижу. CombinedCamera camera не имеет 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 в React Three Fibre