js to achieve 3D effect

  The project needs to monitor the airport hardware facilities. The boss of the project gave me a task to monitor this hardware. I thought of the 3D computer room I had contacted before, so I went further and further towards the 3D road of no return, and finally made it. This
  page has four elements, camera, stage, cube, glass.
  Camera is the angle of view in my understanding, and my page is the outermost element.
  Then there is the stage, which is equivalent to the floor of the airport, and you need to set the transform- style: preserve-3d, the 3D effect can be displayed.
  Then the cube is a cube, I define it as a js class, and the six faces form a cube, so that we can 'build wheels', from the airport gate to the luggage behind The extraction is all done with cube. The
  glass is implemented using CSS style, which is equivalent to the glass door and glass baffle of the airport gate. The
 





  cube is directly created in js.















  I wrote a function createCube(), in the onload event Execute;
 










here, the 3D monitoring renderings come out;



  then the translation and rotation of the 3D image, the zoom is not done, the left button controls the rotation, that is, rotates around the y-axis. The right button controls the translation.




 





  This is the translation and rotation renderings:






Currently That's all, the follow-up needs to continue to improve. For the time being, let's share these with you.