👨⚕️ 主页: gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏:threejs gis工程师
文章目录
- 一、🍀前言
- 1.1 ☘️THREE.PDBLoader pdb模型加载器
- 二、🍀导入pdb格式的模型
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于threejs在三维场景中导入pdb格式的模型,亲测可用。希望能帮助到您。一起学习,加油!加油!
1.1 ☘️THREE.PDBLoader pdb模型加载器
THREE.ColladaLoader用于加载和处理Collada(.dae)格式3D模型文件的扩展。
pdb三维文件:
PDB文件(Protein Data Bank file)是一种常用的生物分子结构文件格式,由Protein Data Bank(蛋白质数据银行)创建,主要用于存储蛋白质、核酸等生物大分子的三维结构信息。PDB文件包含了分子的原子坐标、连接关系、结构拓扑等数据,以及相关的实验测定方法和参考文献等元数据。蛋白质数据银行(www.rcsb.org)包含了很多分子和蛋白质的详细信息,还可以用PDB格式下载这些分子的数据结构。
PDB文件中的数据结构包括以下几个方面:
- 原子坐标:PDB文件记录了分子中每个原子的三维坐标信息,包括原子的X、Y、Z坐标值。
- 原子类型:PDB文件中对每个原子都有相应的原子类型标识,如碳、氧、氮等。
- 原子连接关系:PDB文件中描述了原子之间的连接关系,即原子之间的化学键类型和连接方式。
- 结构拓扑:PDB文件中还包含了分子的结构拓扑信息,如氨基酸残基之间的连接方式、螺旋、折叠等结构特征。
- 元数据:PDB文件中还包含了实验测定方法、分辨率、作者、参考文献等元数据,用于描述分子结构的来源和相关信息。
PDB 应用:
PDB文件在生物分子结构研究、药物设计、蛋白质工程等领域具有广泛的应用场景。科研人员可以通过分析PDB文件中的结构信息,了解分子的空间构型、功能区域等特征,从而揭示生物分子的结构与功能之间的关系。
二、🍀导入pdb格式的模型
1. ☘️实现思路
- 1、初始化renderer渲染器
- 2、初始化Scene三维场景scene
- 3、初始化camera相机,定义相机位置 camera.position.set,设置相机方向camera.lookAt。
- 4、创建三个THREE.DirectionalLight平行光源dir1、dir2、dir3,设置三个平行光源的位置信息,场景scene中添加dir1、dir2、dir3平行光源。创建THREE.SpotLight聚光灯光源spotLight,设置spotLight的位置信息,场景scene中添加spotLight。
- 5、加载几何模型:创建THREE.PDBLoader加载器loader,loader调用load方法加载‘aspirin.pdb’分子模型。在load回调函数中,处理分子顶点,使用球体几何体网格对象代表分子的原子顶点,scene中添加原子顶点,处理分子连线,使用管道几何体网格对象代表原子键,scene中添加原子键。具体代码参考代码样例。
- 6、加入stats监控器,监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html>
<html>
<head><title>导入pdb格式的模型</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/PDBLoader.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<div id="WebGL-output">
</div><!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">// once everything is loaded, we run our Three.js stuff.function init() {var stats = initStats();// 创建场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器,并设置大小var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// 设置相机位置和方向camera.position.x = 6;camera.position.y = 6;camera.position.z = 6;camera.lookAt(new THREE.Vector3(0, 0, 0));var dir1 = new THREE.DirectionalLight(0.4);dir1.position.set(-30, 30, -30);scene.add(dir1);var dir2 = new THREE.DirectionalLight(0.4);dir2.position.set(-30, 30, 30);scene.add(dir2);var dir3 = new THREE.DirectionalLight(0.4);dir3.position.set(30, 30, -30);scene.add(dir3);// add spotlight for the shadowsvar spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(30, 30, 30);scene.add(spotLight);// add the output of the renderer to the html elementdocument.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);// call the render functionvar step = 0;var controls = new function () {};var gui = new dat.GUI();var mesh;var loader = new THREE.PDBLoader();var group = new THREE.Object3D();loader.load("../assets/models/aspirin.pdb", function (geometry, geometryBonds) {var i = 0;// 处理分子顶点geometry.vertices.forEach(function (position) {var sphere = new THREE.SphereGeometry(0.2);var material = new THREE.MeshPhongMaterial({color: geometry.colors[i++]});var mesh = new THREE.Mesh(sphere, material);mesh.position.copy(position);group.add(mesh);});// 处理分子连线for (var j = 0; j < geometryBonds.vertices.length; j += 2) {var path = new THREE.SplineCurve3([geometryBonds.vertices[j], geometryBonds.vertices[j + 1]]);var tube = new THREE.TubeGeometry(path, 1, 0.04);var material = new THREE.MeshPhongMaterial({color: 0xcccccc});var mesh = new THREE.Mesh(tube, material);group.add(mesh);}scene.add(group);});render();function render() {stats.update();if (group) {group.rotation.y += 0.006;group.rotation.x += 0.006;}requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>
效果如下: