Vimos como é cansado usar o desenvolvimento de API da WebGL nativo. Por esse motivo, um grande número de estruturas WebGL foi desenvolvido. Com essas estruturas, você pode criar rapidamente as cenas 3D necessárias. Essas estruturas encapsulam vários elementos da criação de cenas 3D em graus variados, como cenas, câmeras, modelos, iluminação, materiais, etc.; Usando esses objetos encapsulados, você pode criar facilmente as cenas 3D necessárias, para que você só precise concentrar mais energia na lógica.
Atualmente, ninguém tem a vantagem de esmagar outras estruturas. Que tipo de quadro escolher depende da sua preferência pessoal. No entanto, ao escolher uma estrutura, acho que é melhor olhar para o último horário de atualização da estrutura. A escolha de uma estrutura atualizada estável pode sempre usar os recursos mais recentes e tornar seu programa mais estável.
O exemplo a seguir usa a estrutura três.js para o desenvolvimento.
O Three.js é uma estrutura de código aberto relativamente abrangente, que é bem encapsulado com vários elementos das cenas 3D. Você pode usá -lo para criar facilmente câmeras, modelos, iluminação, materiais e muito mais. Você também pode escolher renderizadores diferentes. Três.js fornece uma variedade de métodos de renderização. Você pode optar por usar a tela para renderizar ou usar o WebGL ou o SVG para renderizar.
Além disso, três.js podem carregar arquivos 3D em muitos formatos, e seus arquivos de modelo podem vir do Blender, Maya, Chinema4D, 3Dmax, etc. e possui coisas relativamente básicas embutidas: (esferas) esferas (aeronaves), cubos (cilindros) cilindros. Três.js cria esses objetos com muita facilidade.
Ok, não fale bobagens, basta olhar para o código:
<! Doctype html>
<html>
<head>
<title> trêsjsdemo </title>
<meta charset = "utf-8">
<estilo>
Corpo
{
margem: 0px;
Background-Color:#B0B0B0;
Sobrecarga: Hidden;
}
</style>
</head>
<Body>
<script src = "Three.js"> </sCript>
<Cript>
câmera var, cena, renderizador;
var mesh;
init ();
animar();
function init () {
cena = new Three.Scene ();
câmera = new Three.perspectiveCamera (70, window.innerwidth /window.innerHeight.1,1000);
câmera.Position.Z = 400;
cena.add (câmera);
geometria = new Three.cubegeometry (200.200.200);
Material = novo Three.MeshBasicMaterial ({color: 0xff0000, Wireframe: true});
malha = new Three.mesh (geometria, material);
cena.add (malha);
renderizador = new Three.Webglrenderer ();
renderer.SetSize (window.innerwidth, window.innerHeight);
document.body.appendChild (renderer.domelement);
}
function Animate () {
requestanimationframe (animado);
mesh.rotation.x += 0,05;
Mesh.rotation.y += 0,05;
renderizador.render (cena, câmera);
}
</script>
</body>
</html>
Este é todo o código, em comparação com o código anterior usando a API WebGL, isso é simplesmente muito simples.
O código é muito intuitivo, apenas algumas etapas:
1. Crie a cena da cena.
2. Crie uma câmera de câmera.
3. Criar/Carregar Geometria do Modelo.
4. Carregue o material.
5. Renderize a malha do objeto modelo (composta de geometria e material).
6. Ativar animação.
Este é um recurso fornecido por cada estrutura. O uso de estruturas diferentes é basicamente o mesmo, exceto que os nomes de funções podem ser diferentes. A referência a seguir lista muitos documentos de aprendizado da estrutura, você pode escolher várias maneiras de aprender.
Em relação aos dados do modelo, gostaria de dizer uma coisa, porque o JSON é curto e conciso, é mais adequado para a transmissão de rede. No futuro, pode se tornar o formato de dados de modelo mais adequado para WebGL, muitas estruturas começaram a suportar dados de modelos no formato JSON.
Referência prática:Centro de Desenvolvimento: https://developer.mozilla.org/en/webgl
Ferramentas de desenvolvimento on -line premium: http://webglplayground.net/
Tutoriais básicos para várias estruturas: http: //www.html5/ "> html5china.com/html5features/webgl/
Webgl Chinês Tutorial: http://www.hiwebgl.com/?p=42
Oak3d Tutorial chinês: http://www.hiwebgl.com/?cat=57
Site oficial do Cubicvr3d: http://www.cubicvr.org/
Biblioteca de gráficos Three.js: https://github.com/mrdoob/three.js
Coletando postagens para várias estruturas: http://www.appcrews.com/2011/07/129.html