Cuando se usa la biblioteca ThreeJS para mostrar en un navegador, el primer ejemplo suele ser un cubo u otro objeto elemental, y se crea usando las clases especiales predefinidas BoxGeometry o SphereGeometry . Luego, generalmente se considera el uso de modelos confeccionados importados y el trabajo con ellos.
Pero a veces necesita crear un objeto tridimensional para mostrarlo completamente en el navegador desde cero, solo usando geometría analítica. En este artículo se analiza tal enfoque para crear modelos interactivamente personalizables y su posterior visualización en el navegador.
Si en el caso de usar OpenGL y C / C ++ para mostrar objetos fuera del navegador, hay bibliotecas listas para usar de las funciones correspondientes, entonces encontrar una biblioteca adecuada en JavaScript es bastante difícil. Las bibliotecas existentes, como glMatrix , están dirigidas principalmente a transformaciones geométricas: rotación, movimiento, escala de modelos. Para construir objetos tridimensionales desde cero utilizando métodos de geometría analítica, se requieren funciones completamente diferentes que pueden realizar, por ejemplo, las siguientes acciones: encontrar el punto de intersección de líneas en el plano, encontrar los puntos de intersección de dos círculos en el plano, crear un plano a partir de su vector y punto normales, encontrar el punto de intersección tres planos y similares. Para este fin, se ha creado una pequeña biblioteca WebGeometry .
Hace un año y medio, publiqué un breve artículo sobre ella. Puede ser encontrado
en el enlace
Hace unos seis meses, decidí volver a este tema y contar lo más detallado posible con muchos ejemplos sobre la creación de modelos desde cero utilizando WebGeometry . Al principio supuse que manejaría unos tres artículos, pero en el proceso decidí dejar de escribir artículos y crear un sitio web. El resultado fue un sitio web que consta de treinta lecciones (las llamé capítulos):
Three.js y geometría
Todos los modelos tridimensionales que se muestran con ThreeJS se hacen lo más interactivos posible y se incluyen directamente en el texto del sitio. Si lee acerca de cómo se hizo este o aquel modelo, entonces, sin salir del sitio inmediatamente sobre el modelo, puede ver el número del vértice que se menciona en el texto, el nombre de la cara del modelo, los ángulos de inclinación de las caras e incluso las coordenadas de cualquier punto del modelo en cuestión. texto en el sitio.
Los primeros dos capítulos presentados en el sitio discuten algunos aspectos del uso de la biblioteca ThreeJS aplicada a modelos futuros. Se supone que el lector ya está familiarizado con cómo crear programas simples basados en ThreeJS .
Los siguientes dos capítulos describen el trabajo con las funciones bidimensionales de la biblioteca WebGeometry . Se dan muchos ejemplos relevantes. Todos los ejemplos son interactivos y se muestra el resultado de su trabajo utilizando HTML5 Canvas . Puede ser interesante mirar los dibujos interactivos en los capítulos 14, 18, 20, 23 y 28.
Comenzando con el quinto capítulo, puede ver la aplicación de las funciones de la biblioteca WebGeometry para la construcción de modelos tridimensionales complejos. Los poliedros fueron elegidos como modelos, y más precisamente, facetas de piedras preciosas. En mi opinión, no hay otros objetos en los que sea posible mostrar mejor la aplicación de funciones que implementan métodos de geometría analítica. Esta declaración puede hacerse por varias razones.
- Todos estos poliedros se desarrollan absolutamente estrictamente de acuerdo con las leyes matemáticas.
- Estos poliedros no tienen una estructura completamente regular, como los sólidos platónicos (cubo, tetraedro, ...), aunque tienen simetría y son bastante hermosos.
- Dado que estos poliedros no tienen una estructura regular, es necesario utilizar una amplia variedad de cálculos geométricos para determinar las coordenadas de sus vértices, en lugar de limitarnos a una tarea difícil en el programa de coordenadas de los vértices del modelo tomado de varias fuentes.
- No necesita saber ninguna información preliminar sobre el corte. Solo es necesario recordar que la parte superior de dicho poliedro se llama corona, la parte media (faja) y el pabellón inferior. La cara superior se llama plataforma, y el pico más bajo es un caché.
Todos los poliedros (y dibujos) en el sitio se pueden cambiar configurando parámetros del modelo. Solo se debe hacer un punto. Se supone que casi todos los modelos (con algunas excepciones) deben permanecer convexos con cualquier cambio en los valores de los parámetros. Por lo tanto, algunos poliedros cambian su forma en pequeña medida. Para la verificación de convexidad, una función especial es responsable. Si cancela esta verificación, puede obtener formas de objetos completamente inesperadas (es difícil nombrarlas poliedros). Algunas de estas formas pueden ser de interés, quizás, para artistas de pinturas fantásticas (ver capturas de pantalla al final de los capítulos 10 y 13).
La mayoría de las funciones de la biblioteca WebGeometry se realizan mediante transformaciones matriciales. Pero para construir modelos, el conocimiento de las matrices probablemente no sea necesario, ya que las matrices están ocultas dentro de otras funciones utilizadas. Por ejemplo, una función que define el punto de intersección de tres planos.
Haré un comentario, que a primera vista parece completamente redundante y demasiado trivial, pero tal vez sea útil para alguien en el futuro. Se basa en el hecho de que a través de tres puntos que no se encuentran en la misma línea, puede dibujar solo un plano. Supongamos que la cara de un poliedro es un cuadrángulo. La ecuación del plano en el que se encuentra esta cara está determinada por tres puntos. Las coordenadas del cuarto punto de este cuadrángulo no se incluyen en esta ecuación, pero el mismo cuarto punto pertenece a otra cara del poliedro, que también se calcula. A veces es difícil notar que el cuadrángulo del primer (o segundo) plano se rompe debido al hecho de que visualmente parece que este cuarto punto pertenece a dos planos a la vez, pero en realidad no es así. Este error es difícil de notar cuando se considera un modelo ya construido. De repente se arrastra después de un largo tiempo y de forma completamente inesperada. Encontré esto varias veces.
¡Gracias a todos por su atención! Además de ver el sitio, puede ir a
mi repositorio