#Frontend#3D Development#Visualization of Internet of Things
- Advertising top sign in 3D scene
- CampusBuilder setup information board
- Top card of ThingJS development scene
Advertising top sign in 3D scene
We have all seen outdoor billboards, as an outdoor media device set up beside buildings or roads, not only attracting people, providing scene guidance, but also as a part of architectural design. Therefore, the design of billboards is diverse.
In the physical world, billboards are affected by the production materials and force-bearing components; in the 3D scene, the top sign is no longer a billboard in the actual sense, but a form of information expression.
The advertising top board of the 3D scene usually requires graphic annotations, and online elements such as zoom, color and transparency are added to play a more beautiful role.
CampusBuilder setup information board
ThingJS provides visual development components, and smart scenes are built in CampusBuilder.
(1) The top card is also known as the "information card" in the model building interface, which is usually displayed on the model (such as a cabinet), so you must first select the model, and specify the model ID, model name and custom attributes, and edit it in the lower left corner Information board.
(2) Different styles of information boards can be selected, and 3D modeling or visible display can be set, and the preview can be confirmed.
(3) After confirming the information board, the top of the model will be displayed and synchronized to the ThingJS development project.
Top card of ThingJS development scene
The ThingJS platform supports embedding into scene development projects and editing and modifying online. In the project development interface, the editor provides code description, and the 3D container provides 3D scenes and 2D visualization components to facilitate user operations.
Basic operations: (1) Create or zoom the top card; (2) Change the style or text.
Mouse registration event: (1) Click to display: select the model, and the top card will be displayed above; (2) Floating display: select to place the mouse on the model , It will be displayed after induction; (3) Constant display: The top card is fixed on the model; (4) Modeled top card: Choose 3D modeling, it will become a three-dimensional top card, presenting a 3D effect.
Note: The top card information detail table in the 3D scene provides model information, which should be confirmed one by one when setting the information top card.
More code examples enter the online development-3D interface (http://www.thingjs.com/guide/?m=sample ) view.
ThingJS online development launches the " Scenario Display Top Card " function, which combines smart scene construction and online development better. Users develop in the project (not just in the scene), and it is easier to directly call javasript!
About ThingJS
ThingJS provides 3D visualization components of the Internet of Things, directly calls 3D scripts with Javascript, and based on 200 3D development source code examples, allows you to fully understand the visualization development logic of the Internet of Things, and become a digital twin technology innovator with 200,000 developers!