WebGL «FrameBuffer неполный: при выявлении модели 3DMOL.JS привязанность имеет нулевой размер». ⇐ Javascript

[Anonymous]

Симптомы: < /p>

[*] Модель рендерирует один раз, затем следующий кадр бросает ошибку. < /li>
При изменении маршрута или с коллапсом /вкладками. /> < /ul>
Код компонента: < /p>
import React, { useRef, useEffect } from "react";
import * as $3Dmol from "3dmol";

export default function Protein3DMol({ pdbText }) {
const divRef = useRef(null);

useEffect(() => {
if (!divRef.current || !pdbText) return;

const viewer = $3Dmol.createViewer(divRef.current, { backgroundColor: "white" });

viewer.addModel(pdbText, "pdb");
viewer.setStyle({}, { cartoon: { color: "spectrum" } });
viewer.zoomTo();
viewer.render();

return () => {
viewer.clear();
const canvas = divRef.current.querySelector("canvas");
const gl = canvas?.getContext("webgl") || canvas?.getContext("experimental-webgl");
gl?.getExtension("WEBGL_lose_context")?.loseContext();
};
}, [pdbText]);

return ;
}
< /code>
Fetch Logic: < /p>
fetch("https://two4-cp-backend.onrender.com/filtered_pdbs/{pdb}")
.then(res => res.text())
.then(setPdbText);
< /code>
Что я попробовал: < /p>

ждать div.clientwidth && clientHeight перед вызовом
createviewer.
set minheight: 300 на контейнере. /> Отключить аппаратное ускорение GPU.
(ошибка исчезает, но 3D, конечно, отключена.) Я хочу сохранить рендеринг живой и интерактивный , а не просто статический снимок.

Подробнее здесь: https://stackoverflow.com/questions/796 ... aying-3dmo