原始html和vue中使用3dmoljs展示分子模型，pdb文件
- 手机
- 2025-08-13 08:48:01
软件：
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=" code.jquery /jquery-3.3.1.min.js"></script> <!-- 3d模型展示 --> <script src=" 3Dmol.org/build/3Dmol-min.js"></script> <script src=" 3Dmol.org/build/3Dmol.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=" code.jquery /jquery-3.3.1.min.js"></script> <script src=" 3Dmol.org/build/3Dmol-min.js"></script> <script src=" 3Dmol.org/build/3Dmol.ui-min.js"></script> vue文件中 <template> <div class="content"> <el-upload ref="upload" action="alert" :auto-upload="false" :file-list="uploadFiles" :on-change="loadJsonFromFile" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> </el-upload> <div id="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中使用3dmoljs展示分子模型，pdb文件由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“原始html和vue中使用3dmoljs展示分子模型，pdb文件”
上一篇
K8S篇之Pod中的资源限额
