Ao usar a biblioteca ThreeJS para exibição em um navegador, o primeiro exemplo geralmente é um cubo ou algum outro objeto elementar e é criado usando as classes especiais predefinidas BoxGeometry ou SphereGeometry . Então, o uso de modelos prontos importados e o trabalho com eles são geralmente considerados.
Mas, às vezes, você precisa criar um objeto tridimensional para exibir no navegador completamente do zero - usando apenas geometria analítica. Este artigo discute exatamente essa abordagem para criar modelos interativamente personalizáveis e sua exibição subsequente no navegador.
Se, no caso de usar o OpenGL e C / C ++ para exibir objetos fora do navegador, houver bibliotecas prontas das funções correspondentes, é muito difícil encontrar uma biblioteca adequada no JavaScript . As bibliotecas existentes, como o glMatrix , visam principalmente transformações geométricas - rotação, movimento, redimensionamento de modelos. Para construir objetos tridimensionais do zero usando métodos de geometria analítica, são necessárias funções completamente diferentes que podem executar, por exemplo, as seguintes ações - encontre o ponto de interseção das linhas no plano, encontre os pontos de interseção de dois círculos no plano, crie um plano a partir do seu vetor e ponto normais, encontre o ponto de interseção três aviões e afins. Para esse fim, uma pequena biblioteca WebGeometry foi criada.
Há um ano e meio, publiquei um pequeno artigo sobre ela. Pode ser encontrado
no link
Há cerca de seis meses, decidi voltar a este tópico e contar o mais detalhadamente possível com muitos exemplos sobre a criação de modelos a partir do zero usando o WebGeometry . No começo, presumi que gerenciaria cerca de três artigos, mas, no processo, decidi parar de escrever artigos e criar um site. O resultado foi um site composto por trinta lições (eu os chamei de capítulos):
Three.js e geometria
Todos os modelos tridimensionais exibidos usando o ThreeJS são feitos da maneira mais interativa possível e incluídos diretamente no texto do site. Se você estiver lendo sobre como este ou aquele modelo foi criado, poderá ver o número do vértice mencionado no texto, o nome da face do modelo, os ângulos de inclinação das faces e até as coordenadas de qualquer ponto do modelo em questão sem sair do local imediatamente no modelo. texto no site.
Os dois primeiros capítulos apresentados no site discutem alguns aspectos do uso da biblioteca ThreeJS aplicada a modelos futuros. Supõe-se que o leitor já esteja familiarizado com a criação de programas simples baseados em ThreeJS .
Os próximos dois capítulos descrevem o trabalho com as funções bidimensionais da biblioteca WebGeometry . Muitos exemplos relevantes são dados. Todos os exemplos são interativos e a exibição do resultado do trabalho é mostrada usando o HTML5 Canvas . Pode ser interessante observar os desenhos interativos nos capítulos 14, 18, 20, 23 e 28.
A partir do quinto capítulo, você pode ver a aplicação das funções da biblioteca WebGeometry na construção de modelos tridimensionais complexos. Os poliedros foram escolhidos como modelos e, mais precisamente, facetas de pedras preciosas. Na minha opinião, não há outros objetos sobre os quais é possível mostrar melhor a aplicação de funções que implementam métodos de geometria analítica. Esta afirmação pode ser feita por vários motivos.
- Todos esses poliedros são desenvolvidos absolutamente estritamente de acordo com as leis matemáticas.
- Esses poliedros não possuem uma estrutura completamente regular, como sólidos platônicos (cubo, tetraedro, ...), embora tenham simetria e sejam bastante bonitos.
- Como esses poliedros não possuem uma estrutura regular, é necessário usar uma ampla variedade de cálculos geométricos para determinar as coordenadas de seus vértices, em vez de nos limitarmos a uma tarefa difícil no programa de coordenadas dos vértices do modelo, retirado de várias fontes.
- Você não precisa conhecer nenhuma informação preliminar sobre o corte. Só é necessário lembrar que a parte superior de um poliedro é chamada de coroa, a parte do meio - cintura e o pavilhão inferior. A face superior é chamada de plataforma, e o pico mais baixo é um calete.
Todos os poliedros (e desenhos) no site podem ser alterados definindo os parâmetros do modelo. Apenas um ponto deve ser feito. Supõe-se que quase todos os modelos (com algumas exceções) devem permanecer convexos com qualquer alteração nos valores dos parâmetros. Portanto, alguns poliedros alteram sua forma em pequena extensão. Para verificação de convexidade, uma função especial é responsável. Se você cancelar esta verificação, poderá obter formas completamente inesperadas de objetos (é difícil nomeá-los poliedros). Algumas dessas formas podem ser de interesse, talvez, para artistas de pinturas de ficção científica (veja as imagens no final dos capítulos 10 e 13).
A maioria das funções da biblioteca WebGeometry é feita usando transformações de matriz. Mas, para construir modelos, o conhecimento de matrizes provavelmente não é necessário, pois as matrizes estão ocultas dentro de outras funções usadas. Por exemplo, uma função que define o ponto de interseção de três planos.
Farei uma observação, que à primeira vista parece completamente redundante e trivial demais, mas talvez seja útil para alguém no futuro. Está no fato de que através de três pontos que não estão na mesma linha, você pode desenhar apenas um plano. Suponha que a face de um poliedro seja um quadrilátero. A equação do plano em que esta face se encontra é determinada por três pontos. As coordenadas do quarto ponto deste quadrilátero não estão incluídas nesta equação, mas o mesmo quarto ponto pertence a outra face do poliedro, que também é calculada. Às vezes, é difícil notar que o quadrilátero do primeiro (ou segundo) plano está quebrado devido ao fato de que, visualmente, parece que esse quarto ponto pertence a dois planos ao mesmo tempo, mas, na verdade, não é assim. Este erro é difícil de perceber quando se considera um modelo já construído. De repente, ela se arrasta depois de um longo tempo e completamente inesperada. Me deparei com isso várias vezes.
Obrigado a todos pela atenção! Além de visualizar o site, você pode ir para
meu repositório .