We have seen how tired it is to use native WebGL API development. Because of this, a large number of WebGL frameworks have been developed. With these frameworks, you can quickly create the required 3D scenes. These frameworks encapsulate various elements of 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 need to focus more energy on logic.
At present, no one has the advantage of overwhelming other frameworks. What kind of frame to choose depends on your personal preference. However, when choosing a framework, I personally think it is better to look at the last update time of the framework. Choosing a stable updated framework can 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 relatively comprehensive open source framework, which is well encapsulated with various elements of 3D scenes. You can use it to easily create cameras, models, lighting, materials, and more. You can also choose different renderers. Three.js provides a variety of rendering methods. You can choose to use canvas to render, or 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, etc. And it has relatively basic things built in: (spheres) Spheres, (aircraft) Planes, (cubes) Cubes, (cylinders) Cylinders. Three.js creates these objects very easily.
OK, don't talk nonsense, just look at the code:
<!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 to the previous code using WebGL API, this is simply too simple.
The code is very intuitive, just a few steps:
1. Create scene scene.
2. Create a camera camera.
3. Create/load model geometry.
4. Load the material material.
5. Render the model object mesh (composed of geometry and material).
6. Enable animation.
This is a feature provided by each framework. Using different frameworks is basically the same except that the function names may be different. The following reference lists many framework learning documents, you can choose several ways to learn.
Regarding model data, I would like to say one thing, 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, so many frameworks have begun to support model data in JSON format.
Practical reference:Development Center: https://developer.mozilla.org/en/WebGL
Premium online development tools: http://webglplayground.net/
Basic tutorials for various frameworks: http://www.HTML5/">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
Collecting posts for various frameworks: http://www.appcrews.com/2011/07/129.html