Prefácio
Three.js é uma biblioteca 3DJS, uma das mais excelentes estruturas de código aberto do WebGL. Além do WebGL, o Three.js também fornece um renderizador baseado em lonvas e tags SVG. Recomenda -se usar o Chrome ou o Firefox para depuração.
1. Câmera
A câmera em gráficos define como o espaço tridimensional para telas bidimensionais é projetado.
Para métodos de projeção, as câmeras são divididas em câmeras de projeção ortogonal e câmeras de projeção de perspectiva.
2. A diferença e o escopo da aplicação das duas câmeras
Projeção ortogonal:
Projeção de perspectiva:
A projeção ortogonal é como uma foto na classe de matemática; Embora a projeção de perspectiva tenha um ponto básico, ou seja, os objetos à distância são menores que os objetos no próximo e são maiores e menores no próximo.
Para desenhar e modelar software, a projeção ortogonal é geralmente usada; Para a maioria das outras aplicações, geralmente é usada a projeção de perspectiva.
3. Câmera de projeção ortogonal
O construtor de uma câmera de projeção ortogonal:
Three.ThográficosCamera (esquerda, direita, superior, inferior, perto, longe)
Os seis parâmetros representam as posições das seis faces capturadas pela câmera de projeção ortogonal.
Entre eles, perto de representa a distância vertical entre o plano próximo e o ponto central da câmera ; Representa muito a distância vertical entre o plano mais distante e o ponto central da câmera .
Para manter a razão horizontal e vertical da câmera , a proporção de (esquerda direita) para (fundo superior) deve ser consistente com a proporção de tela.
Como pode ser visto a partir da figura, os valores de próximo e longe devem ser positivos e distantes . Se os dois últimos valores forem (0, 0), ou seja, os valores próximos e distantes são os mesmos, a profundidade do corpo de visualização desaparecerá e todo o corpo de visualização é pressionado em um plano, a tela estará incorreta.
4. Exemplo de câmera de projeção ortogonal
Código -fonte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js teste 2 </ititle> </ad head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> <script type = "text/javascript" src = src = jadscript "src = script) type = "text/javaScript"> function init () {var renderer = new Three.webglrenderer ({canvas: document.getElementById ('maincanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // Defina a câmera var câmera = new Three.tographiccamera (-2, 2, 1,5, -1,5, 1, 10); câmera.Position.set (0, 0, 5); //camera.lookat(new Three.Vector3 (0, 0, 0)); cena.add (câmera); // Crie um cubo var cubo = new Three.mesh (novo Three.cubegeometry (1, 1, 1), novo Three.MeshBasicMaterial ({color: 0xff0000, Wireframe: true})); cena.add (cubo); // renderize renderer.render (cena, câmera); } </script> </body> </html> Onde, se a propriedade Wireframe de THREE.MeshBasicMaterial for verdadeira , o material será renderizado em uma estrutura de arame.
Você pode ver que a borda atrás da posição atual coincidirá completamente com a da frente:
4.1 Altere a proporção de comprimento e largura da visão
Aqui, a proporção de tela é 4: 3, a distância horizontal da câmera é de 4 e a distância vertical é 3, portanto a proporção de comprimento e largura permanece inalterada (1: 1).
Se a distância horizontal da câmera for reduzida para 2,
var câmera = new Three.tográficoCamera (-1,1,1,5, -1,5,1,10);
Objetos serão prolongados:
O campo de visão da câmera tornou -se mais estreito, resultando em um aumento na proporção lateral do cubo dentro do campo de vista, que se manifesta como um alargamento do cubo.
4.2 Alterar a posição da câmera
A posição da câmera no exemplo é (0,0,5). Como a câmera é colocada na direção negativa do eixo z por padrão, você pode ver o cubo na origem.
Mova a posição da câmera por 1 unidade para a direita:
var câmera = new Three.ThográficosCamera (-2,2,1,5, -1,5,1,10); câmera.Position.set (1,0,5);
A câmera enfrenta o objeto, então a câmera se move para a direita e o objeto sendo iluminado se move à esquerda:
4.3 Altere a posição da visão
Defina a visualização para a direita:
var câmera = new Three.ThográficosCamera (-1,3,1,5, -1,5,1,10); câmera.Position.set (1,0,5);
Assim como mover a câmera para a direita.
4.4 Altere o ângulo da câmera
câmera.Position.set (4, -3,5); câmera.Lookat (new Three.Vector3 (0, 0, 0));
Mas agora a câmera está observando ao longo da direção negativa do eixo z, para que o cubo não possa ser observado, apenas um pedaço de preto é visto. Podemos especificar a direção da origem através da função Lookat:
câmera.Lookat (new Three.Vector3 (0, 0, 0));
Observe que lookAt aceita uma instância de THREE.Vector3 , não escreva como camera.lookAt(0, 0, 0)
Ok, o exposto acima é o conteúdo inteiro da câmera de projeção ortogonal de três.js. Espero que seja útil para todos aprenderem três.js. O editor atualizará os artigos sobre três.js um após o outro. Por favor, continue prestando atenção ao wulin.com.