html,head e body e um elemento div com atributo id,dentro do corpo do documento,para ser utilizado na renderização e apresentação da cena 3D. No elemento head é declarado o título da página e carregado o arquivo JavaScript externo contendo a biblioteca 'Three.js',usada para gerar o processamento 3D. No elemento body da página está o elemento div onde a cena será renderizada e um elemento script com a função para conter os comandos para criação da cena 3D. A função será executada a partir da sua atribuição ao evento window.onload,disparado após a página ser totalmente carregada pelo navegador.
body da página tem o elemento script com a função contendo a programação de comandos 'Three.js' utilizados na criação dos objetos da cena. A saída do renderizador do 'Three.js' é direcionada para o elemento div,presente no elemento body e localizado com o atributo id.
SpotLight. Neste exemplo,a luz não causa efeito sobre os materiais das malhas do plano,do cubo e da esfera pois os materiais das malhas são da classe MeshBasicMaterial. Apesar de não afetar o material das malhas,por exemplo causando reflexo,a luz do holofote projeta a sombra das malhas umas sobre as outras,do cubo e da esfera sobre o plano.
requestAnimationFrame(),utilizado para o processamento repetido da cena em um determinado intervalo de tempo.
Scene,como geometrias,materiais e malhas estão relacionados e a diferença entre a câmera ortográfica a câmera perspectiva.
fog do objeto da classe Scene é alterada para permitir o efeito de névoa na cena completa,onde mais distante da câmera a malha estiver,mais escondida da vista ficará.
overrideMaterial é utilizada para fixar o material das malhas da cena no momento de sua criação,fazendo com que todas as malhas adicionadas na cena utilizem o mesmo material,quando não for especificada na criação da malha.
(0,0,0).
AmbientLight aplica a sua cor globalmente,sem uma direção específica. A fonte de luz ambiente não contribuie com sombras,e não deve ser usada como a única fonte de luz em uma cena,e sim em conjunto com outras fontes de luz,como das classes Spotlight e DirectionalLight,para suavização de sombras ou para adicão de mais de cor na cena.
PointLight da biblioteca 'Three.js' é uma fonte de luz que brilha em todas as direções,emanando de um único ponto. Um bom exemplo de um ponto de luz é o feixe vindo do céu de noite.
PointLight também se aplicam a na classe SpotLight,que tem as propriedades adicionais castShadow,shadowCameraNear,shadowCameraFar,shadowCameraFov,shadowBias,angle,exponent,onlyShadow,shadowCameraVisible,shadowMapWidth e shadowMapHeight.
DirectionalLight emite luz muito distante,cujos raios são enviados em paralelo,uns aos outros. Um bom exemplo é o sol,tão distante que na Terra seus raios de luz são recebidos paralelos uns com os outros. A principal diferença entre uma fonte DirectionalLight e dos holofotes que vimos anteriormente é que esta luz não diminuirá à medida que a distância até o alvo fique maior. A área completa iluminada pela fonte DirectionalLight recebe o mesma intensidade de luz.
HemisphereLight permite a criação de uma iluminação ao ar livre com aparência mais natural,simulando o ar livre. Sendo criadas uma fonte DirectionalLight emulando o sol e talvez uma fonte AmbientLight,para fornecer um pouco de cor em geral para a cena,senão a cena não ficará realmente natural. Quando se está ao ar livre,nem toda a luz vem diretamente de cima. A luz é bastante difundida pela atmosfera,que se reflete pelo solo e também é refletida por outros objetos. A fonte HemisphereLight da biblioteca 'Three.js' é própria para cenas ao ar livre,proporcionando uma iluminação mais natural.
AreaLight é emitida a partir de uma área retangular. O código da classe AreaLight não está incluído na biblioteca 'Three.js' padrão,mas sim em uma de suas extensões,exigindo algumas declarações aicionais no documento HTML para sua utilização.
MeshBasicMaterial é simples e não leva iluminação em conta no processamento da cena,sendo utilizado na criação de superfícies sem brilho e com aparência fosca. Malhas com este material são processadas como polígonos planos simples,com propriedade para habilitar a apresentação da 'armação de arame' (wireframe) da geometria.
MeshDepthMaterial não é definido por luzes ou propriedades específicas do material,mas pela distância da malha do objeto à câmera. Este material pode ser combinado com outros materiais para facilitar a criação do efeito de desvanecimento. Tem duas propriedades que controlam o wireframe: wireframe,que define se o wireframe será mostrado e wireframeLinewidth,que define a largura do wireframe.
MeshDepthMaterial. A biblioteca 'Three.js',no entanto,tem a opção de combinar os materiais em conjunto para criar novos efeitos.
MeshFaceMaterial permite a atribuição de um material diferente para cada face da geometria. Por exemplo,um cubo utiliza o material de face composto por outros seis diferentes materiais,uma para cada face do cubo,usando diferentes texturas de cor ou imagem.
ambient e emissive.
MeshPhongMaterial é possível criar um material brilhante. As propriedades que você pode usar para isso são praticamente o mesmo que para um não-brilhante MeshLambertMaterial.
ShaderMaterial é um dos materiais mais versáteis e complexos disponíveis na biblioteca 'Three.js'. Com ele,você pode passar em seus próprios shaders personalizados que serão diretamente executados no contexto WebGL. Um shader é o que converte os objetos JavaScript do 'Three.js' em pixels na tela. Com estes shaders personalizados,você pode definir exatamente como seu objeto deve ser processado e substituído,ou alterar os padrões da biblioteca 'Three.js'. Shaders personalizados são detalhados no Capítulo 11.
Line são muito simples. As propriedades disponíveis para este material são color,linewidth,LineCap,LineJoin,vertexColors e fog.
LineBasicMaterial,e duas adicionais,para definir a largura do traço e a largura dos espaços entre os traços,são elas dashSize e gapSize.
PlaneGeometry,CircleGeometry,ShapeGeometry,CubeGeometry,SphereGeometry,CylinderGeometry,TorusGeometry,TorusKnotGeometry,PolyhedronGeometry,IcosahedronGeometry,OctahedronGeometry e TetraHedronGeometry.
PlaneGeometry cria uma geometria bidimensional de retângulo,bastante simples,com altura e largura mas,por ser 2D,sem profundidade.
CircleGeometry cria a geometria de um círculo 2D muito simples,ou um círculo 2D parcial. Neste exemplo é criado um círculo com a propriedade thetaLength menor do que 2 * π,com controle GUI das propriedades radius,segments,thetaStart e thetaLength.
ShapeGeometry é utilizado para criação de formas 2D personalizadas. As geometrias PlaneGeometry e CircleGeometry têm formas limitadas para personalização da sua aparência. Com o objeto ShapeGeometry você tem um conjunto de propriedades e métodos personalização das formas. Esta geometria pode ser comparada com a funcionalidade dos elementos HTML canvas e svg.
RingGeometry cria a geometria 2D de um anel.CubeGeometry. É uma geometria 3D muito simples que permite que você crie um cubo especificando a sua largura,altura e profundidade. Foi substituida em versões mais atualizadas da biblioteca 'Three.js' pela classe BoxGeometry. Embora as medidas não possam ser alteradas após a geometria da malha ter sido criada,disponibiliza as propriedades width,height e depth.
SphereGeometry cria a geometria 3D de uma esfera.CilynderGeometry cria a geometria 3D de um cilindro.TorusGeometry é criado. Suas propriedades são radius,tube,radialSegments,tubularSegments e arc.PolyhedronGeometry permite a criação de poliedros,que são geometria apenas com faces planas e bordas retas. Na maioria das vezes,porém,não é usada diretamente. A biblioteca 'Three.js' fornece um número de poliedros específicos que podem ser utilizados sem a necessidade de especificação direta dos vértices e faces do objeto PolyhedronGeometry.
ConvexGeometry,LatheGeometry e TubeGeometry,como criar formas 3D a partir de formas 2D usando a classe ExtrudeGeometry,como criar formas personalizadas com a classe ParametricGeometry,calculando a geometria a partir de um conjunto de equações,como criar textos 3D usando objetos da classe TextGeometry e como criar novas geometrias a partir das já existentes com as operações binárias fornecidas pelos 'Three.js',utilizando a extensão THREEBSP.
ConvexGeometry cria um casco convexo em torno de um conjunto de pontos. Um casco convexo é a forma mínima que engloba todos estes pontos. Neste exemplo é apresentado o casco convexo de um conjunto aleatório de pontos. Com um clique,é redesenhado com 20 novos pontos. Nós são adicionados em cada um dos pontos uma pequena esfera da classe 'SphereGeometry' para tornar mais claro como um casco convexo funciona.
LatheGeometry lhe permite criar formas a partir de uma curva suave. Esta curva é definida por um número de pontos (também chamado nós) e é frequentemente denominada spline. Este spline é girado em torno de um ponto fixo e resultados em formas do tipo vaso e sino.
CircleGeometry,obtemos uma forma que se parece com um cilindro,e se remover um objeto PlaneGeometry,teremos um cubo. Com o ExtrudeGeometry uma geometria 3D pode ser criada a partir de outra 2D.
TubeGeometry cria um tubo que faz a extrusão ao longo de uma ranhura 3D. Você especifica o caminho usando um número de vértices e o tubo será criado.
ShapeGeometry anteriormente,foi mencionado que os elementos SVG e Canvas seguem praticamente a mesma abordagem para desenhar formas. O elemento SVG,especialmente,é constituído de um jeito muito similar à das geometrias do 'Three.js'. Neste exemplo é mostrado como a pequena biblioteca d3-threeD é utilizada para converter caminhos SVG para uma forma 'Three.js'.
ParametricGeometry permite a criação de uma geometria personalizada com o uso de equações parametrizadas.
ExtrudeGeometry.
intersect,union e subtract.
ParticleBasicMaterial,como usar um sistema de partículas para criar um conjunto agrupado de partículas,como criar um sistema de partículas de geometrias existentes,como animar partículas e o sistema de partículas,como adicionar uma textura ao conjunto de estilos das partículas e como usar o estilo de uma partícula com objetos da classe ParticleCanvasMaterial.
canvas. A classe CanvasRenderer faz referência direta ao canvas através do objeto ParticleCanvasMaterial. Com objetos da classe ParticleCanvasMaterial a saída para o elemento canvas pode ser utilizada como textura para suas partículas. Este material é criado especificamente para o CanvasRenderer e só funciona quando você usar este processador específico. Antes de olharmos em como usar esse material,vamos primeiro olhar para os atributos que você pode definir neste material: color,program,opacity,transparent e blending.
WebGLRenderer permite outros recursos adicionais para usar o elemento canvas. Deve ser feita uma abordagem um pouco diferente. A classe ParticleCanvasMaterial não vai funcionar,então usamos a classe ParticleBasicMaterial para esta finalidade. Nos atributos para o ParticleBasicMaterial temos a propriedade map. Com ela,nós podemos carregar uma textura para a partícula.
PointCloud,usando a geometria do objeto da classe Geometry agrupando as partículas de objetos da classe Vector3,e o material da classe PointCloudMaterial.
Sprite usam material da classe SpriteCanvasMaterial,que contém a propriedade program com a função de criação do sprite usado na partícula. As partículas da nuvem de sprites do Pac-Man são criadas e inseridas diretamente na cena.
PointCloud,usando a geometria do objeto da classe Geometry agrupando as partículas de objetos da classe Vector3,e o material da classe PointCloudMaterial,com a propriedade map apontando para a função responsável pela criação do sprite do Pac-Man.
Sprite usam material da classe SpriteCanvasMaterial,que contém a propriedade program com a função de criação do sprite usado na partícula. As partículas da nuvem de sprites do Pac-Man são criadas e inseridas diretamente na cena.
canvas. Desde que qualquer coisa pode ser desenhada,mesmo com o carregamento de imagens externas,com essa abordagem podem ser adicionados diversos tipos de estilos para o sistema de partículas. Há,no entanto,uma maneira mais direta para usar uma imagem no estilo de suas partículas. A biblioteca 'Three.js' permite o carregamento de imagens externas com a função THREE.ImageUtils.loadTexture().
ParticleSystem podemos ter apenas um material,portanto para utilizar múltiplos materiais é necessário serem criados vários sistemas de partículas.
THREE.Sprite é utilizado com dois diferentes objetivos. Primeiro,criar um objeto que é movido,posicionado e dimensionado com base na tela. Você pode usar isso para criar um Heads-Up Display (HUD) como uma camada para o seu conteúdo 3D. O exemplo utiliza partículas da classe THREE.Sprite simples,se movendo da esquerda para a direita sobre a tela. Será processada uma cena 3D com uma câmera em movimento para ilustrar o movimento independente do sprite na cena.
Particle permite ao objeto CanvasRenderer. Usando sprites num ambiente 3D também é chamado às vezes 'billboarding'. Isto implica no giro constante do sprite apontando para a câmera,assim como os avisos ao longo de uma rodovia estão virados para o motorista.
GeometryUtils.merge() para mesclar objetos.
add. O efeito da adição de um objeto subordinado a um grupo é que você pode mover,redimensionar,girar e traduzir o objeto pai,e toda objeto filho também será afetado.
THREE.GeometryUtils.merge() você pode mesclar objetos e criar um objeto combinado. No exemplo a seguir,você pode ver como isso funciona e o efeito que tem sobre o desempenho.FlyControls. Permite que você mova em torno do eixo Z.
FirstPersonControls permite o controle da câmera como um caminhante em primeira pessoa. O mouse é usado para olhar em volta e teclado é utilizado para caminhar. Controles que se comportam como aqueles jogos de tiro em primeira pessoa (FPS).
OrbitControl é uma ótima maneira de usar o mouse ou o teclado para girar e deslocar um objeto em torno de outro no centro da cena,como um satélite orbitando um planeta.
DDSLoader carrega arquivos com o formato DDS como textura para o material.
PVRLoader carrega arquivos com o formato PVR como textura para o material.
TGALoader carrega arquivos com o formato TGA como textura para o material.
BloomPass e FilmPass,aplicação de efeitos a uma parte da cena usando máscaras,usando as TexturePass para armazenar os resultados prestados,utilizar o ShaderPass para adicionar efeitos básicos de pós-processamento,tais como filtros sépia,efeitos de espelho,e ajustes de cor,utilizar o ShaderPass para vários efeitos obscuros e filtros mais avançados e a criação de um efeito personalizado de pós-processamento escrevendo um shader simples.