preface

Recruitment is a very important link for a company. Firstly, it affects the future development trend of the company. Secondly, it infuses fresh blood into the company and makes the company more dynamic. Of course, HT, born in the context of industrial Internet and Internet of Things, also needs to inject fresh blood to further improve the company’s technology and capabilities. Unlike traditional recruitment documents, this paper will not simply list a series of positions and benefits to entice you to join. Instead, it will use HT to complete a 2D and 3D recruitment DEMO to let you experience our design aesthetic ability and technical ability to entice you to join. Since this article is from an HT front-end engineer, I hope that by explaining some of the interactions and animations involved in this DEMO, you can get some of the basics of HT in advance and get a simple overview of HT.

The recruitment DEMO developed in this paper mainly involves 2D designer, 3D designer and front-end engineer. 2 d designer is responsible for the design of the UI panels on both sides, a 3 d designer is responsible for the construction of the 3 d model in the scene, the model of the assembly and so on, the front-end engineer is responsible for completing the designer of the 2 d and 3 d parts, and combined with interactive and cool animation, so the ability to design here is not allow to ignore, If there is no good design and only the front end engineers finish this DEMO it is definitely a step down. Therefore, our company mainly recruits 2D designers, 3D designers and front end engineers. If you love design and front end, we sincerely invite you to consider joining our Hightopo family. We do not limit your education background, gender and age, but only your potential and passion.

Once you have an overview of the roles needed to develop the system, you can click on the link below to see the results of the joint efforts of the designers and programmers:

Use HTML5 to build a sincere 23D recruitment draft www.hightopo.com/demo/ht-job…

Recruitment preview

The entrance

Click on the

choose

To view

The delivery

The designer

The designer is the face of our system, he or she determines whether you are interested and motivated to continue browsing, of course, good design also needs a good user experience, both of which are indispensable. 2 d design of this system mainly has two panels on the left of the design, the pop-up window and click the delivery after you see in the map, the design of the cartoon and buttons, the 2 d design part mainly by designers to draw 2 d panel, such as the designer can use the tool to Sketch the mainstream market, now it is a lightweight, easy to use vector design tool, Our 2D is also a vector, which can be zoomed-in and true, but can also be designed using other design tools such as AI.

The graphics logo, gradient button, designer icon, website engineer icon and so on that you can see above can be drawn by editing tool. After drawing, you can modify the filling color, position, size and other information through the adjustment panel exposed by visualization tool.

3D designers can use mainstream 3ds MAX or Maya tools for modeling, which are relatively functional, easy to learn, and efficient. The 3D scene of this recruitment DEMO mainly includes the airplane model, two cartoon characters, a rotating semicircle, and some decorations. You can build the model part by mainstream modeling tools, and then export obJ and MTL files to put them into our 3D scene. Once there, we can add interactions, change colors, and a whole bunch of additional operations to the model. Simpler ones, such as rotating semicircles, can be drawn using our specialized drawing tool.

The programmer

As mentioned above, our company mainly needs front-end programmers to animate the motionless scenes designed by designers, or increase interaction or animation, so that the scenes look more cool. Of course, if we need to connect with the background, we need to obtain data from the background through Ajax or Socket, and then fill it into our front-end page, for example, when we need to make the big screen as shown in the following picture:

We can see that this is a large screen display of uav related parameters, and there are three tables on the right. The data of these three tables must be pushed to the foreground through the background, and then the foreground will refresh the content of the table in real time through the code to display.

Of course, our large screen can also be embedded with third-party charts, such as ECharts, Highcharts and other third-party charts. For example, the following large screen is a DEMO of embedded ECharts charts:

The following explains the implementation of interaction and animation in the recruitment DEMO:

The DEMO entry animation is divided into the plane moving in, the turntable rotates, the envelope barrel moves up, and the Design text fades out. The plane moving in flies from the upper right corner of the screen to the left side of the field of vision. In the scene, the plane is a separate node, and the turntable on the plane, cartoon characters, decorations and so on are also separate nodes. However, they have a common feature that they are all adsorbed on the node of the plane, because after the adsorption, the movement of the plane will also drive the movement of all the nodes adsorbed on it. The code of the adsorbed node in HT is node1.setHost(node2), which means that node1 is adsorbed on node2. Therefore, we only need to constantly set the position of the aircraft in the scene to move the aircraft, as follows is the reference pseudocode:

 // Ht. Math is the Math method class encapsulated in HT. Vector3 represents a three-dimensional vector
const Vector3 = ht.Math.Vector3;
const moveAirplane = (airplane, from, to, finishFunc = () = >= > {{})// startV3 Start position of aircraft movement
     // endV3 end position of aircraft movement
    const startV3 = new Vector3(from),
          endV3 = new Vector3(to);
     // Ht.default. startAnim is the animation schedule encapsulated in HT
    ht.Default.startAnim({
        duration: 2000.easing: (t) = > t,
        finishFunc: finishFunc,
        action: (v, t) = > {
             // the value of v will change from 0 to 1 in 2000ms
             // Calculate the position between startV3 and endV3 in real time and dynamically set it to airplane
            airplane.p3(newVector3().lerpVectors(startV3, endV3, v).toArray()); }}); };Copy the code

For details about the HT.Default.startAnim, see the HT for Web Introduction to learn about the HT mechanism.

Next is the rotation of the turntable. There are several different nodes on the turntable, which are also adsorbed on the turntable. At this time, the turntable rotates and other nodes adsorbed on the turntable also rotate, as shown in the pseudo-code for reference:

 // 1 degree radian value
const DR = Math.PI / 180;
const rotatePanel = (panel, from, to, finishFunc = () = >= > {{})// Start Angle
    const startDegree = from * DR;
     // End Angle
    const endDegree = to * DR;
     / / Angle difference
    const DEEP = endDegree - startDegree;
     // Same as above
    ht.Default.startAnim({
        duration: 2000.easing: (t) = > t,
        finishFunc: finishFunc,
        action: (v, t) = > {
             // Use setRotationY to set the Angle of the panel in real timepanel.setRotationY(startDegree + DEEP * v); }}); };Copy the code

Similarly, there are two elliptical cartoon characters and some decorations on the mailbox, which are also adsorbed on the mailbox. Then, the upward movement of the mailbox will also drive the node adsorbed to move up at the same time, as shown in the pseudo-code below:

const moveLetterbox = (letterbox, from, to, finishFunc = () = >= > {{})const DEEP = to - from;
    ht.Default.startAnim({
        duration: 2000.easing: (t) = > t,
        finishFunc: finishFunc,
        action: (v, t) = > {
             // Set the vertical position of the mailbox in real time through setElevation
            letterbox.setElevation(from+ DEEP * v); }}); };Copy the code

The last part is an animation that changes the transparency of the Design text. For this part, you can refer to the HT for Web Style manual, which contains most of the node styles that HT can set. The shape3d.opacity property is used to set the transparency of the node. If shape3d.opacity is required to take effect, it should also be set to shape3d.transparent to enable opacity on the current node. The following is a reference pseudocode for transparency changes:

const opacityTransform = (node, from, to, finishFunc = () = >= > {{})const DEEP = to - from;
    ht.Default.startAnim({
        duration: 2000.easing: (t) = > t,
        finishFunc: finishFunc,
        action: (v, t) = > {
             // Set the node style attribute through node.s, where key is the attribute name and value is the attribute value
            node.s('shape3d.opacity'.from+ DEEP * v); }}); }Copy the code

When we opened the page, we found that the scene on the right side would have a floating effect similar to breathing. This part of the effect was simulated by regularly modifying the eye position of the 3D scene. The specific concepts of eye, eye and center in 3D can be found in the HT for Web 3D manual. The reference codes for this part are as follows:

const cameraShake = (g3d) = >{
     // Get the current view
    const [x, y, z] = g3d.getEye();
     // Angle float distance
    const moveDistance = 10;
     // Angle float speed
    const speed = 1;
     // Angle float direction
    let direction = - 1;
     // Current Angle float distance
    let currentMoveDistance = 0;
    window.cameraShakeInterval = setInterval(() = >{
         // Increase the current Angle float distance
        moveStep += speed * direction;
         // Set the current view
        g3d.setEye([x, y + currentMoveDistance, z]);
         // If the absolute value of the current Angle float distance is greater than the Angle float distance, change the float direction
        if (Math.abs(currentMoveDistance) >= moveDistance) direction = -direction;
    },
    100);
};
Copy the code

Through the above five simple animation we learn node movement is driven by the code of the related content, does not go up the scheduling, and then to drive the node location, real-time or other property to its movement, so if mastered the basic core concepts of HT after you will make all sorts of cool animations, let you swim in the knowledge system of HT, Of course, what I have talked about before is only part of the basic animation and some basic concepts. If you are very interested in HT, welcome to join us. Click the DEMO link above, select the corresponding city, and then send your resume to the corresponding email, we will reply in time.

We are looking for talented

In 2019, our team made a summary of the results of the output, including the visualization case set and some summaries of the industry. For details, please check and share the 2019 article of hundreds of 2D 3D visualization application cases of HT Industrial Internet. I believe that after you see these excellent case effects will hold a cavity blood to join our company, let us together to promote the development of domestic industrial Internet a thin force.

The following is a mobile terminal running result: