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.
166 lines
6.7 KiB
166 lines
6.7 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>Carregando modelos 3D</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Os modelos 3D estão disponíveis em centenas de formatos de arquivo, cada um com diferentes
|
||
|
|
propósitos, recursos variados e complexidade variável. Embora o
|
||
|
|
<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
|
||
|
|
three.js forneça muitos loaders</a>, escolher o formato e o fluxo de trabalho certos economizará tempo e frustração mais tarde.
|
||
|
|
Alguns formatos são difíceis de trabalhar, ineficientes para experiências em tempo real
|
||
|
|
ou simplesmente não são totalmente suportados por enquanto.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Este guia fornece um fluxo de trabalho recomendado para a maioria dos usuários e sugestões
|
||
|
|
do que tentar se as coisas não correrem como o esperado.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Antes de começar</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Se você é iniciante na execução de um servidor local, comece com
|
||
|
|
[link:#manual/introduction/How-to-run-things-locally Como executar localmente]
|
||
|
|
primeiro. Muitos erros comuns de visualização de modelos 3D podem ser evitados hospedando arquivos
|
||
|
|
corretamente.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Fluxo de trabalho recomendado</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Sempre que possível, recomendamos o uso do glTF (GL Transmission Format). Ambas versões do formato,
|
||
|
|
<small>.GLB</small> e <small>.GLTF</small>, são bem suportadas.
|
||
|
|
Como o glTF está focado na entrega de recursos em tempo de execução,
|
||
|
|
ele é compacto para transmitir e rápido para carregar. Seus recursos incluem meshs, materiais,
|
||
|
|
texturas, skins, skeletons, morph targets, animações, luzes e câmeras.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Os arquivos glTF de domínio público estão disponíveis em sites como
|
||
|
|
<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
|
||
|
|
Sketchfab</a>, ou várias ferramentas que incluem exportação glTF:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> da Blender Foundation</li>
|
||
|
|
<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> da Allegorithmic</li>
|
||
|
|
<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> da Foundry</li>
|
||
|
|
<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> da Marmoset</li>
|
||
|
|
<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> da SideFX</li>
|
||
|
|
<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> da MAXON</li>
|
||
|
|
<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> do Khronos Group</li>
|
||
|
|
<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> do Facebook</li>
|
||
|
|
<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> da Analytical Graphics Inc</li>
|
||
|
|
<li>…e <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">muito mais</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Se suas ferramentas preferidas não suportam glTF, considere solicitar exportação de glTF para os autores,
|
||
|
|
ou postar no <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">glTF roadmap thread</a>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Quando o glTF não é uma opção, formatos populares como FBX, OBJ ou COLLADA
|
||
|
|
também estão disponíveis e são mantidos regularmente.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Carregando</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Apenas alguns poucos loaders (por exemplo [page:ObjectLoader]) são incluídos por padrão com o
|
||
|
|
three.js — outros devem ser adicionados ao seu aplicativo individualmente.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Depois de importar um loader você está pronto para adicionar um modelo à sua cena. A sintaxe varia entre
|
||
|
|
loaders diferentes — ao usar outro formato, verifique os exemplos e a documentação para esse loader.
|
||
|
|
Para glTF, o uso com scripts globais ficaria:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
const loader = new GLTFLoader();
|
||
|
|
|
||
|
|
loader.load( 'path/to/model.glb', function ( gltf ) {
|
||
|
|
|
||
|
|
scene.add( gltf.scene );
|
||
|
|
|
||
|
|
}, undefined, function ( error ) {
|
||
|
|
|
||
|
|
console.error( error );
|
||
|
|
|
||
|
|
} );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Veja a documentação [page:GLTFLoader GLTFLoader] para mais detalhes.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Solução de problemas</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Você passou horas modelando uma obra-prima artesanal, você a carrega em
|
||
|
|
uma página web e — ah, não! 😭 Está distorcido, descolorido ou totalmente ausente.
|
||
|
|
Comece com estas etapas de solução de problemas:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
Verifique se há erros no console JavaScript e certifique-se de ter usado um
|
||
|
|
callback `onError` ao chamar `.load()` para logar o resultado.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Visualize o modelo em outro aplicativo. Para glTF, visualizadores drag-and-drop
|
||
|
|
estão disponíveis para
|
||
|
|
<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> e
|
||
|
|
<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>.
|
||
|
|
Se o modelo aparece corretamente em um ou mais aplicativos,
|
||
|
|
<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">registre um bug do three.js</a>.
|
||
|
|
Se o modelo não puder ser mostrado em nenhum aplicativo, recomendamos
|
||
|
|
registrar um bug com o aplicativo usado para criar o modelo.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Tente dimensionar o modelo para cima ou para baixo por um fator de 1.000. Muitos modelos são
|
||
|
|
dimensionados de forma diferente, e modelos grandes podem não aparecer se a câmera estiver
|
||
|
|
dentro do modelo.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Tente adicionar e posicionar uma fonte de luz. O modelo pode estar escondido no escuro.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Procure requisições de textura com falha na aba network, como
|
||
|
|
`"C:\\Path\To\Model\texture.jpg"`. Use caminhos relativos ao seu
|
||
|
|
modelo em vez disso, tal como `images/texture.jpg` —
|
||
|
|
isso pode exigir edição do arquivo de modelo em um editor de texto.
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>Pedindo ajuda</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Se você passou pelo processo de solução de problemas acima e seu modelo
|
||
|
|
ainda não está funcionando, uma abordagem correta para pedir ajuda fará com que você
|
||
|
|
tenha uma solução mais rápida. Poste uma pergunta no
|
||
|
|
<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">fórum three.js</a>
|
||
|
|
e, sempre que possível,
|
||
|
|
inclua seu modelo (ou um modelo mais simples com o mesmo problema) em qualquer formato que
|
||
|
|
você tiver disponível. Inclua informações suficientes para outra pessoa reproduzir
|
||
|
|
o problema rapidamente - idealmente, uma demonstração ao vivo.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|