Official example (17): 3D scene top card modeling development ThingJS

#Frontend#3D Development#Visualization of Internet of Things

  1. Advertising top sign in 3D scene
  2. CampusBuilder setup information board
  3. 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.
Insert picture description here

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.
Insert picture description here

(2) Different styles of information boards can be selected, and 3D modeling or visible display can be set, and the preview can be confirmed.
Insert picture description here

(3) After confirming the information board, the top of the model will be displayed and synchronized to the ThingJS development project.
Insert picture description here

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.
Insert picture description here

More code examples enter the online development-3D interface ( ) 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!

Guess you like