This article is only for those who need it if you are related to: 1. You are a technician 2. You know front-end development, JS, and WebGL. 3. Have great interest in 3D visualization of the Internet of Things
4. Be willing to spend time on research and development. Then this tutorial is for you. Please read on:
Create a project
You need to log in to your ThingJS account before creating a project. If you haven’t logged in to your account or the message “Login expired, please log in again! In order to ensure the correct saving and operation of the project, please create the project after logging in with your account. You can create projects in one of three ways:
Select the file – New Project option in the menu area
Click the “New” icon on the toolbar, as shown on the right:
Use the shortcut key “Ctrl+P”
Edit item
Online development provides users with quick code and official samples. If you’re developing a page online with ThingJS, you can edit the project in one of two ways:
Click on the shortcut code option in the menu area of the online development page, and the corresponding code will be automatically inserted into the editing area
Select any of the official online development examples and click on the corresponding example to display the corresponding code in the edit area
For details, see Online Development – Application Development – Online Development
Save the project
There are four ways to save projects:
Select the file-Save option in the menu area
Click the “Save” icon on the toolbar, as shown in the picture on the right:
Use the shortcut key “Ctrl+S”
Run the project
The online development environment provides several ways to run projects:
Using the shortcut “Ctrl+R/Enter” or clicking the “Run” icon in the toolbar, the 3D container area will run the appropriate code for the editor. The icon is shown on the right:
Select “Tools-Settings” selection in the menu area, the Settings panel appears, and click to open “Automatic Save Execution”.
Interface is introduced
The left side of the online development page shows official examples and projects created and saved by users, the middle editor shows the contents of projects or files you have opened, and the right side mainly shows the 3D scene after the project runs.
Interface area
Menu bar: Shortcut entry for project or project file operation, including file, shortcut code, resources, tools, project, view and help seven sub-items
Project list: an official collection of sample code and user projects that are displayed only after login
Toolbar: Icon display of the menu bar
Status bar: Displays the status of user projects, files, or official examples
Editor: Contents of the currently open project
3D container: visual display of the scene after the project runs
Project print log: Logs generated during project running
Switching between display and hidden in project navigation: show/hide the project list on the left
File location: the path to the currently open project/file
Application for modeling: The ThingJS platform offers customized models (facilities, building exterior, etc.) starting at 800 YUAN per model. To apply, fill in the information and a person will contact ThingJS to discuss the details.
Ask for help: To help ThingJS users get started quickly, the ThingJS platform offers framework code development services for their specific projects. This service enables users to quickly build 3D visualization framework code resources (including source code, 3D model, texture, data, etc.) that meet the basic requirements of the project. On this basis, the technical team of users can quickly get started and greatly improve the foundation for the success of 3D visualization projects.
Recharge: Magic bean recharge, including two recharge methods: Alipay and wechat pay. After recharge, magic beans can be used to purchase VIP, VIP renewal or payment for project deployment.
Upgrade VIP: Ordinary users can upgrade to VIP through Alipay, wechat Pay or Magic Bean Pay.
Personal information bar: user name and profile picture
Container float: Click the “Float” icon and the 3D container will be displayed as a floating layer
Maximize preview: Maximize preview of the scene
Online advice: ThingJS online support portal
Editor drag and drop: Adjust the width ratio between the editor and the 3D container
Main Functions
The menu bar
The menu bar of an online development environment is located in the left side of the header and consists of the following parts:
File: Operations performed on users’ projects and files in the online development environment, including creating projects, creating files, saving and running. For details, see Online Development – Menu Navigation – File Management.
Quick code: To improve the efficiency of a project, click on a quick code in ThingJS and the editor inserts the corresponding code. You can also click the shortcut code icon in the toolbar to perform corresponding operations. For details, see Online development – Menu Navigation – Shortcut code.
Resources: An online development environment provides users with a diverse set of resources including models, parks, maps, charts, interfaces, dynamic background lights, and user-uploaded resources. For details, see Online Development – Menu Navigation – Resource Management.
Tools: mainly include scene information, scene effects, pick up coordinates, custom model and Settings. For details, see Online Development – Menu Navigation – Scenario Tools.
Projects: Sharing, deploying, and updating of projects developed by users. For details, see Online Development – Menu Navigation – Project Management.
View: Changes the interface layout of an online development environment by toggling the explicit and implicit state of logs, 3D containers, and directories (item lists), and toggling the view style. For details, see Online Development – Menu Navigation – View Management.
Help: Provides a detailed description of the keyboard shortcuts and shortcuts to other ThingJS related pages. For details, see Online Development – Menu Navigation – Help.
A list of items
The list of projects is located mainly on the left side of the online development environment and consists mainly of official examples and user projects. Switch between official and personal projects by clicking “Official” and “My” at the top of the list:
When switching to the official sample in the input box below list title search input related content can search the corresponding official example, click on the appropriate sample, the editor will display the corresponding code, click the run icon, right 3 d container will show sample corresponding scenario, users can within the editor on the sample code to modify and save for the individual project.
Note: A new tag (
), all examples in the VIP column are only available to VIP users.
When switching personal projects, select any of them, right-click “Open Project”, the editor and 3D container will display the content and scene of the project respectively, and the project and the files under the project will be displayed in the “current Project” directory. Users can edit and modify the current project and files under the project.
Matters needing attention:
Users can create and save projects only after they have registered and logged into ThingJS, otherwise the “My Projects” list will not appear in the left navigation bar
The toolbar
The toolbar ICONS are described as follows:
Icon Description
New project: Creates an empty project that users can add or modify in the editor
Save project: Save the file that is currently being edited
Execute project: Run the project or example currently under editing, and the corresponding scene will be displayed in the 3D container on the right
Project sharing: Share projects or examples that are currently being edited
Models: Displays the model resources panel, which consists of official models provided by ThingJS and user-selected or uploaded models
Park: Display the park resource panel. The park resources in the panel are composed of the park scenes uploaded by users or synchronized from CamBuilder
Maps: Displays the Map resources panel, which contains the maps created by the user in CityBuilder
Charts: Shows the campus resources panel, with a chart template provided by the ThingJS platform
Interface: Displays the Interface resource panel, which provides shortcuts to Widget panel components provided by the ThingJS platform
Dynamic Background: Displays a dynamic background panel with a background template provided by ThingJS
Quick code: Displays the quick code panel, which is a collection of a large number of common functional code blocks provided by online development to improve the user’s development efficiency
Scenario information: Display scenario information (a series of scenarios for the currently running project or example)
Scene Effects: Display the scene effects panel, in which switches and buttons can adjust the 3D container scene lighting, post-production, dynamic sky, fog and other scene effects
The status bar
Intermediate between an editor and a toolbar to display open projects, files, or examples. When an open user project already exists in the online development environment, clicking on another example or project file will open as a reference file in the status bar. The status bar after clicking will look like this:
The editor
Online development in the editor used to query, modify the content of the project or file, support automatic spelling and shortcut key operation. For details, see Online Development – Application Development – Online Development
3 d container
Shows the scene and effect after the code runs in the editor
Project Printing Logs
If the project file or sample corresponding to the 3D container scenario contains a code block like: console.log(obj), the project print area on the lower right side of the online development environment will enter the relevant information
Well, the content is a little long, the site is not easy to pull down, but also please see the students move to our development platform trial, free of charge oh ~