加载PDB格式模型
1.demo效果2.实现要点2.1 PDB模型放置路径2.2 加载PDB模型2.3 处理分子顶点2.4 处理分子连线 3.demo代码1.demo效果
如上图，该demo通过PDBLoader加载了PDB格式的模型，将分子结构模型呈现在页面中
2.实现要点
2.1 PDB模型放置路径
vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPath，此变量的值是vue中的环境变量process.env.BASE_URL
data() {return {publicPath: process.env.BASE_URL}}
2.2 加载PDB模型
这我们通过PDBLoader导入模型，不过这里需要注意导入的路径，把我们创建的publicpath变量拼接到文件的路径上，在导入的回调函数中可以进行相关处理具体如下：
const loader = new PDBLoader()loader.load(`${THIS.publicPath}models/aspirin.pdb`, model => {//对导入模型进行相关处理...})
2.3 处理分子顶点
// 获取分子位置分量数组const atomsPositionArray = model.geometryAtoms.attributes.position.array// 获取分子颜色分量数组const colors = model.geometryAtoms.attributes.color.array// 每三个分量确定一个顶点for (let i = 0; i < atomsPositionArray.length; i += 3) {const sphere = new THREE.SphereGeometry(0.2)// 根据颜色分量确定顶点颜色const material = new THREE.MeshPhongMaterial({color: new THREE.Color(colors[i], colors[i + 1], colors[i + 2])})const mesh = new THREE.Mesh(sphere, material)// 根据位置分量确定顶点颜色mesh.position.set(atomsPositionArray[i],atomsPositionArray[i + 1],atomsPositionArray[i + 2])this.group.add(mesh)}
2.4 处理分子连线
// 获取连线顶点位置分量数组const bondsPositionArray = model.geometryBonds.attributes.position.array// 每六个分量确定两个顶点，两个顶点建立一条连线for (let i = 0; i < bondsPositionArray.length; i += 6) {const onePoint = new THREE.Vector3(bondsPositionArray[i],bondsPositionArray[i + 1],bondsPositionArray[i + 2])const otherPoint = new THREE.Vector3(bondsPositionArray[i + 3],bondsPositionArray[i + 4],bondsPositionArray[i + 5])//使用两个顶点创建样条曲线const path = new THREE.CatmullRomCurve3([onePoint, otherPoint])//根据样条曲线路径创建管道几何体const tube = new THREE.TubeGeometry(path, 1, 0.04)const material = new THREE.MeshPhongMaterial({color: 0xcccccc })const mesh = new THREE.Mesh(tube, material)this.group.add(mesh)}
3.demo代码
<template><div><div id="container"></div></div></template><script>import * as THREE from 'three'import {OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'import {PDBLoader } from 'three/examples/jsm/loaders/PDBLoader.js'export default {data() {return {publicPath: process.env.BASE_URL,group: null,camera: null,scene: null,renderer: null,controls: null}},mounted() {this.init()},methods: {// 初始化init() {this.createScene() // 创建场景this.loadPDB() // 加载PDB模型this.createLight() // 创建光源this.createCamera() // 创建相机this.createRender() // 创建渲染器this.createControls() // 创建控件对象this.render() // 渲染},// 创建场景createScene() {this.scene = new THREE.Scene()},// 加载PDB模型loadPDB() {const THIS = thisconst loader = new PDBLoader()this.group = new THREE.Group()loader.load(`${THIS.publicPath}models/aspirin.pdb`, model => {// 获取分子位置分量数组const atomsPositionArray = model.geometryAtoms.attributes.position.array// 获取分子颜色分量数组const colors = model.geometryAtoms.attributes.color.array// 每三个分量确定一个顶点for (let i = 0; i < atomsPositionArray.length; i += 3) {const sphere = new THREE.SphereGeometry(0.2)// 根据颜色分量确定顶点颜色const material = new THREE.MeshPhongMaterial({color: new THREE.Color(colors[i], colors[i + 1], colors[i + 2])})const mesh = new THREE.Mesh(sphere, material)// 根据位置分量确定顶点颜色mesh.position.set(atomsPositionArray[i],atomsPositionArray[i + 1],atomsPositionArray[i + 2])this.group.add(mesh)}// 获取连线顶点位置分量数组const bondsPositionArray = model.geometryBonds.attributes.position.array// 每六个分量确定两个顶点，两个顶点建立一条连线for (let i = 0; i < bondsPositionArray.length; i += 6) {const onePoint = new THREE.Vector3(bondsPositionArray[i],bondsPositionArray[i + 1],bondsPositionArray[i + 2])const otherPoint = new THREE.Vector3(bondsPositionArray[i + 3],bondsPositionArray[i + 4],bondsPositionArray[i + 5])//使用两个顶点创建样条曲线const path = new THREE.CatmullRomCurve3([onePoint, otherPoint])//根据样条曲线路径创建管道几何体const tube = new THREE.TubeGeometry(path, 1, 0.04)const material = new THREE.MeshPhongMaterial({color: 0xcccccc })const mesh = new THREE.Mesh(tube, material)this.group.add(mesh)}this.scene.add(this.group)})},// 创建光源createLight() {// 环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光this.scene.add(ambientLight) // 将环境光添加到场景const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯spotLight.position.set(50, 50, 50)spotLight.castShadow = truethis.scene.add(spotLight)},// 创建相机createCamera() {const element = document.getElementById('container')const width = element.clientWidth // 窗口宽度const height = element.clientHeight // 窗口高度const k = width / height // 窗口宽高比// PerspectiveCamera( fov, aspect, near, far )this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)this.camera.position.set(8, 8, 8) // 设置相机位置this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向this.scene.add(this.camera)},// 创建渲染器createRender() {const element = document.getElementById('container')this.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true })this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸this.renderer.shadowMap.enabled = true // 显示阴影this.renderer.shadowMap.type = THREE.PCFSoftShadowMapthis.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色element.appendChild(this.renderer.domElement)},render() {if (this.group) {this.group.rotation.y += 0.006this.group.rotation.x += 0.006}this.renderer.render(this.scene, this.camera)requestAnimationFrame(this.render)},// 创建控件对象createControls() {this.controls = new OrbitControls(this.camera, this.renderer.domElement)}}}</script><style>#container {position: absolute;width: 100%;height: 100%;}</style>
