Как добавить оверлейный раздел, используя three.js и элементы управления орбитой, которые реагируют на движение основного вида? - PullRequest
Новая
       22

Как добавить оверлейный раздел, используя three.js и элементы управления орбитой, которые реагируют на движение основного вида?

0 голосов
/ 10 мая 2019

Я хочу добавить раздел в одном углу моего основного вида, в котором я отображаю небольшую версию основного вида.

Я программирую веб-страницу, используя JavaScript с three.js. У меня есть главное окно, в котором я отображаю некоторые геометрии. Есть вращающиеся и подвижные с помощью OrbitControls.

В углу моего основного вида я хочу отдельный раздел, в котором я могу отобразить маленький куб, который вращается так же, как вращается мой главный вид. Но я не буду увеличивать или уменьшать масштаб, если я увеличу главный вид. 

var orientationGeometry = new THREE.Mesh( geometry, material );
camera.add( orientationGeometry );

// in animate function:
orientationCube.rotation.x = controls.getPolarAngle();
orientationCube.rotation.y = controls.getAzimuthalAngle();

При этом маленький кубик вращается правильно, и, добавив этот куб в качестве ребенка к камере, он остается зафиксированным на экране. Но когда я увеличиваю или уменьшаю эту маленькую коробку, она также отдаляется от камеры.

Есть ли способ сделать дополнительный раздел, как показано на прикрепленном изображении?

wished output

1 Ответ

0 голосов
/ 10 мая 2019

Чтобы отобразить второй видовой экран на экране, вы можете включить WebGLRenderer.ScissorTest,, установить желаемое scissor, соответственно масштабировать видовой экран и снова визуализировать сцену.Не забудьте clearDepth(), иначе ничего не будет визуализировано.

Теперь, чтобы изменить поведение камеры, вам нужно добавить в камеру вторую камеру и обновить ее в зависимости от ваших потребностей.Если вы хотите, чтобы он вращался и двигался точно так же, как и полноэкранная камера, вам необходимо обновить эти параметры.

Чтобы сохранить фиксированное состояние масштабирования, вы можете получить нормализованное положение камеры и умножить на установленное расстояние, которое вы хотите использовать. 

function animate() {

    // render full scene.
    // ...

    // setup scissor viewport.
    renderer.clearDepth(); // important!
    renderer.setScissorTest( true );
    renderer.setScissor( 20, 20, insetWidth, insetHeight );
    renderer.setViewport( 20, 20, insetWidth, insetHeight );

    // update second camera. 
    camera2.position.copy( camera.position.clone().normalize().multiplyScalar( distance ) );
    camera2.quaternion.copy( camera.quaternion );

    // render small scene.
    renderer.render( scene, camera2 );

    renderer.setScissorTest( false );

}

Вот рабочий пример https://jsfiddle.net/qwb39spx/

...