Preface
If you want to define a virtual range in the digital scene, you can create a polygonal area (circle, square, irregular shape), and define the range interface; after creating the area range and setting its position, you can perform many kinds of content for the range Operation, so as to achieve more precise interactive control of the digital twin object, more demos can be registered here !
Create area scope
ThingJS uses the button attribute to create an area range. Whether it is a circle, a square or a polygon, the world coordinates of the area need to be defined to form the point position of the area shape. At the same time, the area color, border color, and transparency are added, and the drag mode is enabled. It can be easily generated with 15 lines of code!
new THING.widget.Button('创建方形区域', function () {
// 构成多边形的点（取世界坐标系下的坐标）
var points = [[0, 0, 0], [10, 0, 0], [10, 0, 10], [0, 0, 10]];
if (region02 != null) return;
// 创建方形区域
region02 = app.create({
type: 'PolygonRegion',
id: 'polygonRegion02',
points: points, // 传入世界坐标系下点坐标
style: {
regionColor: '#9F35FF', // 区域颜色
lineColor: '#9F35FF', // 边框颜色
regionOpacity: 0.3 // 不透明度 (默认是 0.5 半透明)
},
})
region02.draggable = true; // 开启拖拽
})Registration event development
ThingJS uses the mouse to register events, including mousemove events, mouse button down events mousedown, mouse button up mouseup, mouse buttons leave mouseleave, mouse buttons into mouseenter, etc. 5 attributes to complete the registration time-based development method.
Taking the creation of a circle as an example, the interactive development of the mouse is more intuitive and effectively improves development efficiency.
Before stretching
After stretching
As you can see from the above figure, the mouse logo is different within the area, outside the area, and at the edge of the area. Operations such as picking can be performed within the area, and the area edge can be stretched by using the mouse button to lift mouseup.
// 注册鼠标划入区域后鼠标键抬起事件
app.on('mouseup', function (ev) {
if (ev.button == 0) {
app.resumeEvent('mousemove', null, '监听鼠标位置事件');
app.resumeEvent('mouseenter', '.PolygonRegion', '鼠标划入区域事件');
if(stretchState == true){
app.off('mousemove', null, '圆形区域拉伸事件');
$(document.body).css('cursor', 'default');
}else{
$(document.body).css('cursor', 'grab');
}
}
}, '鼠标划入区域后鼠标键抬起事件');
}, '鼠标划入区域事件');The different area ranges are represented by an example of the Button type. In fact, they show similar properties and methods, including point coordinates, style properties, and mouse registration events. Copy creation is easier!
to sum up
The above is the whole content of this article. I hope that the content of this article can bring some help to your study or work. If you have any questions, you can leave a message.
About ThingJS
The Unicorn ThingJS platform provides 3D visualization components of the Internet of Things, making 3D development easier! Direct Javascript call 3D scripts, based on 200 3D development source code examples, let you fully understand the visual development logic of the Internet of Things, one-stop project development services (scene construction-3D script development-data docking-project deployment) attracted more than 200,000 Developers settle in and become digital twin technology innovators! Magic bean flower activity ing, welcome to click to enter the official website >>