【Three.js】创建CAD标注线

目录

前言

创建箭头对象

创建文字

箭头两端的线段

✈️封装方法


前言

CAD标注线在工程和制造领域中被广泛用于标记零部件、装配体和机械系统的尺寸、距离、角度等信息。它们帮助工程师和设计师更好地理解设计要求,并确保制造的准确性。在三维场景中添加标注线使得设计更加直观。人们可以在一个真实的三维环境中看到物体的形状、大小和相互关系,相比于传统的二维图纸,更容易理解和把握设计意图。

下面是一个简单的效果图:

【Three.js】创建CAD标注线_第1张图片

要创建上图所示的标注线,我们可以把标注线拆分成三个部分:箭头线、箭头两端的线段 、文本信息。

创建箭头对象

threejs中可以使用ArrowHelper创建模拟方向的三维箭头对象,但是这个只能创建一个单向的箭头,我们需要创建两个相反方向的箭头对象。

ArrowHelper由一个三维坐标点和一个单位向量来确定其位置和方向。

startPoint和endPoint分别是标注线的起点和终点坐标,通过起点和终点可以得出方向向量和长度,取两点的中点作为箭头的起点坐标,就可以绘制两个方向相反的箭头。

const startPoint = new THREE.Vector3(8, 8, 0)
const endPoint= new THREE.Vector3(8, -8, 0)
const color = 0x666666
const headLength = 1
const headWidth = 0.6
// 中点位置
const centerPoint = startPoint.clone().add(endPoint).multiplyScalar(0.5)
// 标注线长度(总长的一半)
const halfLength = startPoint.distanceTo(endPoint) / 2
// 方向向量
const dir0 = startPoint.clone().sub(endPoint).normalize()  //normalize() 归一化操作,使其成为单位向量
const dir1 = dir0.clone().negate() //取反

const arrowHelper0 = new THREE.ArrowHelper(dir0, centerPoint, halfLength, color, headLength, headWidth)
const arrowHelper1 = new THREE.ArrowHelper(dir1, centerPoint, halfLength, color, headLength, headWidth)

scene.add(arrowHelper0, arrowHelper1)

创建文字

 threejs中可以使用TextGeometry类将文本生成为单一的几何体。

这里需要导入字体文件才能加载文本几何体,threejs自带了一些字体文件,存放在 /examples/fonts/ 路径下,可以直接导入使用。但是threejs自带的字体文件不支持中文,如果需要显示中文字体,需要另外寻找字体文件,然后可以通过 typeface.json 将字体文件转成json格式的文件。

导入字体、FontLoader加载器、TextGeometry类

import gentilisRegular from 'three/examples/fonts/gentilis_regular.typeface.json'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'

使用FontLoader加载器加载字体,并调用parse方法解析JSON格式的对象:

const font = new FontLoader().parse(gentilisRegular)

使用TextGeometry生成字体:

const geometry = new TextGeometry('16m', {
  font: font,
  size: 1,
  height: 0.5,
})
//添加材质
const material = new THREE.MeshBasicMaterial({
  color: 0x666666,
}) 
const textLabel = new THREE.Mesh(geometry, material)
scene.add(textLabel)

最后就是要把字体放到合适的位置,上面我们已经计算得出了两个箭头对象的中点位置,把文字位置放到centerPoint位置:

textLabel.position.copy(centerPoint)

但是文字默认是沿x轴正方向排列的,我们需要让文字沿线的方向排列,让文字和线平行:

// 创建四元数  从x轴正方向旋转到方向向量 dir0 所需的旋转角度
const quaternion = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(1, 0, 0), dir0) 
// 将字体的旋转设为四元数的旋转
textLabel.setRotationFromQuaternion(quaternion)

但是,此时会发现字体并没有完全居中,字体的初始位置处在了中点位置,而我们需要的是整个文本的中心处在线的中心,因此需要计算文本长度,并将其平移:

geometry.computeBoundingBox()
textLabel.position.sub(
  dir0.clone().multiplyScalar(geometry.boundingBox.getSize(new THREE.Vector3()).x / 2)
)

如果不想字体和线过于贴合,可以计算线段的法向量,然后沿法向量方向平移:

// 法向量
const normalVector = new THREE.Vector3().crossVectors(dir0, new THREE.Vector3(0, 0, 1)).normalize()
textLabel.position.sub(normalVector.clone().multiplyScalar(0.5))

箭头两端的线段

我们已经知道了箭头线的方向向量,那我们可以在这个方向上创建两条线段,然后将它们旋转90°,最后再分别将它们放到startPoint和endPoint位置上即可。

// 创建线段的材质
const material = new THREE.LineBasicMaterial({ 
  color: 0x666666 ,
  linewidth: 1
})
// 创建线段的几何体
const geometry = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(0, 0, 0).clone().add(dir0.clone().multiplyScalar(2)),
  new THREE.Vector3(0, 0, 0).clone().sub(dir1.clone().multiplyScalar(2))
])
const line = new THREE.LineSegments(geometry, material)

const line0 = line.clone()
const line1 = line.clone()

line0.rotateZ(Math.PI / 2)
line1.rotateZ(Math.PI / 2)
line0.position.copy(item.startPoint)
line1.position.copy(item.endPoint)

scene.add(line0, line1)

上面创建出来的线段可能会和物体连接不上,一个简单的方法就是创建一条长一点的线段,但是这样可能会使线段的另一端长出很多,显得不美观,所以我们可以通过平移线段的方法,让线段和物体能够连接上:

// 深度克隆
const line0 = new THREE.Line(line.geometry.clone(), line.material.clone())
const line1 = new THREE.Line(line.geometry.clone(), line.material.clone())

// 获取线段的顶点属性
const startPositions = line0.geometry.attributes.position.array
// 分别将线段的两个端点沿着方向向量平移
startPositions[0] += direction.x * 1.5
startPositions[1] += direction.y * 1.5
startPositions[2] += direction.z * 1.5
startPositions[3] += direction.x * 1.5
startPositions[4] += direction.y * 1.5
startPositions[5] += direction.z * 1.5
// 更新线段的几何体
line0.geometry.attributes.position.needsUpdate = true

这里使用深度克隆,可以避免其中一条线修改影响到另一条线。

✈️封装方法

dimLine.js

import * as THREE from 'three'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'
import gentilisRegular from 'three/examples/fonts/gentilis_regular.typeface.json'

export const useDimLine = () => {
	// 创建实线
	const createSoildLine = (data) => {
		const {startPoint, endPoint, color, linewidth} = {...data}
		// 创建线段的材质
		const material = new THREE.LineBasicMaterial({ 
			color: color ,
			linewidth: linewidth || 1
		})
		// 创建线段的几何体
		const geometry = new THREE.BufferGeometry().setFromPoints([startPoint, endPoint])
		const line = new THREE.LineSegments(geometry, material)

		return {
			line,
			material,
			geometry
		}
	}
	
	// 创建文字
	const createText = (data) => {
		// data = {
		// 	text,
		// 	position,
		// 	size,
		// 	height,
		// 	color
		//  direction
		// }
		const font = new FontLoader().parse(gentilisRegular)
		let geometrys = []
		let materials = []
		let textLabels = []
		data.map(item => {
			if(item.text === ''){
				return
			}
			const geometry = new TextGeometry(item.text, {
				font: font,
				size: item.size,
				height: item.height,
			})
			const material = new THREE.MeshBasicMaterial({
				color: item.color,
			}) 
			const textLabel = new THREE.Mesh(geometry, material)
			textLabel.position.copy(item.position)

			item.direction = item.direction ? item.direction : new THREE.Vector3(1, 0, 0)

			// 使用线的方向向量创建四元数  从方向向量 new THREE.Vector3(1, 0, 0) 旋转到方向向量 dir1 所需的旋转
			const quaternion = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(1, 0, 0), item.direction) 
			// 将字体的旋转设为四元数的旋转
			textLabel.setRotationFromQuaternion(quaternion)
			// 将字体完全居中
			geometry.computeBoundingBox()
			textLabel.position.sub(
				item.direction.clone().multiplyScalar(geometry.boundingBox.getSize(new THREE.Vector3()).x / 2)
			)
			// 方向向量法向量
			const normalVector = new THREE.Vector3().crossVectors(item.direction, new THREE.Vector3(0, 0, 1)).normalize()
			textLabel.position.sub(normalVector.clone().multiplyScalar(item.paddingBottom || 0.1))
			
			geometrys.push(geometry)
			textLabels.push(textLabel)
			materials.push(material)
		})
		
		return {
			geometrys, 
			textLabels,
			materials
		}
	}
	
	// 创建标注线
	const createDimLine = (data) => {
		// data = [
		// 	{
		// 		type: 'arrow', //'type'
		// 		startPoint: new THREE.Vector3(8, 8, 0),
		// 		endPoint: new THREE.Vector3(8, -8, 0),
		// 		color: "#bd2fa7",
		// 		headLength: 1, //箭头长
		// 		headWidth: 0.6, //箭头宽
		// 		textObj: {
		// 			text: '57m',
		// 			size: 1,
		// 			height: 0.5,
		// 			color: '#bd2fa7',
		// 			paddingBottom: 0.1, //文字和线的距离
		// 		},
		// 		// 两端的线段长度
		// 		closeLine: {
		// 			startLength: 10, //distance+2 = 8+2 = 10 线总长
		// 			endLength: 4,
		// 			translateStart: -3,// startLength/2-distance = 5-8 = -3 平移距离
		// 			translateEnd: 0,
		// 		}
		// 	}
		// ]
		const group = new THREE.Group()
		let geometrys = []
		let materials = []
		data.map(item => {
			// 中点位置
      const centerPoint = item.startPoint.clone().add(item.endPoint).multiplyScalar(0.5)
      // 标注线长度(一半)
      const halfLength = item.startPoint.distanceTo(item.endPoint) / 2
      // 方向向量 2个
      const dir0 = item.startPoint.clone().sub(item.endPoint).normalize()  //normalize() 归一化操作,使其成为单位向量
      const dir1 = dir0.clone().negate() //取反
      
      const arrowHelper0 = new THREE.ArrowHelper(dir0, centerPoint, halfLength, item.color, item.headLength, item.headWidth)
      const arrowHelper1 = new THREE.ArrowHelper(dir1, centerPoint, halfLength, item.color, item.headLength, item.headWidth)
      
      const direction = item.startPoint.x <= item.endPoint.x ? dir1 : dir0
      const textLabelObj = createText([
        {
          ...item.textObj,
          position: centerPoint,
          direction
        }
      ])
      
      // 标注线两端的线段
      if(item.closeLine.startLength > 0){
        // 创建两端线段
        const lineObj0 = createSoildLine({
          startPoint: new THREE.Vector3(0, 0, 0).clone().add(direction.clone().multiplyScalar(item.closeLine.startLength/2)), 
          endPoint: new THREE.Vector3(0, 0, 0).clone().sub(direction.clone().multiplyScalar(item.closeLine.startLength/2)), 
          color: item.color, 
          linewidth: 1
        })
        const line0 = lineObj0.line
      
        // 获取线段的顶点属性
        const startPositions = line0.geometry.attributes.position.array
        // 分别将线段的两个端点沿着方向向量平移
        startPositions[0] += direction.x * item.closeLine.translateStart
        startPositions[1] += direction.y * item.closeLine.translateStart
        startPositions[2] += direction.z * item.closeLine.translateStart
        startPositions[3] += direction.x * item.closeLine.translateStart
        startPositions[4] += direction.y * item.closeLine.translateStart
        startPositions[5] += direction.z * item.closeLine.translateStart
        // 更新线段的几何体
        line0.geometry.attributes.position.needsUpdate = true
        
        line0.rotateZ(Math.PI / 2)
        line0.position.copy(item.startPoint)
        
        group.add(line0)
        geometrys.push(lineObj0.geometry)
        materials.push(lineObj0.material)
      }	
      if(item.closeLine.endLength > 0){
        // 创建两端线段
        const lineObj1 = createSoildLine({
          startPoint: new THREE.Vector3(0, 0, 0).clone().add(direction.clone().multiplyScalar(item.closeLine.endLength/2)), 
          endPoint: new THREE.Vector3(0, 0, 0).clone().sub(direction.clone().multiplyScalar(item.closeLine.endLength/2)), 
          color: item.color, 
          linewidth: 1
        })
        const line1 = lineObj1.line
        
        // 获取线段的顶点属性
        const endPositions = line1.geometry.attributes.position.array
        // 分别将线段的两个端点沿着方向向量平移
        endPositions[0] += direction.x * item.closeLine.translateEnd
        endPositions[1] += direction.y * item.closeLine.translateEnd
        endPositions[2] += direction.z * item.closeLine.translateEnd
        endPositions[3] += direction.x * item.closeLine.translateEnd
        endPositions[4] += direction.y * item.closeLine.translateEnd
        endPositions[5] += direction.z * item.closeLine.translateEnd
        // 更新线段的几何体
        line1.geometry.attributes.position.needsUpdate = true
        line1.rotateZ(Math.PI / 2)
        line1.position.copy(item.endPoint)
        
        group.add(line1)
        geometrys.push(lineObj1.geometry)
        materials.push(lineObj1.material)
      }

      group.add(arrowHelper0, arrowHelper1, textLabelObj.textLabels[0])
      geometrys.push(textLabelObj.geometrys[0])
      materials.push(textLabelObj.materials[0])
			
		})
		
		return {
			group,
			geometrys,
			materials
		}
	}

	return {
    createSoildLine,
    createText,
		createDimLine,
	}
}

使用:

//导入
import { useDimLine } from './dimLine.js'
const { createDimLine } = useDimLine()

//使用
const wireDim = createDimLine([
{
  startPoint: new THREE.Vector3(8, 8, 0),//起点
  endPoint: new THREE.Vector3(8, -8, 0),//终点
  color: "#666666",//线条颜色
  headLength: 1,//箭头长度
  headWidth: 0.6,//箭头宽度
  textObj: {
    text: '16m',//标注文本
    size: 1,//文本大小
    height: 0.5,//文本厚度
    color: '#666666',//文本颜色
    paddingBottom: 0.5,//文本和线的距离
  },
  // 两端的线段长度
  closeLine: {
    startLength: 10, //起点端的线段长度
    endLength: 4,//终点端的线段长度
    translateStart: -3,// 平移距离startLength/2-distance = 5-8 = -3
    translateEnd: 0,
  }
},
{
  startPoint: new THREE.Vector3(-6, -12, 0),
  endPoint: new THREE.Vector3(6, -12, 0),
  color: "#666666",
  headLength: 1,
  headWidth: 0.6,
  textObj: {
    text: '12m',
    size: 1,
    height: 0.5,
    color: '#666666',
    paddingBottom: 0.5,
  },
  // 两端的线段长度
  closeLine: {
    startLength: 5,
    endLength: 5,
    translateStart: 1.5,
    translateEnd: 1.5,
  }
},
])

scene.add(wireDim.group)

参数解释: 

【Three.js】创建CAD标注线_第2张图片

完整代码:





你可能感兴趣的:(threejs,javascript,开发语言,vue.js,threejs)