Comments: We have seen how tired it is to use the native WebGL API 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, you can understand them. 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:
<! DOCTYPE html>
<Html>
<Head>
<Title> threeJSDemo </title>
<Meta charset = "UTF-8">
<Style>
Body
{
Margin: 0px;
Background-color: # B0B0B0;
Overload: hidden;
}
</Style>
</Head>
<Body>
<Script src = "Three. js"> </script>
<Script>
Var camera, scene, renderer;
Var mesh;
Init ();
Animate ();
Function init (){
Scene = new THREE. Scene ();
Camera = new THREE. PerspectiveCamera (70, window. innerWidth/window. innerHeight, 1,1000 );
Camera. position. z= 400;
Scene. add (camera );
Geometry = new THREE. CubeGeometry (200,200,200 );
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 );
}
</Script>
</Body>
</Html>
This is all the code. Compared with the code using the WebGL API, this is simply too simple.
The code is intuitive, just a few steps:
1. Create a scenario scene.
2. Create a camera.
3. Create/load the geometry model.
4. Load the material.
5. Rendering model object mesh (composed of geometry and material ).
6. Enable animation.
This is the function provided by each framework. Except for the function names, different frameworks are basically the same. The following reference lists many framework learning documents.
For model data, I also want to mention that, because JSON is short and concise, it is more suitable for network transmission. In the future, it may become the most suitable model data format for WebGL. Therefore, many frameworks begin to support model data in JSON format.
Practical reference:
Development Center: https://developer.mozilla.org/en/WebGL
Excellent online development tools: http://webglplayground.net/
Various framework basics: http://www.html5china.com/HTML5features/WebGL/
WebGL Chinese Tutorial: http://www.hiwebgl.com /? P = 42
Oak3D Chinese Tutorial: http://www.hiwebgl.com /? Cat = 57
CubicVR3D Official Website: http://www.cubicvr.org/
Three. js Graphics Library: https://github.com/mrdoob/three.js
Collection stickers for various frameworks: http://www.appcrews.com/2011/07/129.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
