Как создать два элемента canvas для отображения одной сцены в three.js?

В Three.js не предусмотрен встроенный механизм для отображения одного и того же содержимого 3D сцены на нескольких элементах canvas одновременно. Тем не менее, можно организовать такое отображение, используя одно render вызовы с разными камерами и контекстами рендеринга.

Чтобы отобразить одну сцену на двух разных элементах canvas, вы можете использовать следующий подход:

1. Создайте одну общую сцену.
2. Используйте два экземпляра `THREE.WebGLRenderer`, каждый с своим собственным canvas элементом.
3. Создайте две камеры, если у вас есть разные точки обзора, или используйте одну камеру, если точка обзора одинакова для обоих canvas.
4. В вашем анимационном цикле вызывайте метод `render` для каждого renderer'а с соответствующим canvas.

Пример кода для описанного подхода будет выглядеть примерно так:

```javascript
// Предполагается, что у вас уже есть инициализированная сцена `scene`

// Инициализация первого рендерера
const canvas1 = document.getElementById('canvas1');
const renderer1 = new THREE.WebGLRenderer({canvas: canvas1});
renderer1.setSize(window.innerWidth / 2, window.innerHeight);

// Инициализация второго рендерера
const canvas2 = document.getElementById('canvas2');
const renderer2 = new THREE.WebGLRenderer({canvas: canvas2});
renderer2.setSize(window.innerWidth / 2, window.innerHeight);

// Создание камер (одинаковые или разные в зависимости от требования проекта)
const camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight / 2, 0.1, 1000);
camera1.position.z = 5;

// Если нужна другая точка зрения, установите camera2 соответственно
const camera2 = camera1.clone(); // или создайте новую камеру с другими параметрами

function animate() {
    requestAnimationFrame(animate);
    
    // Рендер сцены с помощью первого рендерера и камеры
    renderer1.render(scene, camera1);
    
    // Рендер сцены с помощью второго рендерера и камеры
    renderer2.render(scene, camera2);
}

animate();
```

Затем вы должны убедиться, что ваш DOM содержит два элемента canvas с идентификаторами `canvas1` и `canvas2`.

Важно, что этот подход будет использовать дополнительные ресурсы GPU, поскольку каждый экземпляр renderer будет выполнять отдельное отрисовку сцены. Также вы должны быть осторожны при управлении ресурсами и изменении сцены, чтобы все изменения оставались синхронизированными между отображениями.

Для сцен с высокой полигональностью или сложным шейдерам, это может быть производительно неоптимальным, и в таких случаях может быть целесообразно рассмотреть альтернативные подходы, такие как использование одного canvas и перенаправление вывода на разные места DOM с помощью CSS или WebGL-расширений, но такие решения значительно сложнее в реализации и выходят за рамки стандартных возможностей Three.js.

Точно такая же сцена требуется в другом месте, и не хотелось бы дублировать код и создавать ту же сцену для другого канвас
 
 Сцену дублировать не обязательно. WebGLRenderer не умеет рендерить в несколько мест одновременно, но можно иметь одну сцену и много рендереров, каждый из которых будет рендерить ее в свой канвас. Это работает. 
 
 Если посмотреть с другой стороны, то возможно, что вам не нужны два канваса. Это может звучать странно, но тем не менее. Пользователь же все равно видит только один экран информации. Можно иметь один канвас на весь экран, и в нем рендерить сцены в какие-то его участки. Там есть такой функционал у рендерера, называется "ножницы" (scissor). Его можно использовать как раз для таких задач. Есть хороший пример в документации . 
 
 Но если делать именно 100% дублирование, то оба этих варианта будут не самыми толковыми с точки зрения производительности. В лоб скопировать уже готовое содержимое канваса в другой через drawImage должно быть проще, чем рендерить всю сцену еще раз. Поэтому решение, которое пришло вам в голову - очень даже ничего в текущем контексте. Хотя и выглядит топорно.