|
|
|
@ -0,0 +1,199 @@ |
|
|
|
import * as THREE from 'three' |
|
|
|
import BaseRenderer from '@/core/base/BaseRenderer.ts' |
|
|
|
import { getLineId } from '@/core/ModelUtils.ts' |
|
|
|
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js' |
|
|
|
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js' |
|
|
|
import { Line2 } from 'three/examples/jsm/lines/Line2.js' |
|
|
|
import { numberToString } from '@/utils/webutils.ts' |
|
|
|
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer' |
|
|
|
import { Text } from 'troika-three-text' |
|
|
|
import SimSunTTF from '@/assets/fonts/simsunb.ttf' |
|
|
|
import MoveLinePointPng from '@/assets/images/moveline_point.png' |
|
|
|
|
|
|
|
/** |
|
|
|
* 辅助测量工具渲染器 |
|
|
|
*/ |
|
|
|
export default class WayRenderer extends BaseRenderer { |
|
|
|
static LABEL_NAME = 'way_label' |
|
|
|
static POINT_NAME = 'way_point' |
|
|
|
static LINE_NAME = 'way_line' |
|
|
|
|
|
|
|
public useHtmlLabel = false |
|
|
|
|
|
|
|
pointMaterial: THREE.Material |
|
|
|
lineMaterial: LineMaterial |
|
|
|
|
|
|
|
readonly defaultScale: THREE.Vector3 = new THREE.Vector3(0.5, 0.5, 0.1) |
|
|
|
readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(90, 0, 0) |
|
|
|
|
|
|
|
constructor(itemTypeName: string) { |
|
|
|
super(itemTypeName) |
|
|
|
} |
|
|
|
|
|
|
|
async init() { |
|
|
|
this.lineMaterial = new LineMaterial({ |
|
|
|
color: 0xE63C17, // 主颜色
|
|
|
|
linewidth: 2, // 实际可用的线宽
|
|
|
|
vertexColors: true, // 启用顶点颜色
|
|
|
|
dashed: false, |
|
|
|
alphaToCoverage: true |
|
|
|
}) |
|
|
|
return Promise.all([ |
|
|
|
super.init(), |
|
|
|
this.loadFont() |
|
|
|
]) |
|
|
|
} |
|
|
|
|
|
|
|
async loadFont() { |
|
|
|
return new Promise<void>((resolve, reject) => { |
|
|
|
new THREE.TextureLoader().load( |
|
|
|
MoveLinePointPng, |
|
|
|
(texture) => { |
|
|
|
this.pointMaterial = new THREE.SpriteMaterial({ |
|
|
|
map: texture, |
|
|
|
transparent: true, |
|
|
|
side: THREE.DoubleSide |
|
|
|
}) |
|
|
|
resolve() |
|
|
|
}, |
|
|
|
undefined, |
|
|
|
function(err) { |
|
|
|
reject(err) |
|
|
|
} |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 所有的点，必须使用同一个尺寸, 改属性也无效 |
|
|
|
*/ |
|
|
|
override afterCreateOrUpdatePoint(item: ItemJson, option: RendererCudOption, objects: THREE.Object3D[]) { |
|
|
|
super.afterCreateOrUpdatePoint(item, option, objects) |
|
|
|
|
|
|
|
const point = objects[0] |
|
|
|
|
|
|
|
point.scale.set(this.defaultScale.x, this.defaultScale.y, this.defaultScale.z) |
|
|
|
point.rotation.set( |
|
|
|
THREE.MathUtils.degToRad(this.defaultRotation.x), |
|
|
|
THREE.MathUtils.degToRad(this.defaultRotation.y), |
|
|
|
THREE.MathUtils.degToRad(this.defaultRotation.z) |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D[] { |
|
|
|
const geom = new LineGeometry() |
|
|
|
const obj = new Line2(geom, this.lineMaterial) |
|
|
|
obj.frustumCulled = false |
|
|
|
obj.name = WayRenderer.LINE_NAME |
|
|
|
obj.uuid = getLineId(start.id, end.id, type) |
|
|
|
|
|
|
|
return [obj] |
|
|
|
} |
|
|
|
|
|
|
|
createPointBasic(item: ItemJson, option?: RendererCudOption): THREE.Object3D[] { |
|
|
|
const obj = new THREE.Sprite(this.pointMaterial as THREE.SpriteMaterial) |
|
|
|
obj.name = WayRenderer.POINT_NAME |
|
|
|
return [obj] |
|
|
|
} |
|
|
|
|
|
|
|
appendToScene(...objects: THREE.Object3D[]) { |
|
|
|
const dragObjects = objects.filter(obj => !!obj.userData.draggable) |
|
|
|
this.tempViewport.dragControl.setDragObjects(dragObjects, 'push') |
|
|
|
// this.tempViewport.dragControl.setDragObjects(objects, 'remove')
|
|
|
|
|
|
|
|
this.tempViewport?.scene.add(...objects) |
|
|
|
} |
|
|
|
|
|
|
|
afterCreateOrUpdateLine(start: ItemJson, end: ItemJson, type: LinkType, option: RendererCudOption, objects: THREE.Object3D[]) { |
|
|
|
super.afterCreateOrUpdateLine(start, end, type, option, objects) |
|
|
|
|
|
|
|
const startPoint = this.tempViewport?.entityManager.findObjectsById(start.id)?.[0] |
|
|
|
const endPoint = this.tempViewport?.entityManager.findObjectsById(end.id)?.[0] |
|
|
|
|
|
|
|
const p0 = startPoint.position |
|
|
|
const p1 = endPoint.position |
|
|
|
|
|
|
|
const dist = p0.distanceTo(p1) |
|
|
|
const label = `${numberToString(dist)} m` |
|
|
|
|
|
|
|
const position = new THREE.Vector3().addVectors(p0, p1).multiplyScalar(0.5) |
|
|
|
let labelObj: Text | CSS2DObject | undefined = objects[0].userData.labelObj |
|
|
|
if (!labelObj || !labelObj.parent) { |
|
|
|
labelObj = this.createLabel(label) |
|
|
|
this.appendToScene(labelObj) |
|
|
|
objects[0].userData.labelObj = labelObj |
|
|
|
} |
|
|
|
|
|
|
|
labelObj.position.set(position.x, position.y + 0.3, position.z - 0.2) |
|
|
|
|
|
|
|
if (this.useHtmlLabel) { |
|
|
|
labelObj.element.innerHTML = label |
|
|
|
|
|
|
|
} else { |
|
|
|
// 让文本朝向摄像机
|
|
|
|
labelObj.quaternion.copy(this.tempViewport.camera.quaternion) |
|
|
|
labelObj.text = label |
|
|
|
labelObj.sync() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
afterDeleteLine(start: ItemJson, end: ItemJson, type: LinkType, option: RendererCudOption, objects: THREE.Object3D[]) { |
|
|
|
super.afterDeleteLine(start, end, type, option, objects) |
|
|
|
|
|
|
|
// 删除标签
|
|
|
|
const labelObj = objects[0]?.userData?.labelObj |
|
|
|
if (labelObj && labelObj.parent) { |
|
|
|
labelObj.parent.remove(labelObj) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 创建标签 |
|
|
|
*/ |
|
|
|
createLabel(text: string): Text | CSS2DObject { |
|
|
|
if (this.useHtmlLabel) { |
|
|
|
const div = document.createElement('div') |
|
|
|
div.className = 'css2dObjectLabel' |
|
|
|
div.innerHTML = text |
|
|
|
div.style.padding = '5px 8px' |
|
|
|
div.style.color = '#fff' |
|
|
|
div.style.fontSize = '14px' |
|
|
|
div.style.position = 'absolute' |
|
|
|
div.style.backgroundColor = 'rgba(25, 25, 25, 0.3)' |
|
|
|
div.style.borderRadius = '12px' |
|
|
|
div.style.top = '0px' |
|
|
|
div.style.left = '0px' |
|
|
|
// div.style.pointerEvents = 'none' //避免HTML元素影响场景的鼠标事件
|
|
|
|
const obj = new CSS2DObject(div) |
|
|
|
obj.name = WayRenderer.LABEL_NAME |
|
|
|
return obj |
|
|
|
|
|
|
|
} else { |
|
|
|
const label = new Text() |
|
|
|
label.text = text |
|
|
|
label.font = SimSunTTF |
|
|
|
label.fontSize = 0.4 |
|
|
|
label.color = '#ff0000' |
|
|
|
label.opacity = 0.8 |
|
|
|
label.padding = 0.2 |
|
|
|
label.anchorX = 'center' |
|
|
|
label.anchorY = 'middle' |
|
|
|
label.depthOffset = 1 |
|
|
|
label.backgroundColor = '#000000' // 黑色背景
|
|
|
|
label.backgroundOpacity = 0.6 // 背景半透明
|
|
|
|
label.padding = 0.2 // 内边距
|
|
|
|
label.material.depthTest = false |
|
|
|
label.name = WayRenderer.LABEL_NAME |
|
|
|
|
|
|
|
label.sync() |
|
|
|
return label |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
dispose() { |
|
|
|
super.dispose() |
|
|
|
this.pointMaterial.dispose() |
|
|
|
this.lineMaterial.dispose() |
|
|
|
} |
|
|
|
} |
