introdução
Este artigo explica principalmente os conceitos relevantes de três.js e ajuda os leitores a desenvolver um entendimento relativamente completo de três.js e conhecimento relacionado.
A Web se desenvolveu rapidamente nos últimos anos. Com a popularidade do HTML5, os recursos de desempenho das páginas da web estão se tornando cada vez mais poderosos. Já existem muitas animações complexas e efeitos requintados na página da web.
Mas as pessoas são sempre gananciosas. Então, o que mais pode ser feito acima disso? Um deles é desenhar gráficos 3D de alto desempenho nas páginas da Web através do WebGL.
Opengl, webgl para três.js
Muitas pessoas provavelmente ouviram falar do OpenGL , que é a biblioteca gráfica de plataforma cruzada mais usada.
O WebGL é um padrão gráfico orientado para a Web projetado pelo OpenGL, fornecendo uma série de APIs JavaScript através da qual a renderização gráfica será aproveitada para obter um desempenho mais alto.
O Three.js é uma biblioteca gráfica fácil de usar, formada, encapsulando e simplificando a interface WebGL.
Para simplificar: o WebGL pode ser considerado como uma interface fornecida pelo navegador. No JavaScript, essas APIs podem ser usadas diretamente para desenhar gráficos 3D; e três.js nos ajudam a encapsular essas interfaces para serem mais úteis.
Comparação de webgl e três.js
Como temos WebGL, por que ainda precisamos de três.js?
Isso ocorre porque o limite para o WebGL é relativamente alto e requer conhecimento relativamente mais matemático. Embora o WebGL forneça uma API front-end, o desenvolvimento WebGL e o front-end são essencialmente duas direções diferentes, e há pouca sobreposição de conhecimento. A relevância é que eles estão todos na plataforma da web e todos usam JavaScript. Um programador front-end pode estar familiarizado com a geometria analítica, mas deve haver muito poucos que ainda estão familiarizados com a álgebra linear (por exemplo, tente encontrar uma matriz de transposição inversa?), Sem mencionar que o significado físico das operações da matriz é enfatizado no uso, que também está relativamente ausente no ensino.
Portanto, é bastante difícil para os engenheiros de front-end começarem com o WebGL em pouco tempo.
Portanto, o Three.js possui um encapsulamento muito bom da interface fornecida pelo WebGL, simplificando muitos detalhes e reduzindo bastante os custos de aprendizagem. E há pouca perda de flexibilidade no WebGL.
Portanto, vale a pena recomendar o três.js, o que permite enfrentar a maioria dos cenários de demanda após um estudo mais curto.
Problemas de aprendizagem de três.js
Começar com o Three.js é relativamente simples, mas quando realmente aprendemos, encontraremos um problema embaraçoso: há muito pouco materiais de aprendizagem relacionados.
Geralmente, essa biblioteca popular possui documentos muito completos e, muitas vezes, a melhor maneira de aprender com documentos oficiais ou tutoriais introdutórios oficiais. Mas três não são, sua documentação é muito concisa para iniciantes.
No entanto, o funcionário fornece uma variedade muito rica de exemplos, e quase todos os usos necessários são refletidos em um certo exemplo. Mas esses exemplos não são adequados para começar, mas são adequados para aprender mais após o início.
Aqui estão alguns tutoriais relativamente bons:
Guia de três.js para iniciar
Este é um bom tutorial introdutório leve para três.js. O autor tem um estilo de escrita muito bom e o conhecimento básico é explicado de forma concisa e facilmente compreensível.
Guia de Desenvolvimento de três.js (primeiro versão chinesa)
Aprendendo três.js- Segunda edição
Aprendendo três.js: A biblioteca JavaScript 3D para WebGL é o poucos e melhores livros introdutórios de três.js, que explica as várias funções de três.js de uma maneira mais abrangente .
Se você tiver a habilidade, é recomendável ler a segunda edição da versão em inglês, publicada em 2015, que é muito pequena diferente dos três.js atuais.
A versão chinesa é traduzida da primeira edição do livro original publicado em 2012. A maioria dos conceitos é aplicável, mas muitos detalhes mudaram.
Tutorial de três.js
Esta é uma tradução de um tutorial estrangeiro, com um total de seis artigos . Não explico muito, mas é mais sobre como usar cada função básica. É mais adequado para estudantes com alguma base gráfica.
Obviamente, esses materiais definitivamente não são suficientes durante o processo de aprendizado real. Ao encontrar problemas, você ainda precisa verificar os materiais. No entanto, gostaria de lembrá -lo de que o Three.js é atualizado com bastante frequência, agora é a versão R80. Desde que o R1 foi lançado em abril de 2010, esta é a 72ª versão (alguns números de versão no meio foram ignorados). Portanto, algumas das informações encontradas na Internet podem não ser adequadas para a versão atual ; portanto, você precisa prestar atenção à identificação (as informações recomendadas anteriormente também têm mais ou menos problemas).
Alguns conceitos em três.js
Para exibir gráficos 3D na tela, a idéia geralmente é assim:
Construindo um espaço tridimensional
Em três, é chamado de cena (cena) selecionar um ponto de observação e determinar a direção/ângulo de observação, etc.
Três chama a câmera (câmera) para adicionar objetos para observação à cena
Existem muitos tipos de objetos em três, incluindo malha, linha, pontos, etc. Todos eles herdam da classe Object3D torna a cena observada para uma área especificada na tela.
Use renderizador em três para fazer isso
Vamos dar uma olhada nesses conceitos em três detalhes.
Cena
A cena é um recipiente de todos os objetos e também corresponde ao mundo tridimensional que criamos.
Sistema de coordenadas da câmera
A câmera é um observador no mundo tridimensional. Para observar este mundo, devemos primeiro descrever a posição no espaço.
O sistema de coordenadas à direita comum é usado em três.
Projeção tridimensional
Existem dois tipos de câmeras em três, a saber, a câmera de projeção ortográfica três. Câmera e a câmera de projeção de perspectiva três.
A diferença entre projeção ortogonal e projeção de perspectiva é mostrada na figura acima. A imagem esquerda é uma projeção ortogonal. A luz emitida pelo objeto é projetada paralela à tela, e os quadrados distantes e próximos são do mesmo tamanho; A imagem certa é uma projeção de perspectiva, que é grande na próxima e pequena no distante e pequeno, que está de acordo com a nossa sensação usual de olhar as coisas.
Wikipedia: projeção 3D
Câmera de projeção ortogonal
Nota: O "ponto de vista" na figura corresponde à câmera em três.
Aqui adicionamos um conceito de corpo visual: o corpo visual é um corpo geométrico, apenas objetos no corpo visual serão vistos por nós, e objetos fora do corpo visual serão cortados. Isso é para remover operações desnecessárias.
O corpo de vista da câmera de projeção ortográfica é um cubóide. O construtor de OrthographicCamera é o seguinte: Orthographiccamera (esquerda, direita, superior, inferior, perto, longe)
A própria câmera pode ser considerada um ponto, enquanto a esquerda indica a distância entre o plano esquerdo e a câmera na direção esquerda e direita. O mesmo se aplica aos outros parâmetros. Portanto, os seis parâmetros definem as posições das seis faces do corpo de visualização, respectivamente.
Pode -se supor aproximadamente que os objetos no corpo de visualização sejam projetados paralelos ao plano próximo e, em seguida, as imagens no plano próximo são renderizadas na tela.
Câmera de projeção em perspectiva
O corpo de visualização da câmera de projeção em perspectiva é uma plataforma de quatro arestas, e seu construtor é o seguinte: PerspectiveCamera (fov, aspecto, próximo, longe)
O FOV corresponde à perspectiva da figura, que é o ângulo entre os lados superior e inferior. O aspecto é a proporção do plano próximo. Adicionando a distância próxima do plano próxima e distante distância do plano, a única maneira de determinar a cena visual.
As câmeras de projeção em perspectiva são muito consistentes com a nossa sensação usual de assistir às coisas; portanto, na maioria dos casos, usamos câmeras de projeção em perspectiva para mostrar efeitos 3D.
Objetos
Com uma câmera, você tem que olhar para alguma coisa, certo? Adicione alguns objetos à cena.
Existem muitos objetos para exibição em três, todos herdados da classe Object3D. Aqui, olhamos principalmente para malha e pontos.
Malha
Todos sabemos que no mundo dos computadores, um arco é conectado por um segmento de linha finita composta por pontos finitos. Quando há muitas linhas, parece um arco suave.
O modelo tridimensional em computadores é semelhante. A prática comum é descrevê -lo usando uma grade de triângulos. Chamamos esse modelo de modelo de malha.
Este é o famoso coelho de Stanford. Sua posição nos gráficos 3D é semelhante à de Lena, um campo conhecido do processamento de imagens digitais.
Veja esse coelho, à medida que o número de triângulos aumenta, sua superfície se torna mais suave/precisa.
Em três, o construtor da malha é o seguinte: malha (geometria, material)
A geometria é sua forma, o material é o seu material.
Não apenas a malha, essas duas propriedades são usadas para criar muitos objetos. Vamos dar uma olhada nesses dois atributos importantes.
Geometria
A geometria, a forma, é bastante intuitiva. A geometria usa o modelo para armazenar o conjunto de pontos e a relação entre os pontos (que os pontos formam um triângulo) para alcançar o objetivo de descrever a forma de um objeto.
Três fornecem muitas formas básicas, como cubos (na verdade cubóides), planos (na verdade retângulos), esferas, círculos, cilindros e mesas redondas;
Você também pode construir formas definindo a posição de cada ponto;
Para formas mais complexas, também podemos importá -las através de arquivos de modelo externos.
Material
Material, material, isso não é tão intuitivo quanto a forma.
O material é na verdade uma coleção de todos os atributos visuais, exceto a forma da superfície do objeto, como cor, textura, suavidade, transparência, refletividade, índice de refração e luminosidade.
Aqui falaremos sobre a relação entre material, mapa e textura.
O material foi mencionado acima e inclui mapas e outros.
Os adesivos são na verdade 'pasta' e 'pasta', que inclui as fotos e onde as fotos devem ser postadas.
Quanto à textura, na verdade é uma 'imagem'.
A Three oferece uma variedade de materiais para escolher e pode escolher livremente a reflexão difusa/especular e outros materiais.
Pontos
Depois de falar sobre malha, vamos dar uma olhada em outro objeto - pontos.
Os pontos são na verdade uma coleção de vários pontos. Foi chamado de partícula por muito tempo antes. Foi renomeado Pointcloud na versão R68 e foi renomeado pontos na versão R72. A mudança de nome é principalmente porque o Sr.doob acredita que os sistemas de partículas devem ser um sistema completo que inclua o processamento de partículas e propriedades físicas relacionadas, enquanto os pontos em três são muito mais simples. Então, eventualmente, esta classe é nomeada pontos.
O efeito típico que os pontos podem ser usados para alcançar é o seguinte: exemplo oficial
Luz
Deus disse: deve haver luz!
O efeito de luz e sombra é um fator importante que enriquece a imagem.
Three fornece uma variedade de fontes de luz, incluindo luz de ambiente de luz ambiente, luz de ponto da fonte de luz, holofote de destaque, luz direcional da luz da luz, luz do hemisfério hemisfério e outras luzes.
Basta adicionar a fonte de luz necessária à cena.
Renderizador
Vários objetos são construídos na cena, luz e câmeras que observam objetos, é hora de renderizar o que você vê na tela. É isso que a renderização faz.
O renderizador liga um objeto de tela e pode definir propriedades como tamanho, cor padrão, etc.
Chame a função renderizada do renderizador, passe na cena e na câmera e você pode renderizar a imagem em tela.
Faça a imagem mover
Agora, uma imagem estática pode ser obtida, como pode se mover?
Uma idéia muito simples é mudar a posição, o ângulo e várias propriedades do objeto na cena e depois chamar a função de renderização para renderizar.
Então, como você determina o momento da renderização?
O HTML5 nos fornece requestanimframe, o que chama automaticamente a função aprovada antes de cada página repetir.
Se renderizarmos isso no começo:
função render () {renderer.render (cena, câmera);}Apenas mude para isso:
função render () {requestanimationframe (render); object.Position.x += 1; renderizador.render (cena, câmera);}O objeto pode se mover!
Dê uma castanha
Vamos usar um exemplo simples para resolver esse processo.
Primeiro, escreva uma página com elementos de tela.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> cubo </title> <script src = "http://sqimg.qq.com/Three.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min. html, corpo {margem: 0; preenchimento: 0; } #three_canvas {posição: absoluto; largura: 100%; Altura: 100%; } </style> </head> <body> <canvas id = "three_canvas"> </canvas> </body> </html>Vamos fazer a parte JavaScript abaixo
Primeiro inicialize Renderer
function initrendeRer () {width = document.getElementById ('three_canvas'). clientwidth; altura = document.getElementbyId ('three_canvas'). clientHeight; renderizador = new Three.WebglRenderer ({// Ligue a tela ao renderizador: document.getElementById ('three_canvas')}); renderizador.SetSize (largura, altura); // Defina o tamanho da renderização para o mesmo que o Canvas Renderer.setClearColor (0xffffff, 1.0); // Defina a cor e a transparência padrão}Cenário de inicialização:
função initscene () {cenário = new Three.scene ();}Inicialize a câmera:
function initcamera () {// câmera de projeção ortogonal simples, voltada para o centro da viewport, o tamanho da viewport é o mesmo que o tamanho da tela. câmera = new Three.tográficoCamera (largura / -2, largura / 2, altura / 2, altura / -2, 1, 1000); // Defina a câmera da câmera Camera.Position.x = 0; câmera.Position.Y = 0; câmera.Position.Z = 200; // defina a câmera de direção ascendente da câmera.Up.x = 0; câmera.up.y = 1; câmera.up.z = 0; // Defina a posição de foco da câmera (na verdade, para determinar uma direção) câmera.lookat ({x: 0, y: 0, z: 0});}Para determinar exclusivamente a posição e a direção de uma câmera, os três atributos da posição, para cima e o visual são indispensáveis.
Aqui criamos uma câmera de projeção ortogonal. Aqui, mantenho o tamanho da exibição consistente com a resolução da tela apenas por conveniência, para que um comprimento de unidade no sistema de coordenadas corresponda a um pixel da tela.
Colocamos a câmera no eixo z, voltada para a origem da coordenada, e a direção superior da câmera é o eixo y. Observe que a direção da UP e a direção do Lookat devem ser perpendiculares (você saberá se se comparar à sua própria cabeça).
Aqui está um cubo adicionado à cena:
function initObject () {// Crie um cubo com um comprimento lateral de 100 var geometria = new Three.cubegeometria (100, 100, 100); objeto = new Three.Mesh (geometria, new Three.MeshNormalMaterial ()); cenário.add (objeto);}Observe que usamos o material normal em meshnormalmaterial , para que a cor de cada face do cubo esteja relacionada à direção voltada para essa face, facilitando a observação/depuração.
Nesta demonstração simples, não pretendo adicionar efeitos de luz e sombra, e o material normal não responde à luz.
Finalmente, crie um loop de animação
função render () {requestanimationframe (render); object.rotation.x += 0,05; object.rotation.y += 0,05; renderizador.render (cena, câmera);}Cada repintura faz com que o cubo gire um pouco.
Quando a página estiver carregando, basta ligar para as funções anteriores
function threestart () {initrenderer (); initcamera (); initscene (); initObject (); render ();} window.onload = threestart ();A demonstração completa se parece com o seguinte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> cubo </title> <script src = "http://sqimg.qq.com/Three.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min. html, corpo {margem: 0; preenchimento: 0; } #three_canvas {posição: absoluto; largura: 100%; Altura: 100%; } </style> </head> <body> <canvas id = "three_canvas"> </canvas> <cript> var renderizador, câmera, cena, luz, objeto; Var largura, altura; function initrendeRer () {width = document.getElementById ('three_canvas'). clientwidth; altura = document.getElementbyId ('three_canvas'). clientHeight; renderizador = new Three.WebglRenderer ({Canvas: document.getElementById ('three_canvas')}); renderizador.SetSize (largura, altura); renderer.setClearColor (0xfffff, 1.0); } function initcamera () {camera = new Three.hotographiccamera (largura / -2, largura / 2, altura / 2, altura / -2, 1, 1000); câmera.Position.x = 0; câmera.Position.Y = 0; câmera.Position.Z = 200; câmera.up.x = 0; câmera.up.y = 1; câmera.up.z = 0; câmera.lookat ({x: 0, y: 0, z: 0}); } function initscene () {cenário = new Three.Scene (); } função initObject () {var geometria = new Three.cubegeometry (100, 100, 100); objeto = new Three.Mesh (geometria, new Three.MeshNormalMaterial ()); cenário.add (objeto); } função render () {requestanimationframe (render); object.rotation.x += 0,05; object.rotation.y += 0,05; renderizador.render (cena, câmera); } função threestart () {initrenderer (); initcamera (); initscene (); initObject (); render (); } window.onload = threestart (); </script> </body> </html>Depois de salvar como HTML, abra -o, um cubo rotativo será exibido no centro da tela.
resumo
Isso é tudo para a introdução de três.js. Este artigo menciona basicamente componentes importantes em três. De fato, há muitas coisas que quero resumir, mas escrever neste artigo pode parecer pesado. A intenção original deste artigo é permitir que os leitores tenham uma compreensão intuitiva e geral de três.js depois de lê -lo, e não pretendem envolver muitos detalhes.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.