在使用RDKit.js来渲染出SVG格式的化学结构式后，需要尝试用3D的方式表现出来。笔者在网上寻找一番，找到了一个叫MolView的工具。

这个工具使用的是HTML的内联框架元素<iframe>，将3D分子示意图嵌入其中。具体是将<iframe>的src属性按照要求设置为需要的值。示例如下：

之前使用的RDKit.js的smiles字符串为：

CC(=O)Oc1ccccc1C(=O)O

绘制出的分子结构式如下：

MolView化学结构式预览使用尝试_3D

同样的，对于MolView，一个合适的src属性为：

https://embed.molview.org/v1/?mode=balls&smiles=CC(=O)Oc1ccccc1C(=O)O&bg=white

只需要将https://embed.molview.org/v1/?mode=balls&smiles=与smiles字符串拼接即可。而后续的&bg=white设置的为展示属性值，bg即为background，设置背景为白色；也可以为black或gray。

示范的完整<iframe>元素如下：

<iframe style="width: 500px; height: 300px;" frameborder="0" src="https://embed.molview.org/v1/?mode=balls&smiles=CC(=O)Oc1ccccc1C(=O)O&bg=white"></iframe>

可以点击这个查看一下效果。

也把这两个集成了一下：

<!DOCTYPE html>
<head>
    
</head>

<script src="./RDKit_minimal.js"></script>
<script src="./draws.js"></script>
<script>
  onRuntimeInitialized: initRDKitModule().then(function (instance) {
      RDKitModule = instance;
      console.log('version: ' + RDKitModule.version());
  });
</script>

<body>
    <button onclick="draw()">DRAW</button>
    <div class="aaa"></div>
    <script src="./RDKitc.js"></script>
    <button onclick="aaa('CC(=O)Oc1ccccc1C(=O)O')">ConvertTo3D</button>
    <div class="threeDstruct" id="threeDstruct">
    </div>
</body>
// RDKitc.js
function draw() {
    var divc = document.querySelector("div.aaa");
    var smiles = "CC(=O)Oc1ccccc1C(=O)O";
    var mol = RDKitModule.get_mol(smiles);
    var dest = document.getElementById("example-1-output");
    var svg = mol.get_svg();
    divc.innerHTML = "<div id='drawing'>" + svg + "</div>";
}
// draws.js
function aaa(smiles) {
    let div = document.querySelector("div.threeDstruct");
    var ifrc = document.createElement('iframe');
    ifrc.style.width = '500px';
    ifrc.style.height = '500px';
    ifrc.style.border = "0px";
    var src = 'https://embed.molview.org/v1/?mode=balls&smiles=' + smiles + '&bg=white';
    ifrc.src = src;
    div.appendChild(ifrc);
}

不过这样需要联网。查看官方的文档是使用JSmol库制作的，后面再研究研究完整的本地解决方案。