ThingJS实现面板与物体对象的连线


2D面板与三维物体的之间进行连线,对于可视化的呈现会更加直观,并且有联动的效果。

实现原理:

1、获取面板与对象点位集合,将2D信息面板的坐标转成3D坐标

2、创建类型为Line的像素线

3、当物体移动时,使用update方法,不断更新物体位置,达到物体与2D面板一直处于连接状态

实现源码

kotlin 复制代码
/**
 * @description 面板与孪生体连线
 */
class PanelLines {
	object: any;
	infoDom: any;
	lines: any;
	lightPointers: any;
	app: any;
	dot: any;
	constructor(object: any, infoDom: any) {
		this.object = object;
		this.infoDom = infoDom;
		this.lines = null;
		this.lightPointers = null;
		this.app = THING.App.current;
		this.dot = {
			x: -12,
			y: 10,
			imgUrl: '/image/dot.png',
			width: 12,
			height: 12,
		};
	}

	/**
	 * @description 获取面板与对象点位集合
	 * @returns {Array} 点位集合
	 */
	_getPos() {
		const boundingBoxY = this.object.boundingBox.size[1] / 2;
		const domStyle = window.getComputedStyle(this.infoDom);
		const domLeft = parseFloat(domStyle.left) || 0;
		const domTop = parseFloat(domStyle.top) || 0;
		const y = domTop + this.dot.height / 2 + this.dot.y;
		const x = domLeft + this.dot.width / 2 + this.dot.x;
        // 3D物体对象的坐标
		const getPos1 = () => THING.Math.addVector(this.object.position, [0, boundingBoxY, 0]);
        // 连线拐点位置的坐标
		const conerPoint = () => this.app.camera.screenToWorld([x - 20, y, 0]);
        // 2D信息面板的坐标
		const getPos2 = () => this.app.camera.screenToWorld([x, y, 0]);
		return [getPos1(), conerPoint(), getPos2()];
	}
	/**
	 * @description 创建像素线
	 */
	createLine() {
		const points = this._getPos();
		this.lines = this.app.create({
			type: 'Line',
			name: 'panel_lines',
			color: 'rgba(255, 255, 255, 0.5)', // 轨迹线颜色
			points,
			style: {
				alwaysOnTop: true,
			},
		});
		this.createLinePoints();
	}
	/**
	 * @description 创建线两端光点
	 */
	createLinePoints() {
		const points = this._getPos();
		this.lightPointers = [points[0], points[points.length - 1]].map((point) => {
			const distance = THING.Math.getDistance(point, THING.App.current.camera.position);

			const marker = this.app.create({
				name: 'panel_dots',
				type: 'Marker',
				url: this.dot.imgUrl,
				position: point,
				localScale: THING.Math.scaleVector([1, 1, 1], (1 * distance) / 38),
				keepSize: true,
				style: {
					alwaysOnTop: true,
				},
			});
			return {
				marker,
				point,
			};
		});
	}
	/**
	 * @description 更新线
	 */
	updateLines() {
		this.app.on(
			'update',
			() => {
				const panelPos = this._getPos();
				if (this.lines) {
					panelPos.forEach((v, i) => {
						this.lines.setPoint(i, v);
					});
				}
				if (this.lightPointers) {
					this.lightPointers[0].marker.position = panelPos[0];
					this.lightPointers[1].marker.position = panelPos[2];
				}
			},
			'createlines'
		);
	}
	/**
	 * @description 删除线
	 *
	 */
	destroyLines() {
		const getLine = this.app.query('panel_lines');
		const getPoint = this.app.query('panel_dots');
		if (getLine.length) {
			getLine.destroy();
			getPoint.destroy();
		}
		this.app.off('update', null, 'createlines');
	}
}
export default PanelLines;

如何应用呢?

typescript 复制代码
import PanelLine from './PanelLines';
import panel from "./panel.vue";

// 信息面板与孪生体连线
const panelDom = document.querySelector('.panel'); // 2D面板的dom
const object = app.query('物体')[0]; // 查询的物体对象
const lines = new PanelLine(object, panelDom); // 连线方法
lines.createLine(); // 创建连线
lines.updateLines(); // 更新连线

// 移除面板与孪生体的连线
if (lines) {
    lines.destroyLines();
}

创建连线两端的端点图片,是白色的,图片看起来会不太明显

相关推荐
汪敏wangmin16 分钟前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦1 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆1 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20182 小时前
Ruby如何采集直播数据源地址
前端·chrome
goldenocean2 小时前
React之旅-05 List Key
前端·javascript·react.js
亮学长2 小时前
lodash不支持 Tree Shaking 而 lodash-es可以
大数据·前端·elasticsearch