文章分类 其他 3d 前端 vue.js html javascript ecmascript 阅读数 : 558 阅读时长 : 9分钟
软件:
3dmol.js 3Dmol.js
<!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="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- 3d模型展示 -->
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<script src="https://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>
<!-- 3d模型展示 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<script src="https://3Dmol.org/build/3Dmol.ui-min.js"></script>
<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>
更多【3d-原始html和vue中使用3dmol js展示分子模型,pdb文件】相关视频教程:www.yxfzedu.com