Three.JS

Recursos

Three.js inclui os seguintes recursos:
Efeitos: Anaglifo, olhos cruzados e barreira paralaxe.
Cenários: adiciona e remove objetos em tempo de execução; névoa.
Câmeras: perspectiva e ortográfico; controladores: trackball, FPS, path e mais.
Animação: armaduras, cinemática direta, cinemática inversa, animação por vértice e quadro-chave.
Luzes: ambiente, direção, luzes de ponto e local; sombras: cast e receive.
Materiais: Lambert, Phong, smooth shading, texturas e mais.
Sombreadores: acesso a todas as capacidades do OpenGL Shading Language (GLSL): lens flare, depth pass e extensa biblioteca de pós-processamento.
Objetos: malhas, partículas, sprites, linhas, fitas, ossos e mais - tudo com nível de detalhe.
Geometria: plana, cubo, esfera, toro, texto 3D e mais; modificadores: lathe, extrude e tubo.
Carregadores de dados: binário, imagem, JSON e cenário.
Utilidades: completa configuração de tempo e funções matemáticas 3D incluindo tronco de bases paralelas, matriz, quaterniões, UVs e mais.
Exporta e importa: utilidades para criar arquivos JSON compatíveis com Three.js de dentro: Blender, openCTM, FBX, Max, e OBJ.
Suporte: a documentação da API está sob construção, fórum público e wiki em completa operação.
Exemplos: Mais de 150 arquivos de exemplos de código mais fontes, modelos, texturas, sons e outros arquivos de suporte.
Debugging: Stats.js, WebGL Inspector, Three.js Inspector.

Three.js roda em todos os browsers suportados pelo WebGL 1.0.
Three.js é disponível sob a licença MIT.

Uso do Three.js

A biblioteca Three.js é um simples arquivo JavaScript. Ela pode ser incluída dentro de uma página web por ligação a uma cópia local ou remota.
Fonte : https://pt.wikipedia.org/wiki/Three.js

Exemplo Three.js

O seguinte código cria um cenário, adiciona uma câmera e um cubo ao cenário, cria um renderizador WebGL e adiciona sua janela de exibição no document.body element. Uma vez carregado, o cubo gira em eixos X e Y.

CANVAS

The THREE code generates a simple canvas.

RENDERER

renderer = new THREE.WebGLRenderer();
Simple render

renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
antialias = Render com sombra suavizada. / alpha = Fundo transparente.

renderer.setSize( window.innerWidth, window.innerHeight );
Tamanho do canvas (largura, altura).

renderer.setPixelRatio(window.devicePixelRatio);
Tamanho dos pixels no canvas

document.body.appendChild( renderer.domElement );
Gera o CANVAS dentro da tag body.

container.appendChild( renderer.domElement );
Gera o CANVAS dentro do container.

Geometrias 3D

Box

BoxGeometry é uma classe de geometria para um cuboide retangular com uma dada "largura", "altura" e "profundidade". Na criação, o cuboide é centrado na origem, com cada aresta paralela a um dos eixos.

Box

Three.js Code Example

x

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Documentation link

Sphere

Uma classe para gerar geometrias de esfera.

Sphere
SphereGeometry( Raio, Segmentos na largura, Segments na altura)

Three.js Code Example

x

const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

Documentation link

Cone

ConeGeometry is a geometry class of three.

Cone
ConeGeometry(raio, altura, Segmentos)

Three.js Code Example

x

const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );

Documentation link

Cylinder

CylinderGeometry is a geometry class of three.

CylinderCylinderGeometry(raio do topo, raio ba base, altura, Segments)

Three.js Code Example

x

const geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

Documentation link

Tetraedro

TetrahedronGeometry is a geometry class of three.

Tetraedro
TetrahedronGeometry(raio, detalhe)

Three.js Code Example

x

const geometry = new THREE.TetrahedronGeometry(5,0);
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

Detalhe — O padrão é 0. Definir isso para um valor maior que 0 adiciona vértices, tornando-o não mais um tetraedro.
Documentation link

Octaedro

OctahedronGeometry is a geometry class of three.

Octaedro
OctahedronGeometry(raio, detalhe)

Three.js Code Example

x

const geometry = new THREE.OctahedronGeometry(pixel3d,0); //(radius : Float, detail : Integer)
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

Detalhe — O padrão é 0. Definir isso para um valor maior que 0 adiciona vértices, tornando-o não mais um octahedron.
Documentation link

Dodecaedro

DodecahedronGeometry is a geometry class of three.

Dodecaedro

Three.js Code Example

x

?<br/>

Documentation link

Extrude

ExtrudeGeometry is a geometry class of three.

Extrude

Three.js Code Example

x

?

Documentation link

Icosahedron

IcosahedronGeometry is a geometry class of three.

Icosaedro

Three.js Code Example

x

?

Documentation link

Paramétrica

LatheGeometry is a geometry class of three.

Paramétrica

Three.js Code Example

x

const geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const klein = new THREE.Mesh( geometry, material );
scene.add( klein );

ParametricGeometry(func : Function, slices : Integer, stacks : Integer)
func - uma função que assume um valor uev, cada um entre 0 e 1, e modifica um terceiro argumento Vector3
slices - a contagem de fatias a serem usadas para a função paramétrica
stacks - a contagem de pilhas a serem usadas para a função paramétrica
Documentation link

Texto

TextGeometry is a geometry class of three.

Texto

Three.js Code Example

x

const loader = new THREE.FontLoader();
loader.load( "fonts/helvetiker_regular.typeface.json", function ( font ) {
const geometry = new THREE.TextGeometry( "Ola three.js!", {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
} );
} );

TextGeometry (text: String, parameters: Object)
text - o texto que precisa ser mostrado.
parameters - objeto que pode conter os seguintes parâmetros.
font - uma instância de THREE.Font.
size - Float. Tamanho do texto. O padrão é 100.
height - Float. Espessura para extrusão do texto. O padrão é 50.
curveSegments - Inteiro. Número de pontos nas curvas. O padrão é 12.
bevelEnabled - Booleano. Ligue o bisel. O padrão é False.
bevelThickness - Float. O quão profundo é o chanfro do texto. O padrão é 10.
bevelSize - Float. A que distância do contorno do texto está o chanfro. O padrão é 8.
bevelOffset - Float. A que distância começa o bisel do contorno do texto. O padrão é 0.
bevelSegments - Inteiro. Número de segmentos chanfrados. O padrão é 3.
Documentation link

Torus(Rosca)

TorusGeometry is a geometry class of three.

Torus(Rosca)

Three.js Code Example

x

const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

Documentation link

TorusKnot(Pretzel)

TorusKnotGeometry is a geometry class of three.

Pretzel/TorusKnot

Three.js Code Example

x

const geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );

Documentation link

Tubo

TubeGeometry is a geometry class of three.

Tubo

Three.js Code Example

x

class CustomSinCurve extends THREE.Curve {
constructor( scale = 1 ) {
super();
this.scale = scale;
}
getPoint( t, optionalTarget = new THREE.Vector3() ) {
const tx = t * 3 - 1.5;
const ty = Math.sin( 2 * Math.PI * t );
const tz = 0;
return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );
}
}
const path = new CustomSinCurve( 10 );
const geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Documentation link

Lathe

LatheGeometry is a geometry class of three.

Lathe

Three.js Code Example

x

const points = [];
for ( let i = 0; i < 10; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
const geometry = new THREE.LatheGeometry( points );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

Documentation link

Geometrias 2D

Plane - Plano(2D)

PlaneGeometry is a geometry class of three.

Plane - Plano(2D)

Three.js Code Example

x

const geometry = new THREE.PlaneGeometry( 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );

Documentation link

Ring - Anel(2D)

RingGeometry is a geometry class of three.

Ring - Anel(2D)
THREE.RingGeometry(raio interno, raio externo, total de segmentos)

Three.js Code Example

x

const geometry = new THREE.RingGeometry( 1, 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Documentation link

Circle - Círculo(2D)

CircleGeometry is a geometry class of three.

Circle - Círculo(2D)
THREE.CircleGeometry(Raio, Segmentos)

Three.js Code Example

x

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

Documentation link

Shape - forma(2D)

ShapeGeometry is a geometry class of three.

Wireframe
ShapeGeometry(shapes, totl de segmentos)

Three.js Code Example

x

const x = 0, y = 0;
const heartShape = new THREE.Shape();
heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
const geometry = new THREE.ShapeGeometry( heartShape );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

Documentation link

Outros

Wireframe

WireframeGeometry is a geometry class of three.

Wireframe

Three.js Code Example

x

...

Documentation link

Edges - Arestas (Editor)

EdgesGeometry is a geometry class of three.

Wireframe

Three.js Code Example

x

...

Documentation link

Polyhedron (Poliedro)

PolyhedronGeometry is a geometry class of three.

Wireframe

Three.js Code Example

x

...

Documentation link

CAMERA

Group

Isso é quase idêntico a um Object3D.
Seu objetivo é tornar o trabalho com grupos de objetos sintaticamente mais claro.

Links Úteis

A seguir está uma coleção de links que podem ser úteis ao aprender o three.js.
Observe que, como three.js está em rápido desenvolvimento, muitos desses links conterão informações desatualizadas.

Tutoriais e cursos

Examples of applications with Three.js
https://github.com/ViniciusVC/estudojs3d