Как сделать два canvas для одной сцены в three.js?

В three.js для создания двух canvas для одной сцены можно использовать два отдельных экземпляра WebGLRenderer. WebGLRenderer - это класс в three.js, который отвечает за рендеринг графики на основе WebGL, который является низкоуровневым API для работы с графикой в браузере.

Для начала, необходимо создать два контейнера div, которые будут содержать два canvas. Например:

<div id="container1"></div>
<div id="container2"></div>

Затем, в JavaScript, нужно создать два экземпляра WebGLRenderer и связать их с соответствующими контейнерами. Кроме того, необходимо установить размеры canvas, чтобы они занимали всю доступную область контейнера.

var renderer1 = new THREE.WebGLRenderer();
var container1 = document.getElementById('container1');
renderer1.setSize(container1.offsetWidth, container1.offsetHeight);
container1.appendChild(renderer1.domElement);

var renderer2 = new THREE.WebGLRenderer();
var container2 = document.getElementById('container2');
renderer2.setSize(container2.offsetWidth, container2.offsetHeight);
container2.appendChild(renderer2.domElement);

После этого можно создать сцену и добавить в нее объекты, как обычно.

var scene = new THREE.Scene();
// Добавление объектов в сцену

// Создание камеры
var camera = new THREE.PerspectiveCamera(75, container1.offsetWidth / container1.offsetHeight, 0.1, 1000);
camera.position.z = 5;

// Обновление рендеринга на каждом кадре (аналогично, как это делается с одним renderer)
var animate = function () {
    requestAnimationFrame(animate);

    // Обновление объектов и камеры

    renderer1.render(scene, camera);
    renderer2.render(scene, camera);
};

animate();

Теперь у вас две canvas, каждая из которых рендерит одну и ту же сцену с помощью двух разных WebGLRenderer. Это может быть полезно, например, если вы хотите отобразить одну и ту же сцену в разных частях веб-страницы или применить разные эффекты к каждому canvas.