Как мне создать зеркало с несколькими изображениями в ThreeJS?

Question

Я пробую код создания зеркала в three.js с официального сайта. Он использует Reflector.js, который может показывать только одно отражение объекта. Я хочу показать несколько изображений, когда два зеркала расположены под разными углами. Как мне этого добиться? Пожалуйста, помогите мне.

Код создания зеркала -

Зеркало 1 -

var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var verticalMirror = new THREE.Reflector( geometry, {
clipBias: 0.003,
textureWidth: WIDTH * window.devicePixelRatio,
textureHeight: HEIGHT * window.devicePixelRatio,
color: 0x889999,
recursion: 1
} );
verticalMirror.position.y = 50;
verticalMirror.position.z = - 50;
scene.add( verticalMirror );

Зеркало 2 -

   var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
    verticalMirror45 = new THREE.Reflector( geometry, {
            clipBias: 0.003,
            textureWidth: WIDTH * window.devicePixelRatio,
            textureHeight: HEIGHT * window.devicePixelRatio,
            color: 0x889999,
            recursion: 1
        } );
        verticalMirror45.rotateY(  Math.PI/ 1.33 );
        verticalMirror45.position.x = -15;
        verticalMirror45.position.y = 50;
        verticalMirror45.position.z =  -15;
        scene.add( verticalMirror45 ); 

Пожалуйста, помогите мне. Кто-то предлагает мне использовать Aframe. Возможно ли это с Aframe? Если да, то как?

Answer 1

Вы также можете использовать mirror.js из примера с зеркалом https://threejs.org/examples/?q=mirror

Answer 2

Попробуйте вместо mirror компонент, опирающийся на THREE.CubeCamera