How does front-end technology realize 3D visualization application development?

Quick start

Before using

Before you can start using ThingJS, you need to know Javascript, and we’ll assume you already know JS.

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

Scenario building

The ThingJS platform provides users with two ways to build a scene:

Build 3D scene through CamBuilder client

Build 3D scenes through CityBuilder

CamBuilder

The following steps are required to download through the client:

Download the 3D Campus setup tool from ThingJS and click the Download button in the download details panel

After downloading, you can log in your account and click “User Manual” under the tool to view the user tutorial

Export the scene to upload or synchronize it to ThingJS

Select scenarios under park resources for development

For details, see Online Development – Menu Navigation – Resource Management – Park

CityBuilder

In the Maps resource panel, click New Map

Enter the map name in the pop-up screen and click “Next”.

Select either one click city or Upload Data. If you select “Upload data”, a new map resource will be added to the map panel. If you select “one-click City”, you need to select “City Scope” and “Template” and click “Next”. After the data download is complete, click “Enter Edit” to add a map resource in the map panel

Select the map under map resources for development

For details, see Online Development – Menu Navigation – Resource Management – Map

Online development

The online editor supports automatic spelling, input a character (string), if the character (string) exists, the editor will show the matched content, click to select the required code, as shown below:

Right-click in the edit area to bring up the shortcut tool menu, press the right mouse button and click to select the tool as shown below:

Shortcut key operations are shown in the following table.

Shortcut Keys Description of shortcut keys

Ctrl + F find

Ctrl + H to find the replacement

Ctrl + [, Ctrl +] indent code lines

Ctrl + C copies the current selection

Ctrl + X cuts the current selection

Ctrl + V inserts the contents of the clipboard at the cursor and replaces any selected contents. Use this shortcut only after you have cut or copied the contents

Shift + Alt + F code formatting

Alt + Up, Alt + Down move Up or Down a line

Alt + Shift + Left mouse button Multi-line editing (column editing) (right mouse button to change all matches)

Ctrl + Delete Deletes all words to the right of the cursor

Ctrl + U Rewinds the previous cursor operation

Ctrl + 0 after Ctrl + K folds all area codes

Ctrl + J after Ctrl + K expands all folding area codes

Select comment code block comment with Ctrl+ /

Home moves to the top of the line

End moves to the End of the line

Ctrl + F12 to go to Definitions

Alt + F12 quick view definition

Shift + F12 finds all definitions

Ctrl + End moves to the End of the file

Ctrl + Home moves to the beginning of the file

Ctrl + Shift + Enter inserts a line above the current line

Press F1 in the editor to bring up the list of shortcut functions, and users can select the functions as shown below:

The online editor supports the insertion of commonly used code blocks, lowering the barrier to learning. Move the mouse pointer to “Shortcut Code” in the menu bar or click the “Shortcut Code” icon in the toolbar (

), common code blocks will appear, click the shortcut code button, you can insert the corresponding function code in the editor.

To facilitate user development, the online development environment provides a shortcut to reference resources. For example, in the template Resource step:

Click on the toolbar “Model” icon (

)

Double-click the model you want to reference in the model Resource panel that appears

The editor area quickly inserts the corresponding code

Click the “Execute Project” icon in the toolbar (

), the model will appear in the scene inside the 3D container on the right

For other resource reference operations, see Online Development – Menu Navigation – Resource Management

Online debugging

The ThingJS online development environment can be debugged by adding the “debugger” keyword to the code as follows:

Add the “debugger” keyword to your code

F12 Open the browser console

Click the button to run the code

View the breakpoint location in the browser console

F12 debugging

Just like normal page debugging method, directly open F12 to find the debug.js file in Sources, in which to debug, the debugging steps are as follows:

F12 key to the browser console to view information about the online development environment

Click on “Source-Page”

Select ifId(About :blank) – (no-domain-debug.js) from Top

Number of breakpoint lines clicked in the debug.js file of the browser console

Click the “Execute Project” icon on the Online Development toolbar (

)

Data docking

The ThingJS platform currently offers four ways to connect data:

Ajax

JSONP

WebSocket

MQTT

Ajax Connection

Ajax data docking

The essence of Ajax is a data interaction mode that sends HTTP requests to the server through the XMLHttpRequest object of the browser and processes the data returned by the server.

For native Ajax, there are several steps:

Create an XMLHttpRequest instance;

Make an HTTP request;

Receive data returned by the server;

Process data and update pages.

In the ThingJS online development environment, the built-in JQuery library allows you to directly use JQurey-wrapped Ajax methods for data docking, such as:

$. Ajax ({” url “:” http://3dmmd.cn:83/getMonitorDataById “, / / ajax request service address ‘type’ : “GET”, / / request “POST” or “GET”, The default is “GET”‘dataType’:”json”,// the dataType returned by the service, Standard JSON data format is recommended // The data sent to the server ‘data’:{‘id’:89757},// The callback function ‘success’:function(data){console.log(data); Function (XHR,status,error){console.log(XHR); function(XHR,status,error){console.log(XHR); }});

About the cross domain

For security reasons, browsers have a same-origin policy, which means “three of the same” :

The protocol is the same;

Domain name is the same

The same port

For 3D pages published in the ThingJS online development environment, the protocol is https://, the domain name is www.thingjs.com, and the port is 80 (the default port can be omitted). If there is a difference between the protocol, domain name, or port, the Ajax request will fail.

The request can be viewed in the development tool Network. The following figure shows cross-domain related errors:

Therefore, to request static resource data or data services from a user’s own server, or data services from another web site, in the Online environment of ThingJS, you need to solve cross-domain problems.

Matters needing attention

There is no cross-domain problem if you are accessing static JSON data resources that users upload to the ThingJS website.

Ajax requests cross domain solutions

For developing in the ThingJS online development environment, we recommend the following solutions for cross-domain issues:

CORS;

CORS is a W3C standard, which stands for cross-Origin Resource Sharing. It allows the browser to make XMLHttpRequest requests to servers across domains, which solves the problem of Ajax requesting data across domains.

For the front end, the whole CORS communication process is completed automatically by the browser. For developers, the front-end code is exactly the same as normal Ajax code. The key to implement CORS is the backend. You can enable CORS by setting the access-Control-Allow-Origin attribute of the response header on the server. This attribute indicates which domain names can access resources. If a wildcard is set, all websites can access resources.

Access-control-allow-origin “,”*”// All websites are accessible // only ThingJS websites are accessible // “access-Control-allow-Origin “,”http://www.thingjs.com”

If the CORS request is not a simple cross-site request, for example:

Use HTTP request methods other than GET or POST (PUT DELETE, etc.);

The requested Content-Type does not fall into one of the following three categories:

Application/x – WWW – form – urlencoded;

Text/plain.

Multipart/form – data;

Custom request header information (such as Token data) was sent.

Set access-Control-allow-headers and access-Control-allow-methods in the response Headers of the server based on the actual situation. For example:

The browser Ajax request is:

$.ajax({‘headers’:{“token”:’31415926’// Request header with token data}, “url” : “http://localhost:3000/getDataByIds”, “type” : “POST”, / / to use when sending data to the server content type. The default is: “Application /x-www-form-urlencoded” but this does not organize complex JSON into key-value pairs // so set contentType to ‘application/ JSON; Charset = utF-8 ‘, this type is text type ‘contentType’:’application/json; Charset = UTF-8 ‘,’dataType’:”json”,// Data sent to server due to contentType set to ‘application/json; Charset =utf-8′,’ data’: json.stringify ({‘ids’:[1,2,3]}),’success’:function(data){console.log(data); }});

The server needs to set:

/ / configuration allows the request of the way, if write * Allow “Access – Control – Allow – the Methods”, “PUT, POST, GET, DELETE, the OPTIONS”. Access-control-allow-headers “,” content-type,Token”;

See the sample

The request can be viewed in the development tool Network. The following figure shows cross-domain related errors:

Matters needing attention

There is no cross-domain problem if you are accessing static JSON data resources that users upload to the ThingJS website.

The json docking

The basic principle of JSONP is to make use of script tags without cross-domain restrictions, through script tags to the server to request data; The server receives the request and returns the data to the browser in a named callback function.

Because JQuery’s Ajax requests encapsulate JSONP, we can request JSONP data directly using methods such as:

$.ajax({type:”get”,url:”http://3dmmd.cn:83/monitoringData”,data:{“id”:89757},dataType:”jsonp”,// 返回的数据类型，设置为JSONP方式//设置回调函数名 JQurey会自动注册该函数jsonpCallback:”myCallbackFun”,success:function(d){console.log(d);// 处理json数据}});

The sample will be sent to the browser a similar to the request of http://3dmmd.cn:83/monitoringData?id=89757&callback=myCallbackFunc, a server by parsing the callback url parameter, The following data is returned:

MyCallbackFunc ({” state “:” success “, “data” : {” id “:” 89757 “, “temper” : “26 ℃,” “humi” : “42%”, “power” : “9 KWH”}})

After a successful request, JQuery executes myCallbackFun so that the JSON data can be retrieved and processed in the callback function.

Matters needing attention

JSONP supports only GET requests. If jsonpCallback is used for multiple JSONP requests using JQuery Ajax methods, do not repeat the name of the callback function. Otherwise, the callback function may be undefined. For details, see the cause of jSONP request failure.

See the sample

WebSocket docking

WebSocket is a new HTML5 protocol, which realizes full duplex communication between browser and server.

In essence, a TCP connection is created for data exchange after the handshake through HTTP/HTTPS protocol. The server and client use this TCP connection for two-way real-time data transmission. The connection is closed only when one party actively sends a request to close the connection or a network error occurs.

The biggest advantage of WebSocket is that the server can take the initiative to push information to the client, and the client can also take the initiative to send information to the server, which really realizes real-time two-way communication of data. And WebSocket communication is not restricted by the same origin policy, that is, there is no cross-domain problem.

WebSocket client API

A simple example on the browser side is as follows:

// Create a WebSocket connection varwebSocket=newWebSocket(‘ws://3dmmd.cn:82’); Websocket. onOpen =function(){console.log(” Websocket server connected successfully… ); }; Websocket. onMessage =function(ev){console.log(” webSocket received data: “+ev.data); }; Websocket. onclose=function(evt){console.log(” webSocket closed… ); }; Websocket. onerror=function(){console.log(‘ error ‘)}

The connection status can be obtained from the readyState property value (read only) :

0 – Indicates that the connection is not established.

1 – Indicates that the connection is established and communication can be performed.

2 – Indicates that the connection is being closed

3 – Indicates that the connection is closed or cannot be opened

When the connection is successful, the send() method can be used to send data to the server, for example:

vardataObj={‘id’:89785}; // Send data can be a string or binary object (Blob object, ArrayBuffer object) websocket.send (json.stringify (dataObj));

The close() method can be called on the client side to actively close the WebSocket connection.

See the sample

WebSocket server

On the server side, node.js, Java,.net, C++ and other languages have corresponding API libraries or frameworks to realize the server-side development of WebSocket. Developers can choose corresponding solutions according to specific project requirements, which are not detailed here.

MQTT is used for interconnection

MQTT is a lightweight protocol that uses the broker (server/broker) at its center. Clients interact with each other through subscription and publication messages. The steps for using MQTT are as follows:

Mosquitos connect directly to MQTT server (Mosquitos websocket connection)

Reference third-party MQTT libraries

MQTT data interconnection

A simple example on the browser side is as follows:

// Reference the third-party MQTT library, As shown in the https://github.com/mqttjs/MQTT.jsTHING.Utils.dynamicLoad([‘https://www.thingjs.com/static/lib/mqtt.js’],function(){init( ); }); varclient=null; // Create a mosquito.connect client=mqtt.connect(” WSS :www.3dmmd.cn:8086″); client.subscribe(“/public/TEST/dev1”); Client. On (“message”,function(topic,payload){console.log(‘data:’+payload); Obj. SetAttribute (monitorData/temperature, content; changeColor(obj); }); // Close the connection to client.end();

The mosquitmosquitconnection can be actively closed by calling the end() method on the client.

See the sample

How does front-end technology realize 3D visualization application development?

Related Posts

Solve the problem that the applet event delegate cannot get the dataset

Mobile SPA shopping mall optimization (II) — reduce packaging wait time by 70%

Explore the color space in video frames — RGB and YUV