Un estudio preliminar sobre WebGL: práctica panorámica de Three.js
Hace algún tiempo, la empresa me dio el nuevo requisito de escribir una representación panorámica en 3D de la decoración de interiores, así que comencé mi viaje de desarrollo de three.js.
Como novato en front-end, todavía me siento confundido cuando de repente entro en contacto con three.js&webgl. Sin embargo, como técnico, los desafíos pueden ser la verdadera diversión en el desarrollo de software. No sumergirme en depurar y repetirlo una y otra vez Los datos de la página, arriba, abajo, izquierda, izquierda, derecha, BABA... es simplemente aburrido hasta el extremo. Sin embargo, three.js&webgl tiene que decir que me ha abierto un mundo nuevo. A continuación, hablaré brevemente sobre mi viaje de aprendizaje.
Three.js es un motor 3D que se ejecuta en el navegador. Es una biblioteca WebGL de terceros escrita en JavaScript que se puede utilizar para crear varias escenas tridimensionales, incluidas cámaras, luces y sombras. materiales, etc. Object, three.js también es una encapsulación de webgl internamente, que encapsula una gran cantidad de API de webgl, lo que facilita el webgl más engorroso.
WebGL (nombre completo Web Graphics Library) 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 front-end pueden hacerlo. Puede aprender sobre renderizado de nivel inferior sin renderizado CSS. WebGL también puede proporcionar renderizado acelerado 3D por hardware para HTML5. Webgl utiliza la tarjeta gráfica del sistema para mostrar escenas y modelos 3D con mayor fluidez en el navegador y agrega sombreador (Shader) para renderizar 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 integra 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 y puede usar la cámara. La perspectiva forma la perspectiva de observar la vista 3D, como la perspectiva de ojo de pez, que nos permite desarrollar una vista 3D de la escena real en la vista en planta. A continuación, echemos un vistazo a cómo usar three.js para crear una cámara:
La cámara está disponible, pero para mostrar mejor el paisaje, necesitamos una escena para mostrar el paisaje. js también lo proporciona. Lo hemos encapsulado y podemos crear una escena como se muestra a continuación:
El renderizador es el interruptor de inicio de renderizado de webgl. Puede llamar al método de renderizado para renderizar la escena en la cámara.
Three.js no carga recursos directamente a través del atributo src como nuestro HTML común. En cambio, carga recursos a través de TextureLoader.load.
Los materiales comunes incluyen rejillas, luces y muchos otros elementos. Daré un ejemplo a continuación
/sunql0827/webgldemo.git
/sunql-hugh/. webgldemo .git
Este viaje de desarrollo panorámico de webgl basado en three.js me ha abierto una nueva puerta para ver el renderizado, pero hay muchas características más poderosas de webgl que aún no he mencionado. Estamos aquí, necesitamos trabajar más duro en el futuro.