Shulou(Shulou.com)06/03 Report--

This article shows you the HTML5 WebGL API with the help of class library development and framework introduction is how, the content is concise and easy to understand, absolutely can make your eyes bright, through the detailed introduction of this article, I hope you can get something.

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

At present, no one has the advantage of overriding other frameworks, so it depends on your personal preferences, but when you choose a frame, I think you should look at the last update time of the frame. choosing a stable and updated framework will always allow you to use the latest features and make your program more stable.

The following example uses the Three.js framework for development.

Three.js is a relatively comprehensive open source framework, which well encapsulates various elements of the 3D scene. You can use it to easily create cameras, models, lighting, materials, and so on. You can also choose different renderers, Three.js provides a variety of rendering methods, you can choose to use canvas to render, you can also use WebGL or SVG to render.

In addition, Three.js can load 3D files in many formats, and your model files can come from Blender,Maya,Chinema4D,3DMax and so on. And built-in more basic things: (sphere) Spheres, (aircraft) Planes, (cube) Cubes, (cylinder) Cylinders. It will be very easy for Three.js to create these objects.

All right, cut the crap and look directly at the code:

The code is as follows:

ThreeJSDemo

Body

{

Margin:0px

Background-color:#B0B0B0

Overload:hidden

}

Var camera,scene,renderer

Var mesh

Init ()

Animate ()

Function init () {

Scene = new THREE.Scene ()

Camera = new THREE.PerspectiveCamera (70 century window.innerWidth / window.innerHeight,1,1000)

Camera.position.z = 400

Scene.add (camera)

Geometry = new THREE.CubeGeometry (200200200)

Material = new THREE.MeshBasicMaterial ({color: 0xff0000, wireframe: true})

Mesh = new THREE.Mesh (geometry,material)

Scene.add (mesh)

Renderer = new THREE.WebGLRenderer ()

Renderer.setSize (window.innerWidth,window.innerHeight)

Document.body.appendChild (renderer.domElement)

}

Function animate () {

RequestAnimationFrame (animate)

Mesh.rotation.x + = 0.05

Mesh.rotation.y + = 0.05

Renderer.render (scene, camera)

}

This is the whole code, which is simply too simple compared to the previous code that uses WebGL's API.

The code is intuitive, just a few steps:

1. Create a scene scene.

two。 Create a camera camera.

3. Create / load the model geometry.

4. Load the material material.

5. Render the model object mesh, which is made up of geometry and material.

6. Enable animation.

This is the function provided by each framework, and these steps are basically the same using different frameworks except that the name of the function may be different. A lot of framework learning documents are listed in the reference below, and you can choose a few to learn.

With regard to the model data, I would also like to say that because JSON is short and short, it is more suitable for network transmission. In the future, it may become the most suitable model data format for WebGL, so many frameworks begin to support model data in JSON format.

The above is what WebGL API is like in HTML5 with the help of class library development and framework introduction. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.