У меня есть компонент, который отрисовывает canvas three.js, проблема в том, что когда я открываю страницу в браузере, вижу 2, или даже 4 канваса, если предварительно нажму на функцию
Код инициализации рендера:
const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
renderer.shadowMap.enabled = true;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMapSoft = true;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.5;
document.body.appendChild(renderer.domElement);
Компонент функциональный, скинуть весь не могу, поскольку он на 500+ строк.
Могу прислать еще что-то, если нужно. Мне кажется , что это особенность react, которая по нескольку раз запускаетс процесс рендринга компонента, обновляя состояние, а поскольку я подключаю канвас через appendchild, он запускает несколько раз эту команду. Как можно этого избежать?
