Overview of WebGL 3D in HTML5 (Part 2)—Introduction to class library development and framework_html5 tutorial skills

We saw earlier how tiring it is to develop using the native WebGL API. Because of this, a large number of WebGL frameworks have been developed. Using these frameworks, you can quickly create the 3D scenes you need. These frameworks encapsulate various elements for creating 3D scenes to varying degrees, such as scenes, cameras, models, lighting, materials, etc.; using these encapsulated objects, you can easily create the required 3D scenes, so that you only Just need to focus more on logic.

Currently, there is no advantage that can overwhelm other frameworks. What kind of framework to choose depends on personal preference. However, when choosing a framework, I personally think it is better to look at the last update time of the framework and choose A stable and updated framework allows you to always use the latest features, making your program more stable.

The following example is developed using the Three.js framework.
Three.js is a relatively comprehensive open source framework that well encapsulates various elements of 3D scenes. You can use it to easily create cameras, models, lights, materials, and more. You can also choose different renderers. Three.js provides a variety of rendering methods. You can choose to use canvas for rendering, or you can use WebGL or SVG for rendering.

In addition, Three.js can load 3D files in many formats. Your model files can come from Blender, Maya, Chinema4D, 3DMax, etc. And it has built-in relatively basic things: (spheres) Spheres, (planes) Planes, (cubes) Cubes, (cylinders) Cylinders. Three.js makes it very easy to create these objects.

Okay, no more nonsense, just look at the code:

Copy the code

The code is as follows: