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

server/2025/1/4 6:31:36/

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录

  • 一、🍀前言
  • 二、🍀导入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>

效果如下:
在这里插入图片描述


http://www.ppmy.cn/server/154975.html

相关文章

BUUCTF Pwn ciscn_2019_es_2 WP

1.下载 checksec 用IDA32打开 定位main函数 发现了个假的后门函数&#xff1a; 看看vul函数&#xff1a; 使用read读取 想到栈溢出 但是只有48个 只能覆盖EBP和返回地址 长度不够构造 所以使用栈迁移&#xff1a; 栈迁移需要用到leave ret 使用ROPgadget找地址&#xff1a; …

jmeter混合场景测试,设置多业务并发比例(吞吐量控制器)

jmeter混合场景测试&#xff0c;设置多业务并发比例&#xff08;吞吐量控制器&#xff09; 测试目的 为了验证需求提出的性能要求&#xff0c;结合实际可能的高压力场景&#xff0c;较全面的检测系统的性能表现。 测试方法 根据需求调研的业务模型和交易占比&#xff0c;设置不…

头歌python通关:面向对象程序设计

第1关&#xff1a;工资结算系统 本关任务&#xff1a;某公司有三种类型的员工 分别是部门经理、程序员和销售员&#xff0c;需要设计一个工资结算系统 根据提供的员工信息来计算月薪&#xff0c;部门经理的月薪是每月固定15000元&#xff0c;程序员的月薪按本月工作时间计算每…

Java-list均分

在Java中,如果你有一个List并且想要将其均分到多个子列表中,可以使用以下方法。假设你有一 个List<T>,并且想要将其分成n个子列表。 import java.util.ArrayList; import java.util.List;public class ListSplitter {public static <T> List<List<T>…

太速科技-138-1路1Gsps AD 1路1Gsps DA高速采集存储回放设备

1路1Gsps AD 1路1Gsps DA高速采集存储回放设备 一、产品简介 产品基于1Gsps的AD&#xff0c;1Gsps的DA 实现PCIe的数据采集、存储、回放功能。硬件包括FPGA采集播出卡、PCIe固态盘、超威服务器。 二、采集卡性能指标采集卡原理框图&#xff1a; 板卡…

ITOM系统在IT运维中的作用

在企业IT运维中&#xff0c;ITOM系统&#xff08;IT运营管理&#xff09;通过整合、自动化和监控&#xff0c;能够帮助企业有效管理IT基础设施&#xff0c;提高运维效率和系统的可靠性。本文将从多个角度探讨ITOM系统在IT运维中的作用及其功能。 提升运维效率&#xff1a;统一平…

【鸿蒙NEXT】鸿蒙里面类似iOS的Keychain——关键资产(@ohos.security.asset)实现设备唯一标识

前言 在iOS开发中Keychain 是一个非常安全的存储系统&#xff0c;用于保存敏感信息&#xff0c;如密码、证书、密钥等。与 NSUserDefaults 或文件系统不同&#xff0c;Keychain 提供了更高的安全性&#xff0c;因为它对数据进行了加密&#xff0c;并且只有经过授权的应用程序才…

【开源框架】从零到一:AutoGen Studio开源框架-UI层环境安装与智能体操作全攻略

一、什么是AutoGen AutoGen是微软推出的一款工具&#xff0c;旨在帮助开发者轻松创建基于大语言模型的复杂应用程序。在传统上&#xff0c;开发者需要具备设计、实施和优化工作流程的专业知识&#xff0c;而AutoGen则通过自动化这些流程&#xff0c;简化了搭建和优化的过程。 …