Luis Camicado e Henrique Poyatos, Front End Developer e Professor de EAD da FIAP falam sobre Animações simples com o three.js no JS Experience'17 Saiba mais em https://eventos.imasters.com.br/jsexperience

1. L U I S H E N R I Q U E B I Z A R R O & H E N R I Q U E P O Y A T O S
T H R E E . J S
E - M A I L S I T E
hello@lhbzr.com lhbzr.com

2. T Ó P I C O S
• Sobre Nós
• Conceitos
• Web Graphics Library
• Introdução
• Exemplo
• Three.js
• Introdução
• Exemplo
• Showcase
• Hands-On

3. S O B R E N Ó S

6. C O N C E I T O S

11. W E B G L

12. W E B G L
• API de JavaScript utilizada para desenhar gráficos.
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl')
• Suportada por todos os navegadores do mercado.

14. // HTML.
<canvas id="canvas" width="500" height="500"></canvas>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>

15. // Canvas.
const webGLStart = () => {
const canvas = document.getElementById('canvas')
initGL(canvas)
initShaders()
initBuffers()
gl.clearColor(0.0, 0.0, 0.0, 1.0)
gl.enable(gl.DEPTH_TEST)
drawScene()
}
webGLStart()

16. // Context.
let gl
const initGL = (canvas) => {
try {
gl = canvas.getContext('experimental-webgl')
gl.viewportWidth = canvas.width
gl.viewportHeight = canvas.height
} catch (e) {}
if (!gl) {
alert('Could not initialise WebGL, sorry :-(')
}
}

17. if (shaderScript.type == 'x-shader/x-fragment') {
shader = gl.createShader(gl.FRAGMENT_SHADER)
} else if (shaderScript.type == 'x-shader/x-vertex') {
shader = gl.createShader(gl.VERTEX_SHADER)
} else {
return null
}
gl.shaderSource(shader, str)
gl.compileShader(shader)
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader))
return null
}
return shader
// Shaders.
const getShader = (gl, id) => {
const shaderScript = document.getElementById(id)
if (!shaderScript) {
return null
}
let str = ''
let k = shaderScript.firstChild
while (k) {
if (k.nodeType == 3) {
str += k.textContent
}
k = k.nextSibling
}
let shader
}

18. let mvMatrix = mat4.create()
let pMatrix = mat4.create()
let shaderProgram
const initShaders = () => {
let fragmentShader = getShader(gl, 'shader-fs')
let vertexShader = getShader(gl, 'shader-vs')
shaderProgram = gl.createProgram()
gl.attachShader(shaderProgram, vertexShader)
gl.attachShader(shaderProgram, fragmentShader)
gl.linkProgram(shaderProgram)
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Could not initialise shaders')
}
gl.useProgram(shaderProgram)
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition')
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute)
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix')
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, 'uMVMatrix')
}

19. triangleVertexPositionBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer)
let triangleVertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
]
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(triangleVertices),
gl.STATIC_DRAW
)
triangleVertexPositionBuffer.itemSize = 3
triangleVertexPositionBuffer.numItems = 3
// Buffers.
let triangleVertexPositionBuffer
let squareVertexPositionBuffer
const initBuffers = () => {
squareVertexPositionBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer)
let squareVertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
]
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(squareVertices),
gl.STATIC_DRAW
)
squareVertexPositionBuffer.itemSize = 3
squareVertexPositionBuffer.numItems = 4
}

20. // Draw.
let mvMatrix = mat4.create()
let pMatrix = mat4.create()
const drawScene = () => {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix)
mat4.identity(mvMatrix)
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0])
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0)
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix)
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix)
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems)
mat4.translate(mvMatrix, [3.0, 0.0, 0.0])
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0)
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix)
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix)
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems)
}

21. T H R E E . J S
• Biblioteca em JavaScript criada por Ricardo Cabello.
• Código Aberto, Documentação Detalhada, Comunidade Ativa e Exemplos.
• Cenas, Câmeras, Geometrias, Luzes, Materiais,
Texturas, Carregadores, Utilitários e muitas mais.
• Renderização em WebGL, Canvas, SVG, CSS 3D e DOM.

24. // Setup.
let WIDTH = window.innerWidth
let HEIGHT = window.innerHeight
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000)
camera.position.z = 5
const renderer = new THREE.WebGLRenderer()
renderer.setSize(WIDTH, HEIGHT)
document.body.appendChild(renderer.domElement)

25. // Mesh.
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshNormalMaterial()
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

26. // Render.
const render = () => {
requestAnimationFrame(render)
mesh.rotation.x += 0.01
mesh.rotation.y += 0.02
renderer.render(scene, camera)
}
render()

27. S H O W C A S E

33. H A N D S - O N