yuliang
/
yvan-rcs-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

性能测试渲染

master
修宁 6 months ago
parent
0edfc30cc6
commit
71ede82ce3
3 changed files with 192 additions and 141 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      src/components/ThreePerfView.vue
  2. 38
      src/example/ExampleUtil.js
  3. 208
      src/modules/measure/MeasureRenderer.ts

87
src/components/ThreePerfView.vue
View File

@ -21,6 +21,9 @@ import Stats from 'three/examples/jsm/libs/stats.module'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry' import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial' import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
import { Line2 } from 'three/examples/jsm/lines/Line2' import { Line2 } from 'three/examples/jsm/lines/Line2'
import MeasureRenderer from '@/modules/measure/MeasureRenderer.ts'
import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry'
import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2'
const canvasContainer = ref(null) const canvasContainer = ref(null)
let resizeObserver: ResizeObserver | null = null let resizeObserver: ResizeObserver | null = null
@ -42,17 +45,22 @@ const pointMaterial = new THREE.SpriteMaterial({
opacity: 1, opacity: 1,
sizeAttenuation: true sizeAttenuation: true
}) })
// const lineMaterial = new LineMaterial({
// color: 0xFF8C00,
// linewidth: 5,
// vertexColors: false,
// dashed: false
// })
const lineMaterial = new LineMaterial({ const lineMaterial = new LineMaterial({
color: 0xFF8C00, color: 0xFF8C00,
linewidth: 5, linewidth: 5
vertexColors: false, });
dashed: false
})
function test1() { function test1() {
const xcount = 100 const xcount = 100
const zcount = 100 const zcount = 100
const dist = 1.2 const dist = 1.25
const spacing = dist
const y = 0.1 const y = 0.1
const points = [] const points = []
@ -70,32 +78,75 @@ function test1() {
} }
} }
// 绘制线段 // // 绘制线段
const lines = [] // const lines = []
//
// 绘制线段（每两个点一组） // // 绘制线段（每两个点一组）
// for (let z = 0; z < zcount; z++) {
// for (let x = 0; x < xcount - 1; x++) {
// const i = z * xcount + x
// drawLine(points[i], points[i + 1])
// }
// }
//
// for (let z = 0; z < zcount - 1; z++) {
// for (let x = 0; x < xcount; x++) {
// const i = z * xcount + x
// const belowIndex = (z + 1) * xcount + x
// drawLine(points[i], points[belowIndex])
// }
// }
const positions = [];
// 横向连接（右）
for (let z = 0; z < zcount; z++) { for (let z = 0; z < zcount; z++) {
for (let x = 0; x < xcount - 1; x++) { for (let x = 0; x < xcount - 1; x++) {
const i = z * xcount + x const x1 = x * spacing;
drawLine(points[i], points[i + 1]) const z1 = z * spacing;
const x2 = (x + 1) * spacing;
const z2 = z * spacing;
positions.push(x1, y, z1, x2, y, z2);
} }
} }
// 纵向连接（下）
for (let z = 0; z < zcount - 1; z++) { for (let z = 0; z < zcount - 1; z++) {
for (let x = 0; x < xcount; x++) { for (let x = 0; x < xcount; x++) {
const i = z * xcount + x const x1 = x * spacing;
const belowIndex = (z + 1) * xcount + x const z1 = z * spacing;
drawLine(points[i], points[belowIndex]) const x2 = x * spacing;
const z2 = (z + 1) * spacing;
positions.push(x1, y, z1, x2, y, z2);
} }
} }
const geometry = new LineSegmentsGeometry();
geometry.setPositions(positions); // [x1,y1,z1, x2,y2,z2, ...]
const material = new LineMaterial({
color: 0xFF8C00,
linewidth: 5,
vertexColors: false
});
const lineSegments = new LineSegments2(geometry, material);
lineSegments.computeLineDistances(); // 必须调用一次
lineSegments.name = 'grid-lines';
scene.add(lineSegments);
} }
function drawLine(p1: THREE.Vector3, p2: THREE.Vector3) { function drawLine(p1: THREE.Vector3, p2: THREE.Vector3) {
const geometry = new LineGeometry() const geometry = new LineGeometry();
geometry.setPositions([p1.x, p1.y, p1.z, p2.x, p2.y, p2.z]) geometry.setPositions([p1.x, p1.y, p1.z, p2.x, p2.y, p2.z]);
// const material = new LineMaterial({
// color: 0xFF8C00,
// linewidth: 5
// });
const line = new Line2(geometry, lineMaterial);
line.computeLineDistances();
const line = new Line2(geometry, lineMaterial)
line.computeLineDistances() // 可选：用于渐变等效果
scene.add(line) scene.add(line)
} }

38
src/example/ExampleUtil.js
View File

@ -18,25 +18,25 @@ export function buildAgvPerformanceData(rows, cols) {
data.set(node.id, node) data.set(node.id, node)
// 与前一个点进行连线 // 与前一个点进行连线
// if (row > 0 && col > 0) { if (row > 0 && col > 0) {
// const preXNode = data.get('wp_' + (row - 1) + '_' + (col)) const preXNode = data.get('wp_' + (row - 1) + '_' + (col))
// node.dt.center.push(preXNode.id) node.dt.center.push(preXNode.id)
// preXNode.dt.center.push(node.id) preXNode.dt.center.push(node.id)
//
// const preYNode = data.get('wp_' + (row) + '_' + (col - 1)) const preYNode = data.get('wp_' + (row) + '_' + (col - 1))
// node.dt.center.push(preYNode.id) node.dt.center.push(preYNode.id)
// preYNode.dt.center.push(node.id) preYNode.dt.center.push(node.id)
//
// } else if (row > 0) { } else if (row > 0) {
// const preXNode = data.get('wp_' + (row - 1) + '_' + (col)) const preXNode = data.get('wp_' + (row - 1) + '_' + (col))
// node.dt.center.push(preXNode.id) node.dt.center.push(preXNode.id)
// preXNode.dt.center.push(node.id) preXNode.dt.center.push(node.id)
//
// } else if (col > 0) { } else if (col > 0) {
// const preYNode = data.get('wp_' + (row) + '_' + (col - 1)) const preYNode = data.get('wp_' + (row) + '_' + (col - 1))
// node.dt.center.push(preYNode.id) node.dt.center.push(preYNode.id)
// preYNode.dt.center.push(node.id) preYNode.dt.center.push(node.id)
// } }
} }
} }

208
src/modules/measure/MeasureRenderer.ts
View File

@ -31,7 +31,7 @@ export default class MeasureRenderer extends BaseRenderer {
readonly defulePositionY = Constract.HEIGHT_MEASURE readonly defulePositionY = Constract.HEIGHT_MEASURE
readonly defaultScale: THREE.Vector3 = new THREE.Vector3(0.1, 0.1, 0.1) readonly defaultScale: THREE.Vector3 = new THREE.Vector3(0.1, 0.1, 0.1)
readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(90, 0, 0) readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0)
constructor(itemTypeName: string) { constructor(itemTypeName: string) {
super(itemTypeName) super(itemTypeName)
@ -97,109 +97,109 @@ export default class MeasureRenderer extends BaseRenderer {
return obj return obj
} }
appendToScene(...objects: THREE.Object3D[]) { // appendToScene(...objects: THREE.Object3D[]) {
if (!this.group || this.group.parent !== this.tempViewport.scene.scene) { // if (!this.group || this.group.parent !== this.tempViewport.scene.scene) {
if (this.group && this.group.parent !== this.tempViewport.scene.scene) { // if (this.group && this.group.parent !== this.tempViewport.scene.scene) {
// 幻影加载问题 // // 幻影加载问题
this.group.parent.removeFromParent() // this.group.parent.removeFromParent()
} // }
//
this.group = new THREE.Group() // this.group = new THREE.Group()
this.group.name = MeasureRenderer.GROUP_NAME // this.group.name = MeasureRenderer.GROUP_NAME
this.tempViewport?.scene.add(this.group) // this.tempViewport?.scene.add(this.group)
} // }
//
const dragObjects = objects.filter(obj => !!obj.userData.draggable) // const dragObjects = objects.filter(obj => !!obj.userData.draggable)
//this.tempViewport.dragControl.setDragObjects(dragObjects, 'push') // //this.tempViewport.dragControl.setDragObjects(dragObjects, 'push')
//
this.group.add(...objects) // this.group.add(...objects)
} // }
//
afterCreateOrUpdateLine(start: ItemJson, end: ItemJson, type: LinkType, option: RendererCudOption, object: THREE.Object3D) { // afterCreateOrUpdateLine(start: ItemJson, end: ItemJson, type: LinkType, option: RendererCudOption, object: THREE.Object3D) {
super.afterCreateOrUpdateLine(start, end, type, option, object) // super.afterCreateOrUpdateLine(start, end, type, option, object)
//
const startPoint = this.tempViewport?.entityManager.findObjectById(start.id) // const startPoint = this.tempViewport?.entityManager.findObjectById(start.id)
const endPoint = this.tempViewport?.entityManager.findObjectById(end.id) // const endPoint = this.tempViewport?.entityManager.findObjectById(end.id)
//
const p0 = startPoint.position // const p0 = startPoint.position
const p1 = endPoint.position // const p1 = endPoint.position
//
const dist = p0.distanceTo(p1) // const dist = p0.distanceTo(p1)
const label = numberToString(dist) + ' m' // const label = numberToString(dist) + ' m'
//
const position = new THREE.Vector3().addVectors(p0, p1).multiplyScalar(0.5) // const position = new THREE.Vector3().addVectors(p0, p1).multiplyScalar(0.5)
let labelObj: Text | CSS2DObject | undefined = object.userData.labelObj // let labelObj: Text | CSS2DObject | undefined = object.userData.labelObj
if (!labelObj || !labelObj.parent) { // if (!labelObj || !labelObj.parent) {
labelObj = this.createLabel(label) // labelObj = this.createLabel(label)
this.group.add(labelObj) // this.group.add(labelObj)
object.userData.labelObj = labelObj // object.userData.labelObj = labelObj
} // }
//
labelObj.position.set(position.x, position.y + 0.3, position.z - 0.2) // labelObj.position.set(position.x, position.y + 0.3, position.z - 0.2)
//
if (this.useHtmlLabel) { // if (this.useHtmlLabel) {
labelObj.element.innerHTML = label // labelObj.element.innerHTML = label
//
} else { // } else {
// 让文本朝向摄像机 // // 让文本朝向摄像机
labelObj.quaternion.copy(this.tempViewport.camera.quaternion) // labelObj.quaternion.copy(this.tempViewport.camera.quaternion)
labelObj.text = label // labelObj.text = label
labelObj.sync() // labelObj.sync()
} // }
} // }
//
afterDeleteLine(start: ItemJson, end: ItemJson, type: LinkType, option: RendererCudOption, object: THREE.Object3D) { // afterDeleteLine(start: ItemJson, end: ItemJson, type: LinkType, option: RendererCudOption, object: THREE.Object3D) {
super.afterDeleteLine(start, end, type, option, object) // super.afterDeleteLine(start, end, type, option, object)
//
// 删除标签 // // 删除标签
const labelObj = object.userData?.labelObj // const labelObj = object.userData?.labelObj
if (labelObj && labelObj.parent) { // if (labelObj && labelObj.parent) {
labelObj.parent.remove(labelObj) // labelObj.parent.remove(labelObj)
} // }
} // }
//
/** // /**
* 创建标签 // * 创建标签
*/ // */
createLabel(text: string): Text | CSS2DObject { // createLabel(text: string): Text | CSS2DObject {
if (this.useHtmlLabel) { // if (this.useHtmlLabel) {
const div = document.createElement('div') // const div = document.createElement('div')
div.className = 'css2dObjectLabel' // div.className = 'css2dObjectLabel'
div.innerHTML = text // div.innerHTML = text
div.style.padding = '5px 8px' // div.style.padding = '5px 8px'
div.style.color = '#fff' // div.style.color = '#fff'
div.style.fontSize = '14px' // div.style.fontSize = '14px'
div.style.position = 'absolute' // div.style.position = 'absolute'
div.style.backgroundColor = 'rgba(25, 25, 25, 0.3)' // div.style.backgroundColor = 'rgba(25, 25, 25, 0.3)'
div.style.borderRadius = '12px' // div.style.borderRadius = '12px'
div.style.top = '0px' // div.style.top = '0px'
div.style.left = '0px' // div.style.left = '0px'
// div.style.pointerEvents = 'none' //避免HTML元素影响场景的鼠标事件 // // div.style.pointerEvents = 'none' //避免HTML元素影响场景的鼠标事件
const obj = new CSS2DObject(div) // const obj = new CSS2DObject(div)
obj.name = MeasureRenderer.LABEL_NAME // obj.name = MeasureRenderer.LABEL_NAME
return obj // return obj
//
} else { // } else {
const label = new Text() // const label = new Text()
label.text = text // label.text = text
label.font = SimSunTTF // label.font = SimSunTTF
label.fontSize = 0.4 // label.fontSize = 0.4
label.color = '#333333' // label.color = '#333333'
label.opacity = 0.8 // label.opacity = 0.8
label.padding = 0.2 // label.padding = 0.2
label.anchorX = 'center' // label.anchorX = 'center'
label.anchorY = 'middle' // label.anchorY = 'middle'
label.depthOffset = 1 // label.depthOffset = 1
label.backgroundColor = '#000000' // 黑色背景 // label.backgroundColor = '#000000' // 黑色背景
label.backgroundOpacity = 0.6 // 背景半透明 // label.backgroundOpacity = 0.6 // 背景半透明
label.padding = 0.2 // 内边距 // label.padding = 0.2 // 内边距
label.material.depthTest = false // label.material.depthTest = false
label.name = MeasureRenderer.LABEL_NAME // label.name = MeasureRenderer.LABEL_NAME
//
label.sync() // label.sync()
return label // return label
} // }
} // }
dispose() { dispose() {
super.dispose() super.dispose()

Write Preview
Loading…
Cancel
Save