模型，pdb文件"/>
原始html和vue中使用3dmol js展示分子模型，pdb文件
软件：
3dmol.js 3Dmol.js
原始html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>wechat</title><meta http-equiv="Access-Control-Allow-Origin" content="*" /><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><script src=".3.1.min.js"></script><!-- 3d模型展示 --><script src=".js"></script> <script src=".ui-min.js"></script> </head><body><div><input type="file" name="file" value="上传文件" onchange="addFile(this)" /><div id="container-01" style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-style='stick' data-ui='true'></div></div></body>
</html>
<style>.mol-container {width: 75%;height: 400px;position: relative;}</style><script>function addFile(that){var input = that;var reader = new FileReader();reader.readAsText(input.files[0]);reader.onload = function() {var pdbData = reader.result;// 创建3Dmol对象let element = $('#container-01');var viewer = $3Dmol.createViewer(element, {defaultcolors : $3Dmol.rasmolElementColors});// 添加分子viewer.addModel(pdbData, "pdb");// viewer.addModel(pdbData, "pdb").setStyle({}, {"cartoon": { color: '#17ac80'} });// viewer.addSurface($3Dmol.SurfaceType.VDW, {'opacity':0.5, color: 'white'});// 旋转分子viewer.spin("y",1);// 在HTML页面中显示分子viewer.zoomTo();viewer.render();}}</script>
vue
index.html中引入js
<!-- 3d模型展示 --><script src=".3.1.min.js"></script><script src=".js"></script> <script src=".ui-min.js"></script> vue文件中
<template><div class="content"><el-uploadref="upload"action="alert":auto-upload="false":file-list="uploadFiles":on-change="loadJsonFromFile"><el-button slot="trigger" size="small" type="primary">选取文件</el-button></el-upload><divid="container-01"style="height: 400px; width: 400px; position: relative"class="viewer_3Dmoljs"data-pdb=""data-backgroundcolor="0xffffff"data-style="stick"data-ui="true"></div></div>
</template>
<script>
export default {components: {},data() {return {uploadFiles: [],};},created() {},methods: {readFile(filePath) {// 创建一个新的xhr对象let xhr = null;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHTTP");}const okStatus = document.location.protocol === "file" ? 0 : 200;xhr.open("GET", filePath, false);xhr.overrideMimeType("text/html;charset=utf-8");xhr.send(null);return xhr.status === okStatus ? xhr.responseText : null;},//element删除组件上传文件成功loadJsonFromFile(file, fileList) {this.uploadFiles = fileList;this.submit();},submit() {// 解析上传的文件let file = this.uploadFiles[0];let reader = new FileReader();reader.readAsText(file.raw);reader.onload = (e) => {// 读取文件内容var pdbData = e.target.result;// 接下来可对文件内容进行处理console.log(pdbData);let element = $("#container-01");let config = { backgroundColor: "gray" };let viewer = $3Dmol.createViewer(element, config);添加分子viewer.addModel(pdbData, "pdb").setStyle({}, { cartoon: { color: "#17ac80" } });viewer.addSurface($3Dmol.SurfaceType.VDW, {opacity: 0.5,color: "white",});//分子动态围绕y轴旋转viewer.spin("y", 2);在HTML页面中显示分子viewer.zoomTo();viewer.render();viewer.zoom(1, 2000);};},},
};
</script><style>
.mol-container {width: 75%;height: 400px;position: relative;
}
</style>
更多推荐
原始html和vue中使用3dmol js展示分子模型,pdb文件
发布评论