Departamento de matemática
Visualização em Dispositivos Móveis utilizando WebGL
Aluno: Matheus de Sousa Suknaic
Orientador: Sinésio Pesco
Introdução
Os dispositivos móveis como celulares e tablets estão desempenhando um grande papel
no cotidiano de todas as pessoas. Conseguimos resolver problemas que antigamente
necessitariam de um microcomputador ou um laptop, por meio de apenas um click nesses
aparelhos portáteis. Portanto, não é de se espantar que todo dia surja um novo app ou
aplicação direcionada para esses dispositivos. Com as últimas evoluções proporcionadas no
mundo da computação gráfica, ficou extremamente mais flexível construir aplicações
relativamente simples, que servem como base para projetos mais complexos. Com esse
intuito, foi-se desenvolvido esse projeto.
O trabalho desenvolvido utilizou o WebGL, uma API (Interface de programação de
aplicações) que é direcionada a representação gráfica do código produzido pelo programador.
Essa API funciona graças ao elemento canvas disponibilizado pelo HTML5, permitindo a
renderização de cenas 2D e 3D. Através das funcionalidades disponibilizadas pelo WebGL,
redigiu-se um código nas linguagens HMTL e JavaScript que tinha como funcionalidade
representar curvas splines. Essas curvas são bastante especiais, pois através delas constroem-
se diversas geometrias mais complexas que permitem uma “renderização” mais suave.
Buscou-se tornar a visualização dessas curvas uma coisa simples tanto na programação
quanto na interação do usuário. Para a parte de programação, utilizou-se uma biblioteca de
interface gráfica chamada THREE, o que tornou o código muito mais simples e claro. Para o
usuário, desenvolveu-se uma interface extremamente simplória que garante que toda a
manipulação que ocorra em relação a essas curvas seja de cunho extremamente fácil.
Metodologia
Antes de começar o projeto em si, foi necessário aprender algumas funcionalidades
básicas no WebGL. Um dos projetos mais simples era plotar um ponto no centro da tela em
um ambiente 2D[1]. Após a conclusão dessa etapa, buscamos alterar um pouco o programa
garantindo ao usuário certo controle. A maneira escolhida para realizar esta tarefa foi permitir
que o usuário tivesse o controle do mouse e que toda vez que ele clicasse na tela um ponto
fosse desenhado com uma cor diferente dependendo do quadrante escolhido[2]. Estudou-se o
Departamento de matemática
uso da biblioteca THREE.JS[3] que é construída utilizando várias funções que manipulam a
API do WebGL e tornam seu uso mais fácil.
Após o aprendizado da aplicabilidade básica do WebGL, foi feito um levantamento de
requisitos com o professor. Essa parte é de extrema importância, pois nesse momento traça-se
o quê o programa deve realizar e como a interface do produto final deve ser, para que o
usuário interaja com ela. Os requisitos podem mudar ao longo do tempo e ajustes devem ser
feitos, porém a parte bruta do projeto deve ser bem especificada para que não ocorram
dúvidas na produção do artefato a ser construído. Nesse levantamento de requisitos três
pontos fundamentais foram levantados:
-O programa deve ser construído de maneira a ser visualizado em dispositivos móveis,
afinal esse é o intuito do projeto.
-O programa deverá exibir curvas splines, que possam ser visualizadas pelo usuário, e
as quais ele possa interagir.
-O programa deve ser multiplataforma, robusto e que garanta a preservação dos dados
inseridos ou construídos nele.
Com esses requisitos em mão, passamos para a parte da construção do código.
Enfim, chegamos a parte na qual começamos o desenvolvimento do produto final que
será exibido em dispositivos móveis. O código encontra-se disponível no apêndice 1, suas
funcionalidades serão explicadas aqui, porém para acompanhar o processo aconselha-se ler o
código junto.
A primeira linha de código diz ao browser que versão de HTML a página que será
gerada pelo código estará escrita. A segunda linha define o tipo de documento como HTML, e
contém as outras tags que serão descritas ao longo do código. Como toda tag em
HTML(exceto a DOCTYPE), ela deve ser fechada, e isso ocorre na última linha de código
informando o fim do arquivo. Na terceira linha temos a tag head que também funciona como a
tag HTML servindo como um container para todos os elementos que se encontram dentro
deste tipo, sendo fechada na nona linha. Na quarta linha temos a tag title que é responsável
pelo nome da página que será gerada desse arquivo HTML, e será exibida na web. Para esse
projeto o titulo escolhido foi “Visualização de Splines”, após colocar essa linha fechamos a
tag responsável pelo título. Na quarta linha temos a tag style que é responsável pelo estilo da
página que será exibida como resultado. Nesse trecho, foi usado um pouco da linguagem
CSS, para definirmos como queríamos que a página fosse formatada. Na sexta linha
colocamos o corpo da página com margem zero em relação a seu display e na sétima linha
colocamos o elemento canvas com sua altura e sua largura total, ou seja, cem por cento, por
fim fechamos a tag style na oitava linha.
Na décima linha começamos a tag body que conterá a maioria do código que exibirá a
parte das curvas splines e incluirá as bibliotecas necessárias para o código funcionar. Essa tag
está sendo fechada na centésima octogésima linha. Em seguida, para a décima primeira linha
e para a décima segunda temos a tag script que é fechada na mesma linha. Essa tag serve para
escrevermos códigos em Javascript ou colocarmos arquivos do tipo JavaScript externos ao
programa, que é justamente o que estamos fazendo nessas duas linhas. Na décima primeira
Departamento de matemática
linha incluímos a biblioteca THREE,e na décima segunda colocamos outra biblioteca que
interage com a mencionada anteriormente porém responsável somente pelo controle do mouse
e suas interações com os objetos da cena. Na décima terceira linha abrimos mais uma tag
script, para fazermos nosso código em Javascript, fechamos essa tag na centésima
septuagésima nona linha. Até aqui utilizando o código apenas em HTML temos a seguinte
página sendo gerada:
Figura 1 - Página sendo exibida somente com os comandos HTML.
Na décima quinta linha nós definimos as seguintes variáveis globais:
-camera: Responsável por exibir o que está sendo contido na cena.
-cameraControls: Responsável por controlar a câmera: para onde ela aponta, seu campo
de visão e etc.
-scene: Responsável por conter os objetos que serão criados posteriormente e inseridos
na cena.
-renderer: Responsável por renderizar os objetos da cena, incluir a câmera para a
visualização dos objetos da cena.
-dropdown: Responsável pela seleção do menu das curvas splines e das cores delas.
-container: Responsável por criar o container que conterá o menu que disponibilizará a
seleção das curvas splines e suas curvas.
Departamento de matemática
-info: Responsável por criar o menu que disponibilizará a possiblidade de escolher
diferentes tipos de curvas e cores.
-line: Responsável por ser o elemento que será usado para desenhar as curvas splines.
-selectspline: Responsável por identificar a curva spline selecionada no momento.
Na décima sexta linha definimos outra variável chamada numPoints que será
responsável pelo número de pontos que cada curva spline conterá quando for desenhada, no
caso escolhemos um valor de 100 pontos, que permite uma visualização decente das curvas e
não sobrecarrega a renderização realizada pelo WebGL.
Na décima oitava linha definimos uma das curvas splines.A função
THREE.CatmullRomCurve3 recebe como parâmetros pontos e desenha um spline que passa
por todos esses pontos passados como referência[4]. Nessa função, estamos passando vetores
com três coordenadas responsáveis pelos pontos de controle dessas curvas. Realizamos o
mesmo procedimento até a quadragésima terceira linha para mais duas curvas splines que
queremos disponibilizar para o usuário escolher.
Na quadragésima quinta linha definimos uma variável chamada splines que funciona
como um “dicionário” para as nossas curvas splines criadas. Por meio dela poderemos
selecionar posteriormente as curvas splines. Entre a quinquagésima primeira linha e
quinquagésima sétima fazemos o mesmo para a variável coloroptions, que é responsável pelas
possíveis cores que as curvas splines podem assumir.
Na sexagésima linha criamos a variável dropdown. Essa variável é responsável por criar
uma caixa que disponibiliza a seleção das curvas splines que disponibilizamos previamente na
variável splines. Para que esse processo seja feito, colocamos os comandos necessários em
HTML entre aspas simples, e os armazenamos nessa variável. A tag responsável por criar
uma lista que exibe possíveis opções de escolha é a tag select. Portanto, abriremos essa tag
nessa linha, colocaremos como atributo no id a variável dropdown, para podermos manipular
ela e alterar seu valor. Em seguida, colocaremos no evento onchange uma função que será
explicada posteriormente, que está relacionada a adicionar uma curva spline a página da web.
Subsequentemente, faremos uma repetição determinada percorrendo o nosso “dicionário” de
splines. Abriremos a tag option passando como valor cada um das curvas splines que estão
disponíveis, e a incluiremos nessa lista que será criada. Na próxima linha fechamos a tag
option, e quando finalizamos a repetição determinada fechamos a nossa tag select. É
importante observar nessas linhas de código, que é necessário incrementar o valor da variável
dropdown. Caso contrário, a variável sobrescreverá as informações passadas. Realizamos o
mesmo processo entre a sexagésima oitava linha e a septuagésima quarta linha para as cores
que as curvas splines podem adquirir.
Na septuagésima sexta linha criamos a função que adiciona as curvas splines a cena que
a página exibe. Primeiramente criamos duas variáveis locais que serão responsáveis por
pegarem os valores que estão selecionados na lista das curvas splines e a cores dessas curvas,
ou seja, a curva e a cor selecionadas no momento. Fazemos que a variável global selectspline
armazene o spline selecionado e fazemos algo similar para cor, porém com uma variável
local. Em seguida, verificamos se existe alguma curva spline desenhado na tela, se a resposta
Departamento de matemática
for verdadeira temos que removê-lo da cena antes de desenhar a curva spline selecionado no
momento. Escolhemos um material para a linha que receberá a cor escolhida pelo usuário,
criamos uma geometria nova e pegamos os pontos da curva spline selecionada. Após isso,
fazemos uma repetição determinada passando para o vértice os pontos de controle da curva
spline selecionada e armazenamos os pontos que ligam esse trajeto. Por fim, atribuímos a
nossa variável linha a geometria criada com o material selecionado e adicionamos à curva
spline a cena.
Na centésima sétima linha criamos uma função que será responsável por mostrar os
pontos de controle de cada curva spline. Essa função é relativamente simples, apenas devemos
saber qual é a curva spline selecionada no momento e conseguimos isso através da nossa
variável global selectspline, e compara-lá com as curvas que temos no nosso “dicionário” de
curvas splines, que no caso é a variável splines. Para cada curva exibimos uma mensagem
mostrando seus pontos de controle, através de uma janela nova criada pela função alert. Na
centésima vigésima quarta linha chamamos nossa função de iniciação, que inicia todos os
parâmetros e prepara a página que será exibida, e na linha seguinte chamamos nossa função
de animação, responsável por mudanças de cunho dinâmico.
Na centésima vigésima sétima linha criamos a função de iniciação. Criamos um novo
elemento separado utilizando entre aspas simples o div, que nesse caso não é uma tag, porém
realiza a mesma coisa que a tag em HTML div faz, que é separar um pedaço do documento
HTML. Atribuímos esse novo elemento a nossa variável global container e o inserimos no
documento. Criamos outro elemento separado e atribuímos a variável global info,
manipulamos alguns elementos estéticos dessa variável garantindo que ela fique centralizada
no meio da página e no seu topo. Posteriormente, atribuímos textos que tem seu display ao
lado das listas criadas anteriormente no elemento dropdown, após adicionar esses textos
colocamos as variáveis dropdown e assim finalmente aparecem como display as duas listas na
tela. Por fim, na variável info associamos um botão para que toda vez que o usuário deseje
saber os pontos de controle de cada curva spline, ele clique e sejam exibidos esses pontos.
Fazemos isso através de uma tag button e um evento onclick que garante que toda vez que
esse botão seja apertado a função a que ele se referencia seja chamado. No caso, a função
referenciada é a mencionada anteriormente responsável pela exibição dos pontos de controle,
também inserimos essa variável no arquivo de maneira similar a variável container.
Logo depois, atribuímos a nossa variável global renderer a função
THREE.WebGLRenderer, essa função seleciona a plataforma de renderização sendo o
WebGL. Definimos que o que será renderizado tem como tamanhos limites à largura e à
altura da tela, e por fim inserimos essa variável no documento. Criamos uma câmera com
projeção perspectiva. O campo de visão escolhido foi de 75º graus, perspectiva é a largura da
janela divida pela altura dela, e os últimos dos parâmetros delimitam o campo de visão para
perto e para longe, nesse caso 0.1 e 10000. Colocamos seu posicionamento no eixo z em 700,
que garante uma boa exibição de todas as curvas, e enfim atribuímos esse novo elemento
criado a variável global camera. Para auxiliar na movimentação da câmera, atribuímos a
variável global cameraControls um novo elemento criado através da função
THREE.TrackballControls. Essa função recebe como parâmetros a câmera que será
controlada, ou seja, que haverá interação do mouse e elemento/variável do arquivo principal
Departamento de matemática
que interagirá com essas mudanças. A velocidade de rotação da câmera foi definida como um
fator de 5.0, o zoom e a movimentação de objetos encontram-se desativados. Além disso,
fazemos com que assim que o usuário para de clicar na tela a curva pare de se movimentar, e
atualizamos o status da variável global render toda vez que existe uma interação de mouse do
usuário com uma das curvas.
Finalmente, criamos nossa cena e atribuímos a variável global scene. Chamamos nossa
função para desenhar curvas splines, limpamos a tela colocando como cor de fundo branco e
sempre renderizando com essa cor apesar das mudanças. Criamos um evento para manter as
curvas sem serem distorcidas e as interações com o usuário ainda corretas se ocorrer algum
redimensionamento de tela e por fim chamamos a função responsável por renderizar todas
essas informações criadas e iniciadas, nessa função de iniciação.
Na centésima septuagésima sétima linha criamos nossa função responsável pelo
redimensionamento da tela. Essa função garante que caso o tamanho da janela seja mudado,
as curvas splines não sejam distorcidas e todas as outras funcionalidades continuem operando.
Nessa função, nós atualizamos a visualização a câmera através de uma matriz de projeção, o
tamanho do renderer e os controles da câmera, por fim chamamos a função responsável pela
renderização dos objetos e da cena.
Na centésima octagésima sétima linha criamos a função responsável pelas animações
realizadas na cena. Essa função chama o método requestAnimationFrame e passando como
call-back a própria função. Toda vez que essa função estiver sendo executada teremos um
update dos controles da câmera, garantindo que eles se encontrem no lugar correto e que a
câmera ainda continue focando nas curvas.
Por fim, criamos nossa função de renderização, nela passamos a cena e a câmera como
parâmetros para continuarem serem renderizados em tempo contínuo e caso ocorra alguma
alteração, que esse update também seja levado em consideração.
Resultados e Discussão
O programa construído cumpre o propósito de gerar curvas splines que possam ser
vistas tanto em computadores quanto em dispositivos móveis como o celular. O usuário pode
escolher dentre três curvas diferentes, cinco cores para cada curva e ainda ver seus pontos de
controle.
Departamento de matemática
Figura 2 – Página mostrando a curva spline1 sendo desenhada com a cor vermelha.
O menu superior exibe as três possibilidades de curvas, enquanto o inferior exibe as
cinco possibilidades para cor. Se o usuário clicar nos pontos de controle uma janela será
exibida mostrando os pontos de controle de cada curva.
Figura 3 – Menu responsável pela seleção de curvas(tela com zoom para melhor
visualização).
Departamento de matemática
Figura 4 – Menu responsável pela seleção de cores(tela com zoom para melhor
visualização).
Figura 5 – Pontos de controle da curva spline3.
Departamento de matemática
Também percebemos que o programa cumpre sua funcionalidade em dispositivos
móveis, o quê condiz com os requisitos levantados no inicio do projeto.
Figura 6 – Foto de um usuário interagindo através de um celular com o projeto.
O programa construído garante a integridade dos dados e a robustez do sistema como
um todo. O maior problema do código gerado é em relação as suas variáveis globais. Como
toda boa prática de programação, o uso de variáveis globais é um pouco conturbado, pois
oferece a chance de funções do próprio módulo alterarem seu valor de maneira indevida e não
esperada pelo programador, e também porque permitem que módulos externos alterem o valor
dessas variáveis, o que pode acarretar problemas nas funções que as chamam ou interagem
com seu valor. Isso é um problema grave, uma vez que ocorre a quebra o encapsulamento do
código, que é um princípio importante na modularização de programas. Para esse código em
específico não há grandes necessidades de se preocupar com as variáveis globais, visto que os
únicos módulos importados são os da biblioteca THREE, e que eles não mexem com as
variáveis criadas ao longo do programa.
Outro problema ainda relacionado a variáveis globais diz respeito ao fato da sua
alocação de memória. Toda variável local é alocada quando uma função é chamada e em
seguida é desalocada quando essa função termina sua execução. Quando criamos uma
variável global, ela é alocada somente uma vez o que em tese parece bom, pois não
precisamos ficar repetindo blocos de funções que criam e destroem uma variável que talvez
tivesse a mesma funcionalidade ao longo do código. Entretanto, com variáveis globais
justamente por “nunca” serem desalocadas ao longo da execução do código, acaba se
exigindo mais da memória, o que pode influenciar a performance do código e seu tempo de
execução. Novamente, pare este código não ocorrem problemas graves, já que o número de
funções não é muito grande e a quantidade de variáveis globais também é razoável, logo não
se tem perdas consideráveis em relação ao seu desempenho.
Departamento de matemática
Conclusão
O trabalho desenvolvido cumpre o papel proposto e todos os requisitos que foram
levantados inicialmente. O que torna esse projeto extremamente interessante é o fato de
podermos gerar páginas na Web que sejam construídas apenas por códigos HTML e
JavaScript e conseguir renderizar cenas através do WebGL sem criar nenhum aplicativo ou
executável para isso. Essa tecnologia permite que os programas fiquem mais leves e
dinâmicos, além de permitir uma interação mais fácil do programador com as novidades
disponibilizadas pela computação gráfica, afinal é extremamente mais fácil programar
utilizando apenas essas duas linguagens do que aprender novas que realizariam o mesmo
processo através de um aplicativo que demoraria mais tempo para ser construído.
As curvas splines disponíveis podem ser acrescentadas em número em uma versão
posterior do projeto sem grandes dificuldades, assim como as cores e outros elementos.
Porém, diante do intuito que o projeto propunha essas curvas representam o suficiente para
mostrar o que o código gera na tela do computador ou dispositivo móvel do usuário. Outra
mudança interessante que também poderia ser feita, seria alugar/adquirir um domínio na Web
e disponibilizar esse projeto para qualquer pessoa que deseje interagir com ele, pois no
momento somente quem possuem os arquivos fontes conseguem realizar isso. Por fim,
também seria válido reavaliar certas variáveis globais que foram criadas ao longo do caminho,
talvez substitui-las por locais, dessa maneira o código ficará mais limpo e executará de
maneira melhor.
Mesmo sendo de cunho simples, o desenvolvimento desse código de exibição de curvas
é extremamente importante, pois como já mencionado anteriormente essas curvas constroem
grande parte das aplicações de modelagem aplicadas atualmente, como por exemplo, o design
de chassis de carros. Se conseguirmos tornar essa aplicação que é realizada por um executável
no computador, transforma-se em algo online utilizando apenas HTML e JavaScript já
teremos avançado muito em relação a essa representação também em dispositivos móveis.
Portanto, considerar-se-á que o projeto cumpre seu objetivo, ainda existindo coisas que
podem ser feitas para torná-lo melhor. Entretanto, como mencionado anteriormente deve-se
ser considerado que já é de grande avanço que consigamos representar o que foi criado apenas
a partir de arquivos HMTL e JavaScript. Provavelmente, com o avanço da computação gráfica
aplicações como essa, se tornarão cada vez comum, mudando a maneira a qual o ser humano
interagirá com seu celular ou qualquer aparelho portátil.
Referências Bibliográficas
1-MATSUDA,Kouichi; LEA,Rodger. WegGL Programming Guide: Interactive 3D
Graphics Programming with WebGL.2.ed.Ann Arbor: Addison-Wesley Professional,2013.
600p (pp. 25-40)
2-MATSUDA,Kouichi; LEA,Rodger. WegGL Programming Guide: Interactive 3D
Graphics Programming with WebGL.2.ed.Ann Arbor: Addison-Wesley Professional,2013.
600p (pp.50-66)
3-three. js-Documentation.Disponível em: <http://threejs.org/docs/index.html#Manual/
Introduction/Creating_a_scene>. Acesso em: 10 de junho de 2016
Departamento de matemática
Anexo 1
Abaixo segue o código do programa:
<!DOCTYPE html>
<html>
<head>
<title> Visualizacao de splines </title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script src="TrackballControls.js"></script>
<script>
/*var camera, cameraControls,scene,renderer,dropdown,container,info,line,selectspline;
var numPoints = 100;
sampleSpline = new THREE.CatmullRomCurve3([
new THREE.Vector3(-50, 50, 0),
new THREE.Vector3(0, 200, 0),
new THREE.Vector3(150, 150, 0),
new THREE.Vector3(150, 50, 0),
new THREE.Vector3(250, 100, 0),
new THREE.Vector3(250, 300, 0)
]);
sampleSpline2 = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 100),
new THREE.Vector3(0, 400, 0),
new THREE.Vector3(37, 20, 0),
new THREE.Vector3(-150, -75, 0),
new THREE.Vector3(-250, -100, 0),
new THREE.Vector3(90, -75, 0)
]);
sampleSpline3 = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(150, -300, 75),
Departamento de matemática
new THREE.Vector3(-150, -300, -75),
new THREE.Vector3(-150, -50, 0),
new THREE.Vector3(-250, -100, 0),
new THREE.Vector3(100, -300, 0)
]);
var splines ={
spline1: sampleSpline,
spline2: sampleSpline2,
spline3: sampleSpline3
};
var coloroptions = {
vermelho: 0xFF0000,
verde: 0x00FF00,
azul: 0x0000FF,
rosa: 0xFF00FF,
amarelo: 0XFFFF00
};
var dropdown = '<select id="dropdown" onchange="addSpline()">';
var s;
for ( s in splines) {
dropdown += '<option value="' + s + '"';
dropdown += '>' + s + '</option>';
}
dropdown += '</select>';
var dropdown2 = '<select id="dropdown2" onchange="addSpline()">';
var c;
for ( c in coloroptions ) {
dropdown2 += '<option value="' + c + '"';
dropdown2 += '>' + c + '</option>';
}
dropdown2 += '</select>';
function addSpline(){
var value = document.getElementById('dropdown').value;
var value2 = document.getElementById('dropdown2').value;
selectspline = splines[value];
var selectcolor = coloroptions[value2];
Departamento de matemática
if(line)
{
scene.remove(line);
}
var material = new THREE.LineBasicMaterial({
color: selectcolor,
});
var geometry = new THREE.Geometry();
var splinePoints = selectspline.getPoints(numPoints);
for(var i = 0; i < splinePoints.length; i++)
{
geometry.vertices.push(splinePoints[i]);
}
line = new THREE.Line(geometry, material);
scene.add(line);
}
function displayControlPoints()
{
if( selectspline === sampleSpline)
{
alert("Pontos de controle:(-
50,50,0),(0,200,0),(150,150,0),(150,50,0),(250,100,0),(250,300,0)")
}
else if (selectspline === sampleSpline2)
{
alert("Pontos de controle:(0,0,100),(0,400,0),(37,20,0),(-150,-75,0),(-250,-
100,0),(90,-75,0)")
}
else if( selectspline === sampleSpline3)
{
alert("Pontos de controle:(0,0,0),(150,-300,75),(-150,-300,-75),(-150,-
50,0),(-250,-100,0),(100,-300,0)")
}
}
Departamento de matemática
init();
animate();
function init()
{
container = document.createElement('div');
document.body.appendChild(container);
info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '20px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Escolha um spline: ';
info.innerHTML += dropdown;
info.innerHTML +='<br/>Escolha uma cor : ';
info.innerHTML += dropdown2;
info.innerHTML +='<br/><button onclick="displayControlPoints()">Pontos de
Controle</button>'
container.appendChild(info);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild( renderer.domElement );
camera = new
THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.z= 700;
cameraControls = new THREE.TrackballControls(camera,renderer.domElement)
cameraControls.rotateSpeed = 5.0;
cameraControls.noZoom = true;
cameraControls.noPan = true;
cameraControls.staticMoving = true;
cameraControls.dynamicDampingFactor = 0.3;
Departamento de matemática
cameraControls.addEventListener('change',render);
scene = new THREE.Scene();
addSpline();
renderer.setClearColor(0xFFFFFF, 1);
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function onWindowResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
cameraControls.handleResize();
render();
}
function animate()
{
requestAnimationFrame( animate );
cameraControls.update();
}
function render()
{
renderer.render( scene, camera );
}*/
</script>
</body>
</html>
Top Related