WebGL3D overview of HTML5 (II)-Introduction to Library Development and framework _ html5 tutorial skills-

Source: Internet
Author: User
We have seen how tired it is to use native WebGLAPI for development, because such a large number of WebGL frameworks have been developed, these frameworks encapsulate various elements for creating 3D scenes to varying degrees. You can quickly create the required 3D scenes. If you are interested, this article may be helpful to you. We have seen how tired it is to use the native WebGL API for development. Because of this, a large number of WebGL frameworks have been developed. With these frameworks, you can quickly create the required 3D scenarios. These frameworks encapsulate various elements for creating 3D scenes, such as scenes, cameras, models, lighting, and materials. These encapsulated objects are used, you can easily create the required 3D scenario, So that you only need to focus more on the logic.

Currently, none of them have the advantages of overwhelming other frameworks. You can select a frame based on your personal preferences. However, when you select a framework, I personally think it is better to look at the last update time of the Framework. Choosing a stable and updated framework will allow you to always use the latest features and make your program more stable.

The following example uses the Three. js framework for development.
Three. js is a comprehensive open-source framework that encapsulates various elements of 3D scenarios. You can use it to easily create cameras, models, lighting, materials, and so on. You can also select different Renderer. Three. js provides multiple rendering methods. You can use canvas for rendering or 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, and 3DMax. It also has built-in basic things: (sphere) Spheres, (airplane) Planes, (cube) Cubes, (Cylinders. Three. js makes it very easy to create these objects.

Okay, no nonsense. Check the Code directly:

The Code is as follows:





ThreeJSDemo




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.