学习threejs，导入pdb格式的模型

👨‍⚕️ 主页： gis分享者

👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- [1.1 ☘️THREE.PDBLoader pdb模型加载器](#1.1 ☘️THREE.PDBLoader pdb模型加载器)
二、🍀导入pdb格式的模型
- [1. ☘️实现思路](#1. ☘️实现思路)
- [2. ☘️代码样例](#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. ☘️代码样例

html 复制代码

<!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 shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(30, 30, 30);
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var 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>

效果如下：