All of these terms come from the fact that you’re going to make visual applications, if not, go away. Not engaged in technology friends read a good read, engaged in technology development you have to read.
Webgl – Is a 3D drawing protocol. This drawing technology standard allows JavaScript to be combined with OpenGL ES 2.0. By adding a JavaScript binding to OpenGL ES 2.0, WebGL can be HTML5. Canvas provides hardware 3D accelerated rendering so that Web developers can use the system graphics card to render 3D scenes and models more smoothly in the browser, as well as create complex navigation and data visualizations. Obviously, the WebGL technology standard eliminates the need to develop web-specific rendering plugins that can be used to create web pages with complex 3D structures, even to design 3D web games, and so on.
Javascript — (” JS “for short) is a function-first, lightweight, interpreted or just-in-time compiled programming language. Although it is best known as a scripting language for developing Web pages, iT is also used in many non-browser environments. JavaScript is a prototype-based, multi-paradigm dynamic scripting language, and supports object-oriented, imperative, and declarative (such as functional) programming styles.
HTML – HTML is called hypertext Markup Language (HTML) and is an identity language. It includes a series of tags. These tags unify the format of documents on the network and connect scattered Internet resources into a logical whole. HTML text is descriptive text composed of HTML commands that describe text, graphics, animations, sounds, tables, links, etc.
ThingJS — ThingJS is a PaaS platform for iot visualization that helps iot developers easily integrate 3D visualizations. The ThingJS name comes from the Internet of Things. The Thing of Things, ThingJS is developed using one of the most popular Javascript languages of today. It can not only carry out visual development for park scenes composed of single or multiple buildings, but also carry out development for map-level scenes with rich plug-ins. Widely used in data centers, warehousing, schools, hospitals, security, planning and other fields. The Internet of Things is divided into perception layer, network layer and application layer. The application layer involves the development of 3D interfaces, which is a challenge for most enterprises. ThingJS can dramatically reduce the cost of 3D interface development.
Cesium — CesiumJS is an open Source JavaScript library for creating world-class 3D globes and maps with the best possible performance, precision, visual quality,and ease of use. Developers across industries, from aerospace to smart cities todrones, use CesiumJS to create interactive web apps for sharing dynamicgeospatial data.Built on open formats, CesiumJS is designed for robust interoperability.Bring in data from Cesium ion or from some other source, Visualize withCesiumJS, and share with users on desktop or mobile. With more than 500,000downloads, CesiumJS powers apps that reach millions of users.
Is the above explanation clear to everyone? 3D development technicians are certainly not unfamiliar, but for front-end engineers, they still need to know more about it, and further promote 3D development engineers and further!
Drag and drop event JS
/ * *
* Description: Drag objects
* operation:
* After drag is enabled, drag objects with the left mouse button
* Objects cannot be dragged after drag is turned off
* Difficulty: ★★☆☆
* /
var app = new THING.App({
url: ‘https://www.thingjs.com/static/models/storehouse’
});
app.on(‘load’, function () {
// Get all Thing objects
var objs = app.query(‘.Thing’);
New thing.widget. Button(‘ enable drag ‘, function () {
// Set object draggable (default object draggable)
objs.draggable = true;
// Set the edge color
objs.style.outlineColor = ‘#ff0000’;
});
New thing.widget. Button(‘ close drag ‘, function () {
objs.draggable = false;
objs.style.outlineColor = null;
})
// Listen for drag-related events
// Start dragging
objs.on(‘dragstart’, function (ev) {
Console. log(‘ Start dragging ‘)
var obj = ev.object;
obj.style.color = ‘#ff0000’;
});
/ / drag
objs.on(‘drag’, function (ev) {
if (ev.picked) {
console.log(ev.pickedPosition);
}
});
// End drag
objs.on(‘dragend’, function (ev) {
Console. log(‘ end drag ‘)
var obj = ev.object;
obj.style.color = null;
});
})