【Three.js 分子/晶体结构解析教程】

环境准备

目前使用的Three.js版本是0.165.0

npm i three

最终效果

结构化学式Al4As14

思路解析

绘制分子/晶体结构首先将这结构拆解来看，目前显示的效果整个结构三个部分
1、晶格 - 白色线框
2、原子 - 圆形
3、建 - 两个圆锥体

1、基本配置

首先需要配置基本场景、相机、渲染器

import * as THREE from 'three'
// 场景
this.scene = new THREE.Scene();
// 正交相机
this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 10000000);
this.camera.position.set(0, 0, 5.5);
// 渲染器
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(width, height);
this.renderer.setClearColor('#383838', 1);
dom.appendChild(this.renderer.domElement);
//配置环境光
this.ambientLight(this.scene)
 // 开始渲染
const animate = () => {
   requestAnimationFrame(animate);
   this.controls.update();
   // 渲染主场景
   this.renderer.clear();
   this.renderer.render(this.scene, this.camera);
   // 渲染坐标轴场景
   this.renderer.autoClear = false; // 不清除颜色缓存
   this.renderer.clearDepth(); // 清除深度缓存
   // 设置坐标轴的渲染区域
   this.renderer.setViewport(0, 0, width / 4, height / 4);
   this.renderer.render(this.Helper.axesScene, this.Helper.axesCamera);
   // 复原视口
   this.renderer.setViewport(0, 0, width, height);
   this.renderer.autoClear = true; // 恢复 autoClear
 }
 animate()

环境光函数，在这里采用了两种光

ambientLight(scene){
	// 环境光
	let AmbientLight =  new THREE.AmbientLight('#fff',2)
	scene.add(AmbientLight)
	// 创建平行光
	const DirectionalLight = new THREE.DirectionalLight(0xffffff, 1); // 颜色为白色，强度为 1
	// 设置光源位置
	DirectionalLight.position.set(1, 1, 1).normalize(); // 光源位置为 (1, 1, 1)，并进行标准化处理
	// 将光源添加到场景中
	scene.add(DirectionalLight);
}

2、解析结构

在这里需要准备一个json文件，需要原子的坐标，晶格矢量，建索引
lattice - 标识晶格矢量
atom - 原子信息 l 原子名称全大写，xyz 坐标信息
band - 表示需要连健原子索引如果[2,4]，表示下表2和下表4的原子进行连健

{
	"lattice": [
		[5.6,0,0],
		[0,5.6,0],
		[0,0,5.6],
		[0,0,0]
	]，
	"atom": [
	{
      "l": "AL",
      "x": 0,
      "y": 0,
      "z": 0,
      "id": 0
    },
    {
      "l": "AL",
      "x": 0,
      "y": 2.8,
      "z": 2.8,
      "id": 1
    },
    {
      "l": "AL",
      "x": 2.8,
      "y": 0,
      "z": 2.8,
      "id": 2
    },
    {
      "l": "AL",
      "x": 2.8,
      "y": 2.8,
      "z": 0,
      "id": 3
    },
    {
      "l": "AS",
      "x": 0.25,
      "y": 0.25,
      "z": 0.25,
      "id": 4
    },
	]，
	"band": [
	    [2,4]
   	]
}

3、进行解析

引入准备好的json文件

	import data from 'data.json'

讲个绘制的过程分成了3步骤
1、原子的绘制
2、连健
3、晶格绘制

1）原子部分

 // 原子
  drawAtom(atoms){
    const atomGroup = new THREE.Group();
    atomGroup.name = 'atom'
    const ballConstruction = (color,name) => {
      let radius = 0.3; // 球体的半径
      let widthSegments = 32; // 水平方向的分段数
      let heightSegments = 16; // 垂直方向的分段数
      let geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
      let newColor = new THREE.Color();
      newColor.setStyle(color);
      let material = new THREE.MeshStandardMaterial ({
        color: newColor, // 设置球体颜色
        roughness: 0, // 设置粗糙度
        metalness: 0, // 设置金属度
      });
      let sphere = new THREE.Mesh(geometry, material);
      sphere.name = name
      return sphere
    }
    atoms.forEach(atom => {
      const initAtom = ballConstruction(atomColor[atom.l.toLowerCase()],atom.l)
      initAtom.position.set(atom.x,atom.y,atom.z)
      atomGroup.add(initAtom);
    })
    return atomGroup
  }

2）连健部分

连健需要的是2个原子的索引，因为两个原子的种类可能不同需要绘制两个圆柱。

// 连键
  drawBand(atom,band){
    const bandGroup = new THREE.Group();
    bandGroup.name = 'band'
    const bandConstruction = (point1,point2,color) => {
      // 计算两个点之间的距离
      const distance = point1.distanceTo(point2);
      // 计算圆柱体的高度和位置
      const height = distance; // 圆柱体的高度为两点之间的距离
      const position = point1.clone().add(point2).divideScalar(2); // 圆柱体的位置为两点之间的中点
      // 计算圆柱体的方向向量
      const direction = point2.clone().sub(point1).normalize();
      // 创建圆柱体的参数
      const radiusTop = 0.1; // 顶部半径
      const radiusBottom = 0.1; // 底部半径
      const radialSegments = 32; // 周向分段数
      const heightSegments = 1; // 高度分段数
      const openEnded = false; // 是否封闭
      // 创建圆柱体的几何体
      const geometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded);
      // 创建圆柱体的材质
      let newColor = new THREE.Color();
      newColor.setStyle(color);
      const material = new THREE.MeshStandardMaterial({
        color: newColor, // 设置球体颜色
        roughness: 0, // 设置粗糙度
        metalness: 0, // 设置金属度
      });
      // 创建圆柱体的网格对象
      const cylinder = new THREE.Mesh(geometry, material);
      // 设置圆柱体的位置和方向
      cylinder.position.copy(position);
      cylinder.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
      return cylinder
    }
    band.forEach(keys => {
      let start = atom[keys[0]]
      let end = atom[keys[1]]
      // 两个原子的坐标
      const point1 = new THREE.Vector3(start.x, start.y, start.z); // 替换 x1、y1 和 z1 为第一个点的坐标
      const point2 = new THREE.Vector3(end.x, end.y, end.z); // 替换 x2、y2 和 z2 为第二个点的坐标
      // 计算两个原子的中间点坐标
      const midpoint = new THREE.Vector3().addVectors(point1, point2).multiplyScalar(0.5);
      // 需要添加两个圆柱
      // 原子1到中间
      const band1 = bandConstruction(point1,midpoint,atomColor[atom[keys[0]].l.toLowerCase()])
      band1.name = `band_left_${atom[keys[0]].l}_${atom[keys[0]].id}`
      // 原子2到中间
      const band2 = bandConstruction(midpoint,point2,atomColor[atom[keys[1]].l.toLowerCase()])
      band1.name = `band_right_${atom[keys[1]].l}_${atom[keys[1]].id}`
      bandGroup.add(band1)
      bandGroup.add(band2)
      console.log(midpoint);
    })
    return bandGroup
  }

3）晶格部分

晶格需要根据json文件的适量去计算所有顶点的坐标

// 晶格
  drawLattice(vectors) {
    const atomGroup = new THREE.Group();
    atomGroup.name = 'lattice'
    const [a1, a2, a3, origin] = vectors;
    const points = [];
    // 遍历所有可能的 n1, n2, n3 组合
    for (let n1 = 0; n1 <= 1; n1++) {
      for (let n2 = 0; n2 <= 1; n2++) {
        for (let n3 = 0; n3 <= 1; n3++) {
          const x = n1 * a1[0] + n2 * a2[0] + n3 * a3[0];
          const y = n1 * a1[1] + n2 * a2[1] + n3 * a3[1];
          const z = n1 * a1[2] + n2 * a2[2] + n3 * a3[2];
          points.push(...[x, y, z]);
        }
      }
    }
    // 计算后的八个顶点
    const vertices = new Float32Array(points);
    // 计算后顶点的链接关系
    const edges = new Uint16Array([
      0, 1,
      0, 2,
      0, 4,
      1, 3,
      1, 5,
      2, 3,
      2, 6,
      3, 7,
      4, 5,
      4, 6,
      5, 7,
      6, 7
    ]);
    // 创建几何体并添加顶点和边
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    geometry.setIndex(new THREE.BufferAttribute(edges, 1));
    // 创建线条材质
    const material = new THREE.LineBasicMaterial({ color: 0xffffff });
    // 创建线条
    const lineSegments = new THREE.LineSegments(geometry, material);
    atomGroup.add(lineSegments)
    const OlineText = (toArr, text, color) => {
      const label = this.createTextLabel(text, color)
      label.position.set(...toArr);
      atomGroup.add(label);
    }
    // 画OA,OB,OC
    const Oline = (toArr,color,text) => {
      // 定义线条的几何体
      const points = [];
      points.push(new THREE.Vector3( 0,0, 0));
      points.push(new THREE.Vector3(toArr[0],toArr[1],toArr[2]));
      const geometry = new THREE.BufferGeometry().setFromPoints(points);
      // 定义线条的材质
      const material = new THREE.LineBasicMaterial({ color });
      // 创建线条并添加到场景中
      const line = new THREE.Line(geometry, material);
      atomGroup.add(line);
      OlineText([toArr[0] - 0.2, toArr[1] - 0.2, toArr[2] - 0.2], text, color)
    }
    // OA
    Oline(vectors[0],'red','a')
    // OB
    Oline(vectors[1],'green','b')
    // OC
    Oline(vectors[2],'blue','c')
    // O
    OlineText([-0.2,-0.2,-0.2],'o','#fff')
    // 将最后绘制完成的内容进行返回
    return atomGroup
  }
   // 坐标轴的文字
  createTextLabel (labelText, color,size = 1.5) {
    const canvas = document.createElement('canvas');
    canvas.width = 200; // 调整 canvas 大小以容纳文字
    canvas.height = 200;
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '120px Times New Roman'; // 增大字体尺寸
    context.fillStyle = color;
    context.fillText(labelText, canvas.width / 2, canvas.height / 2);
    const texture = new THREE.CanvasTexture(canvas); // 使用 CanvasTexture
    texture.premultiplyAlpha = false;
    texture.needsUpdate = true;
    const material = new THREE.SpriteMaterial({ map: texture ,alphaTest: 0.2 , transparent: true});
    const sprite = new THREE.Sprite(material);
    sprite.scale.set(size, size, size); // 调整标签尺寸
    return sprite;
  }

4）绘制位置调整

因为绘制到画布如果不进行调整那么他的效果是这样的，并不在正中心，那么需要进行调整

// 将结构调整到中间位置
setMolCenter(content){
   const {maxX,maxY,maxZ} = this.getMinAndMAxPosition()
   content.position.set(
     parseFloat(-Math.abs(maxX)).toFixed(2) / 2,
     parseFloat(-Math.abs(maxY)).toFixed(2) / 2,
     parseFloat(-Math.abs(maxZ )).toFixed(2) / 2
   )
}
  // 获取内容的最大和最小坐标
getMinAndMAxPosition(){
  // 初始化一个空的 Box3
  const boundingBox = new THREE.Box3();
  // 遍历 atomGroup 中的所有子对象并更新 boundingBox
  this.atomGroup.children.forEach(child => {
    const childBoundingBox = new THREE.Box3().setFromObject(child);
    boundingBox.union(childBoundingBox);
  });
  const maxX = boundingBox.max.x;
  const maxY = boundingBox.max.y;
  const maxZ = boundingBox.max.z;
  const minX = boundingBox.min.x;
  const minY = boundingBox.min.y;
  const minZ = boundingBox.min.z;
  return {
    maxX,maxY,maxZ,
    minX,minY,minZ
  }
}

5）绘制

调用上述代码，将所有的内容放到atomGroup 中，将atomGroup 添加到场景即可实现完整逻辑

	const {lattice, atom, band} = data
	
	this.atomGroup = new THREE.Group();
	this.atomGroup.name = 'structure'
	
	// 原子绘制
	if (atom && atom.length){
	  const initAtom = this.drawAtom(atom)
	  this.atomGroup.add(initAtom)
	}
	
	// 连键
	if (band && band.length){
	  const initBand = this.drawBand(atom,band)
	  this.atomGroup.add(initBand)
	}
	
	// 晶格绘制
	if (lattice && lattice.length){
	  const initLattice = this.drawLattice(lattice)
	  this.atomGroup.add(initLattice)
	}
	
	//  讲内容调整到画布中间位置
	this.setMolCenter(this.atomGroup)