Симптомы: < /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
