Acerca de WebGL: batalla panorámica de Three.js
Como novato en front-end, entrar repentinamente en contacto con tres.js y Webgl no solo es estúpido sino también estúpido, pero como técnico, esto puede ser la verdadera diversión en el desarrollo de software. Al menos, no se verá inmerso en la depuración de datos de páginas duplicadas una y otra vez. Baba simplemente se aburre hasta el extremo. Pero tres.js y Webgl tienen que decir que me ha abierto un mundo nuevo. A continuación, hablaré brevemente sobre mi proceso de aprendizaje.
Three.js es un motor 3D que se ejecuta en el navegador y una biblioteca webgl de terceros escrita en JavaScript. Se puede utilizar para crear una variedad de escenas 3D, incluidas cámaras, luces y sombras, materiales y otros objetos. Three.js también está encapsulado por webgl, encapsulando una gran cantidad de API de webgl, lo que simplifica el webgl complejo.
Web GL (Biblioteca de gráficos web de escritura completa) es un protocolo de dibujo 3D que permite a los desarrolladores comprender mejor la representación de gráficos. webgl es una versión mejorada de JavaScript y OpenGL ES 2.0. A través de WebGL, los desarrolladores de aplicaciones para el usuario pueden romper con la representación CSS y comprender la representación subyacente. Webgl también puede proporcionar renderizado acelerado 3D por hardware para HTML5 Canvas. webgl muestra escenas y modelos 3D con mayor fluidez en el navegador a través de la tarjeta gráfica del sistema y agrega sombreadores para representar gráficos. Aprender WebGL requiere los algoritmos gráficos correspondientes, que es una de las tecnologías avanzadas en el desarrollo actual de representación de gráficos. Actualmente webgl también se utiliza en juegos y efectos especiales de vídeo, incluido untiy3D, que también está integrado en webgl.
Three.js se compone principalmente de cámaras, escenas, renderizadores, cargadores de recursos y materiales.
Todo en webgl se muestra en función de la cámara. Podemos usar la perspectiva de la cámara para formar la perspectiva de observación de la vista 3D, como la perspectiva de ojo de pez, para que podamos desarrollar una vista 3D de lo real. escena en la vista en planta. A continuación, veamos cómo crear una cámara con three.js:
Hay una cámara, pero para mostrar mejor la escena, necesitamos una escena para mostrar la escena en este momento, three.js También nos lo han preparado. Como se muestra en la figura siguiente, podemos crear una escena:
El renderizador es el interruptor de inicio de renderizado de webgl. Puede llamar al modo de renderizado para renderizar la escena a la cámara.
A diferencia de nuestro html común, three.js carga recursos directamente a través del atributo src, pero a través de TextureLoader.load.
Los materiales suelen contener muchos elementos, como rejas y luces. Déjame darte un ejemplo.
/sunql0827/webgldemo.git
/sunql-hugh/webgldemo.git
El viaje de desarrollo de webgl panorama basado en three.js se abrió para mí. Abre la puerta a una nueva vista de renderizado, pero todavía hay muchos aspectos poderosos de webgl que no he tocado y tendré que trabajar más duro en el futuro.