当前位置：首页 > news >正文

Three读取pdb文件创建分子结构图实例

news 来源：原创 2024/4/28 8:19:00

基础环境搭建：(TrackballControls)

在这里插入图片描述

modles文件夹下新建pdb文件夹，复制官方文件夹下.pdb文件:

在这里插入图片描述

控制台打印看下pdb文件输出内容：

PDBLoader : A loader for loading a .pdb resource.The Protein Data Bank file format is a textual file describing the three-dimensional structures of molecules.

在这里插入图片描述

读取建立原子点阵：

Buffergeometry:是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。
.getAttribute ( name : String ) : BufferAttribute
返回指定名称的 attribute。

BufferAttribute:这个类用于存储与BufferGeometry相关联的 attribute（例如顶点位置向量，面片索引，法向量，颜色值，UV坐标以及任何自定义 attribute ）。利用 BufferAttribute，可以更高效的向GPU传递数据。
.getX ( index : Integer ) : Number
获取给定索引的矢量的第一维元素（即 X 值）。
.getY ( index : Integer ) : Number
获取给定索引的矢量的第二维元素（即 Y 值）。
.getZ ( index : Integer ) : Number
获取给定索引的矢量的第三维元素（即 Z 值）。

      let colors = pdb.geometryAtoms.getAttribute('color')
      let positions = pdb.geometryAtoms.getAttribute('position')
      const color = new THREE.Color()
      const position = new THREE.Vector3()
      for (let i = 0; i < positions.count; i++) {
           color.r = colors.getX(i)
           color.g = colors.getY(i)
           color.b = colors.getZ(i)
           position.x = positions.getX(i)
           position.y = positions.getY(i)
           position.z = positions.getZ(i)
           const geometry = new THREE.IcosahedronGeometry(0.1, 2)
           const material = new THREE.MeshPhongMaterial({
               color: color
           })
           const atom = new THREE.Mesh(geometry, material)
           atom.position.copy(position)
           scene.add(atom)
      }

在这里插入图片描述

读取建立原子连接：
在这里插入图片描述

分析geometryBond可知道，每三个分量确定一个点，每两个点确定一条纽带。150个分量即25条纽带。而positions.count=50，则geoometryBond.positions数组以三个分量为一点为一组排列。

.lerp ( v : Vector3, alpha : Float ) : this
v - 朝着进行插值的Vector3。
alpha - 插值因数，其范围通常在[0, 1]闭区间。
在该向量与传入的向量v之间的线性插值，alpha是沿着线的长度的百分比 —— alpha = 0 时表示的是当前向量，alpha = 1 时表示的是所传入的向量v。

.lookAt ( vector : Vector3 ) : undefined
旋转物体使其在世界空间中面朝一个点，这一方法不支持其父级被旋转过或者被位移过的物体。

    positions = pdb.geometryBonds.getAttribute('position')
    const start = new THREE.Vector3()
        const end = new THREE.Vector3()
        for (let i = 0; i < positions.count; i += 2) {
            start.x = positions.getX(i)
            start.y = positions.getY(i)
            start.z = positions.getZ(i)
            end.x = positions.getX(i + 1)
            end.y = positions.getY(i + 1)
            end.z = positions.getZ(i + 1)
            const geometry = new THREE.BoxGeometry(0.05, 0.05, 0.05)
            const material = new THREE.MeshPhongMaterial({
                color: 0xffffff
            })
            const bond = new THREE.Mesh(geometry, material)
            bond.position.copy(start)
            bond.position.lerp(end, 0.5)
            bond.scale.z = start.distanceTo(end) * 10
            bond.lookAt(end)//指定x-y面朝向
            scene.add(bond)
        }

在这里插入图片描述

原子添加标签：

CSS2DRenderer：将三维物体和基于HTML的标签相结合的渲染器。在这里，各个DOM元素也被包含到一个CSS2DObject实例中，并被添加到场景图中。

CSS2DRrenderer渲染器设置同WebGLRenderer渲染器设置。注意
labelRenderer.domElement.style.pointerEvents = 'none';//过滤掉上层renderer-div的鼠标响应？

    let atoms = pdb.json.atoms
    for (let i = 0; i < atoms.length; i++) {
        const atom = atoms[i]
        const text = document.createElement('div')
        text.style.color = 'rgb(' + atom[3][0] + ',' + atom[3][1] + ',' + atom[3][2] + ')'
        text.innerText = atom[4]

        const label = new CSS2DObject(text)
        label.position.set(atom[0], atom[1], atom[2])
        scene.add(label)
    }