npm 包 3Dmol 使用教程

3Dmol 是一种方便的 JavaScript 库，可用于在网页中呈现分子结构。使用 3Dmol 可以创建交互式的化学视图，使用户能够浏览和旋转分子，深入了解其特性。这篇文章将介绍如何使用 npm 包管理器来安装和使用 3Dmol。

安装 3Dmol

要使用 3Dmol，首先需要安装它。可以通过运行以下命令来安装 3dmol：

npm install 3dmol

然后，在 HTML 文件中添加以下代码来包含 3Dmol：

<script src="https://unpkg.com/3dmol/build/3Dmol-min.js"></script>

或者，您可以通过 import 语句将 3Dmol 引入您的 JavaScript 项目中：

import $3Dmol from '3dmol';

创建分子渲染器

要使用 3Dmol 渲染分子，需要创建一个分子渲染器对象。可以通过调用 $3Dmol.createViewer() 函数来创建该对象：

var element = document.getElementById('viewer');
var viewer = $3Dmol.createViewer(element);

在上面的代码示例中，我们通过 getElementById 方法获取 id 属性为 viewer 的 HTML 元素，并将其传递给 createViewer 函数。这样就创建了一个新的分子渲染器对象 viewer。

加载分子结构

要加载分子结构，可以使用 addModel 方法。该方法接受一个 URL 字符串或者表示分子结构的 JavaScript 对象。

var pdbUrl = "https://files.rcsb.org/download/6LU7.pdb";
$3Dmol.download(pdbUrl, function (pdbData) {
    viewer.addModel(pdbData, "pdb");
    viewer.setStyle({}, {cartoon: {color: 'spectrum'}});
    viewer.zoomTo();
    viewer.render();
})

上面的代码示例从 RCSB 数据库下载了一个 PDB 文件，并通过 addModel 方法将其添加到分子渲染器对象中。接下来，我们设置了所有原子的漫游样式，使用了颜色映射，然后调用 zoomTo 方法来缩放视图以适合显示整个分子。最后，我们调用了 render 方法来呈现分子。

添加用户交互

3Dmol 还提供了许多可用于改变分子外观和交互的选项。例如，可以使用 setStyle 方法设置分子的样式。

viewer.setStyle({resn: "ALA"}, {sphere: {radius: 0.5, color: "green"}});

这个例子将氨基酸为 ALA 的所有原子设置为绿色球体。

您还可以启用一些交互功能。例如，可以使用 click 事件来让用户选择分子中的原子：

viewer.zoomTo();
viewer.render();
viewer.setStyle({}, {cartoon: {color: 'spectrum'}});
viewer.addClickListener(function (pickingData) {
    console.log(pickingData);
    viewer.setStyle({serial: pickingData.atom.serial}, {sphere: {color: 'blue', radius: 0.5}});
    viewer.render();
});

上面的代码示例将为分子添加 click 事件监听器。当用户单击任意原子时，该方法将在控制台中打印有关选择的信息，并使所选原子变为蓝色球体。

结论

现在您已经了解了如何使用 npm 包管理器安装和使用 3Dmol 来呈现分子结构。通过探索 3Dmol 的众多选项和功能，您可以创建出令人叹为观止的交互式化学视图。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37473