javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!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/Installation installation]
		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>&hellip;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>