A preliminary study of WebGL-—Three.js panorama in actual combat

some time ago, the company gave me a new demand, that is, to write a 3D panoramic rendering of the interior decoration, so I started my development journey of three.js.

as a front-end white, I suddenly came into contact with three.js &; Webgl is not only stupid but also stupid, but as a technician, it may be the real pleasure in software development. At least, it won't bury itself in debugging repeated page data over and over again, and BABA is simply boring to the extreme. But three.js &; Webgl has to say that it has opened up a new world for me, and then I will briefly talk about my learning journey.

three.js is a 3D engine running in the browser and a third-party webgl library written by JavaScript, which can be used to create various 3D scenes, including cameras, light and shadow, materials and other objects. Three.js is also encapsulated by webgl, encapsulating a large number of webgl API, making the complicated WebGL easier.

Webgl (Full Write Web Graphics Library) is a 3D drawing protocol, which allows developers to further understand the graphic rendering. webgl is an upgraded version of the combination of JavaScript and OpenGL ES 2.. Through WebGL, front-end developers can be separated from css rendering and can understand the lower-level rendering. Webgl can also provide hardware 3D accelerated rendering for HTML5 Canvas. webgl displays 3D scenes and models in the browser more smoothly through the system graphics card, and adds shader to render graphics. Learning WebGL requires corresponding graphics algorithms, which is one of the advanced technologies in graphics rendering development at present. At present, webgl is also used in games and video special effects, including untiy3D, which is also an integrated webgl.

three.js is mainly composed of cameras, scenes, renderers, resource loaders and materials.

Everything in WebGL is displayed based on cameras, which can be used to form an observation perspective for 3d views, such as fisheye perspective, so that we can develop 3D views of real scenes on the plan. Next, let's see how to create a camera with three.js:

The camera is available, but in order to show the scene better, we need a scene to show the scene at this time, and three.js has also packaged it for us, so we can create a scene as shown below:

The renderer is the rendering start switch of webgl, and it can call the render mode to render the scene to the camera.

unlike our common html, three.js loads resources directly through src attribute, but through TextureLoader.load

The common materials include grids, lights and many other elements. Let me give you an example below

/sunql827/webgldemo.git

/sunql-Hugh/webgldemo.git

This development trip of webgl panorama based on three.js has opened a new door for me to render views, but there are still many, many powerful features of webgl.