HTML里面调用文件展示三维结果

在UniProt里面下载的化合物的三维结构(全是代码),有json,svg等格式,怎么在我们HTML里面展示呢,好像是不能直接调用文件要用插件,不知道要用什么插件。

该回答引用ChatGPT

要在HTML中展示化合物的三维结构,你需要使用分子可视化插件。以下是几个可用的插件:

Three.js:Three.js 是一个基于 WebGL 的 JavaScript 库,用于创建和显示动态的三维图形。它可以轻松地在网页上渲染分子结构。

ChemDoodle Web Components:这是一个基于 HTML5 和 JavaScript 的分子可视化库,它提供了许多分子结构绘制和分子数据可视化的功能。

JSmol:JSmol 是一个基于 JavaScript 的分子可视化程序,可以在网页上展示分子结构,并提供许多交互式功能。

如果你已经有了分子数据的 JSON 或 SVG 格式,你可以使用上述插件中的任何一个来在 HTML 中渲染分子结构。你只需要将插件的代码嵌入到你的 HTML 文件中,并根据插件的文档和示例来使用它们。例如,对于 JSmol,你可以使用以下代码在 HTML 中展示分子结构:


<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<script type="text/javascript">
  Jmol.getApplet("jmolApplet", {
    width: 300,
    height: 300,
    j2sPath: "jsmol/j2s",
    script: "load DATA 'your_molecule.json';",
  });
</script>
<div id="jmolApplet"></div>

其中,your_molecule.json 是你下载的分子数据文件的名称。你需要将其替换为实际的文件名,并将其放在与 HTML 文件相同的目录中。