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();
}

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

相关推荐
前端小巷子20 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js