You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
5.8 KiB
187 lines
5.8 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="pt-br">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Como executar localmente</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Se você usar apenas geometrias procedurais e não carregar nenhuma textura,
|
||
|
|
as páginas web devem funcionar direto do sistema de arquivos, bastando clicar duas vezes
|
||
|
|
no arquivo HTML em um gerenciador de arquivos para então funcionar no navegador (você verá <em>file:///yourFile.html</em> na barra de endereço).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Conteúdo carregado de arquivos externos</h2>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Se você carregar modelos ou texturas de arquivos externos, devido a [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy]
|
||
|
|
dos navegadores, o carregamento de um sistema de arquivos falhará com uma exceção de segurança.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Para resolver isso, execute os arquivos de um servidor web local. Isso permitirá acessar a página por:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<code>http://localhost/yourFile.html</code>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Embora também seja possível alterar as configurações de segurança do navegador ao invés de executar
|
||
|
|
um servidor local, não recomendamos essa abordagem. Isso pode abrir seu dispositivo para vulnerabilidades,
|
||
|
|
se o mesmo navegador é usado para navegação regular na web. O uso de um servidor local é uma prática padrão
|
||
|
|
em desenvolvimento web e explicamos abaixo como instalar e usar um servidor local.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Rodando um servidor local</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Muitas linguagens de programação têm servidores HTTP simples embutidos. Eles não são tão
|
||
|
|
completos quanto servidores de produção como o [link:https://www.apache.org/ Apache] ou o
|
||
|
|
[link:https://nginx.org NGINX], no entanto devem ser suficientes para testar sua aplicação three.js.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Plugins para editores populares de código</h3>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Alguns editores de código tem plugins que irão rodar um servidor simples.
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server] para Visual Studio Code.</li>
|
||
|
|
<li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] para Visual Studio Code.</li>
|
||
|
|
<li>[link:https://atom.io/packages/atom-live-server Live Server] para Atom.</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Servez</h3>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
[link:https://greggman.github.io/servez Servez] é um servidor simples com uma interface gráfica.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Node.js five-server</h3>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Servidor de desenvolvimento com live reload. Para instalar:
|
||
|
|
</p>
|
||
|
|
<code>
|
||
|
|
# Remove live-server (if you have it)
|
||
|
|
npm -g rm live-server
|
||
|
|
|
||
|
|
# Install five-server
|
||
|
|
npm -g i five-server
|
||
|
|
|
||
|
|
# Update five-server (from time to time)
|
||
|
|
npm -g i five-server@latest
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>Para executar (do seu diretório local):</p>
|
||
|
|
<code>five-server . -p 8000</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Node.js http-server</h3>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
O Node.js tem um pacote simples de um servidor HTTP. Para instalar:
|
||
|
|
</p>
|
||
|
|
<code>npm install http-server -g</code>
|
||
|
|
|
||
|
|
<p>Para executar (do seu diretório local):</p>
|
||
|
|
<code>http-server . -p 8000</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Servidor Python</h3>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Se você tem [link:http://python.org/ Python] instalado, deve ser suficiente para
|
||
|
|
executar esse comando (do seu diretório de trabalho):
|
||
|
|
</p>
|
||
|
|
<code>
|
||
|
|
//Python 2.x
|
||
|
|
python -m SimpleHTTPServer
|
||
|
|
|
||
|
|
//Python 3.x
|
||
|
|
python -m http.server
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>Isso vai servir os arquivos do diretório atual para localhost na porta 8000,
|
||
|
|
isto é, na barra de endereço digite:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>http://localhost:8000/</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Servidor Ruby</h3>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Se você tem Ruby instalado, você poder ter o mesmo resultado executando:
|
||
|
|
</p>
|
||
|
|
<code>
|
||
|
|
ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Servidor PHP</h3>
|
||
|
|
<div>
|
||
|
|
<p>PHP também tem um servidor web embutido, começando com php 5.4.0:</p>
|
||
|
|
<code>php -S localhost:8000</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Lighttpd</h3>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Lighttpd é um servidor web de uso geral muito leve. Abordaremos a instalação no OSX
|
||
|
|
com HomeBrew aqui. Ao contrário dos outros servidores discutidos, Lighttpd é um servidor
|
||
|
|
completo de produção.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
Instale via homebrew
|
||
|
|
<code>brew install lighttpd</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Crie um arquivo de configuração chamado lighttpd.conf no diretório onde você irá executar
|
||
|
|
o servidor web. Um exemplo está [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration aqui].
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
No arquivo conf, mude o server.document-root para o diretório do qual você quer servir os arquivos.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Comece com
|
||
|
|
<code>lighttpd -f lighttpd.conf</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Navegue até http://localhost:8000/ e ele servirá os arquivos estáticos do diretório que você
|
||
|
|
escolheu.
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
<h3>IIS</h3>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Se você estiver usando o Microsoft IIS como servidor web. Por favor adicione
|
||
|
|
configurações de tipo MIME em relação à extensão .fbx antes de carregar.
|
||
|
|
</p>
|
||
|
|
<code>File name extension: fbx MIME Type: text/plain</code>
|
||
|
|
<p>
|
||
|
|
Por padrão, o IIS bloqueia downloads de arquivos .fbx e .obj. Você tem que
|
||
|
|
configurar o IIS para habilitar que esse tipo de arquivo possa ser baixado.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<p>
|
||
|
|
Outras alternativas simples são [link:http://stackoverflow.com/q/12905426/24874 discutidas aqui] no StackOverflow.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|