Pywebio上无法加载3dmol.js画出来的三维分子图

[liuqilei]

我想在pywebio上实时展示3dmol.js的分子图，但是用put_html运行后无法显示，请问怎么解决？

json文件和xyz.html文件见压缩包。
Desktop.zip

直接打开html文件是没问题的，Chrome浏览器可以显示3D分子结构，但是一旦放到pywebio里的put_html就不行了，很神奇。

[wang0618]

应该是不可以直接在 put_html 里加载3dmol.js的js文件，需要用 pywebio.config(js_file=...)

参见： https://pywebio.readthedocs.io/zh_CN/latest/platform.html#pywebio.config

[wang0618]

from pywebio.output import *
from pywebio import start_server, config

html = r"""
<div id="container-01" class="mol-container">t</div>

<style>
.mol-container {
  width: 100%;
  height: 1000px;
  position: relative;
}
</style>

<script>
	let element = document.querySelector('#container-01');
	let config = {backgroundColor: 'white'};
	let viewer = $3Dmol.createViewer(element, config); 
	viewer.addModel('47\n\nC          0.17361        1.06285        1.32583\nC         -1.14268        0.81282        2.05500\nO         -1.84283       -0.25395        1.42098\nC         -1.05309       -1.43221        1.42972\nC          0.40178       -1.31950        0.93364\nO          0.92936       -2.26759        0.35599\nN          1.03381       -0.12272        1.33514\nC          2.44381       -0.03665        1.60731\nC          3.26205       -1.17212        1.58606\nC          4.61627       -1.12818        1.95347\nC          5.21333        0.05374        2.38219\nC          4.41326        1.19881        2.39577\nC          3.06141        1.15641        2.00469\nN          6.57900        0.10538        2.74290\nC          7.28307        1.30753        3.07877\nC          8.69619        0.94242        2.68788\nH          9.43862        1.46614        3.29867\nO          8.74853       -0.46587        2.96342\nC          7.47113       -0.95876        2.82691\nO          7.25216       -2.15718        2.78032\nC          8.91397        1.19138        1.18570\nN         10.25367        0.86642        0.75216\nC         11.30381        1.74786        0.88468\nO         11.13468        2.85927        1.38695\nC         12.58821        1.28610        0.38961\nC         13.76597        2.01336        0.33791\nC         14.85020        1.26435       -0.20878\nC         14.44975       -0.00066       -0.54840\nS         12.81711       -0.30005       -0.23158\nCl        15.42469       -1.23601       -1.23396\nH          0.63747        1.94343        1.76468\nH         -0.03440        1.27850        0.26914\nH         -1.77548        1.70410        2.00268\nH         -0.97665        0.57360        3.11191\nH         -1.56648       -2.17819        0.81537\nH         -1.01130       -1.82260        2.45513\nH          2.89071       -2.14948        1.29469\nH          5.16907       -2.06103        1.88501\nH          4.79981        2.15994        2.72068\nH          2.53285        2.10038        2.05566\nH          7.19756        1.45004        4.16288\nH          6.92791        2.19931        2.55702\nH          8.71605        2.24306        0.94858\nH          8.24591        0.57325        0.57631\nH         10.44732       -0.06800        0.41095\nH         13.83689        3.04102        0.67821\nH         15.85783        1.63800       -0.34002\n', 'xyz');
	viewer.setStyle({'stick': {'radius': 0.05}, 'sphere': {'radius': 0.4}});
	viewer.zoomTo();
	viewer.render();
</script>

"""


@config(js_file="https://3Dmol.org/build/3Dmol-min.js")
def main():
    put_html(html)


if __name__ == '__main__':
    start_server(main, port=8088)

[liuqilei]

成功了！感谢大佬！