【Three.js】创建CAD标注线
目录
前言
创建箭头对象
创建文字
箭头两端的线段
✈️封装方法
前言
CAD标注线在工程和制造领域中被广泛用于标记零部件、装配体和机械系统的尺寸、距离、角度等信息。它们帮助工程师和设计师更好地理解设计要求，并确保制造的准确性。在三维场景中添加标注线使得设计更加直观。人们可以在一个真实的三维环境中看到物体的形状、大小和相互关系，相比于传统的二维图纸，更容易理解和把握设计意图。
下面是一个简单的效果图：
要创建上图所示的标注线，我们可以把标注线拆分成三个部分：箭头线、箭头两端的线段 、文本信息。
创建箭头对象
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)参数解释：
完整代码：