Comentario: Hemos visto lo cansado que es usar la API de WebGL nativa para desarrollar, porque se ha desarrollado una gran cantidad de marcos de WebGL. Estos marcos encapsulan varios elementos de la creación de escenas 3D en diversos grados. Puede crear rápidamente las escenas 3D requeridas. Los amigos interesados pueden aprender al respecto. Quizás este artículo te sea útil.
Hemos visto lo cansado que es usar el desarrollo nativo de API de WebGL. Debido a esto, se ha desarrollado una gran cantidad de marcos de WebGL. Con estos marcos, puede crear rápidamente las escenas 3D requeridas. Estos marcos encapsulan varios elementos de la creación de escenas 3D en diversos grados, como escenas, cámaras, modelos, iluminación, materiales, etc.; Usando estos objetos encapsulados, puede crear fácilmente las escenas 3D requeridas, para que solo necesite enfocar más energía en la lógica.
En la actualidad, nadie tiene la ventaja de abrumadores otros marcos. Qué tipo de marco elegir depende de su preferencia personal. Sin embargo, al elegir un marco, personalmente creo que es mejor ver la última hora de actualización del marco. Elegir un marco actualizado estable siempre puede usar las últimas funciones y hacer que su programa sea más estable.
El siguiente ejemplo utiliza el marco tres.js para el desarrollo.
Three.js es un marco de código abierto relativamente completo, que está bien encapsulado con varios elementos de escenas 3D. Puede usarlo para crear fácilmente cámaras, modelos, iluminación, materiales y más. También puede elegir diferentes renderistas. Three.js proporciona una variedad de métodos de representación. Puede optar por usar el lienzo para renderizar o usar WebGL o SVG para renderizar.
Además, tres.js pueden cargar archivos 3D en muchos formatos, y sus archivos de modelo pueden provenir de Blender, Maya, Chinema4D, 3DMax, etc. y tiene cosas relativamente básicas integradas: (esferas) esferas, (aeronaves), (cubos) cubos, (cilindros) cilindros. Tres.js crea estos objetos muy fácilmente.
Ok, no hables tonterías, solo mira el código:
<! Doctype html>
<html>
<Evista>
<title> tresjsdemo </title>
<meta charset = "utf-8">
<estilo>
Cuerpo
{
margen: 0px;
Color de fondo:#B0B0B0;
sobrecarga: oculto;
}
</style>
</ablo>
<Body>
<script src = "tres.js"> </script>
<script>
Var cámara, escena, renderista;
Var malla;
init ();
animar();
función init () {
escena = nuevo tres.scene ();
cámara = nuevo tres.perspectivecamera (70, window.innerwidth /window.innerheight,1,1000);
Camera.Position.z = 400;
escena.add (cámara);
geometría = nuevo tres.CubeGeometry (200,200,200);
material = nuevo tres.MeshBasicMaterial ({color: 0xff0000, wireframe: true});
malla = nueva tres.mesh (geometría, material);
escena.add (malla);
renderer = new Three.webglrenderer ();
renderer.setsize (Window.innerWidth, Window.innerheight);
document.body.appendChild (renderer.omelement);
}
función animate () {
requestAnimationFrame (animate);
mesh.rotation.x += 0.05;
mesh.rotation.y += 0.05;
renderer.render (escena, cámara);
}
</script>
</body>
</html>
Este es todo el código, en comparación con el código anterior que usa la API WebGL, esto es simplemente demasiado simple.
El código es muy intuitivo, solo unos pocos pasos:
1. Crea la escena de la escena.
2. Crea una cámara de cámara.
3. Crear/cargar geometría del modelo.
4. Cargue el material material.
5. Renderiza la malla de objeto modelo (compuesta de geometría y material).
6. Habilitar animación.
Esta es una característica proporcionada por cada marco. El uso de diferentes marcos es básicamente el mismo, excepto que los nombres de funciones pueden ser diferentes. La siguiente referencia enumera muchos documentos de aprendizaje marco, puede elegir varias formas de aprender.
Con respecto a los datos del modelo, me gustaría decir una cosa, porque JSON es corto y conciso, es más adecuado para la transmisión de red. En el futuro, puede convertirse en el formato de datos de modelo más adecuado para WebGL, por lo que muchos marcos han comenzado a admitir datos del modelo en formato JSON.
Referencia práctica:
Centro de desarrollo: https://developer.mozilla.org/en/webgl
Herramientas de desarrollo en línea premium:
Tutoriales básicos para varios marcos:
Tutorial chino de WebGL:? P = 42
OAK3D Tutorial chino :? Cat = 57
Sitio web oficial CubicVR3D:
Biblioteca de gráficos de tres.js: https://github.com/mrdoob/three.js
Publicaciones de colección para varios marcos: