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

Question

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

Я программирую веб-страницу, используя 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();

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

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

Answer 1

Чтобы отобразить второй видовой экран на экране, вы можете включить 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/