Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
Loading-3D-models.html 6.3 KB
Newer Older
M
r93  
Mr.doob 已提交
1 2 3 4 
<!DOCTYPE html>
<html lang="en">

<head>
M
r98  
Mr.doob 已提交
5 6 7 8 9 
	<meta charset="utf-8">
	<base href="../../../" />
	<script src="list.js"></script>
	<script src="page.js"></script>
	<link type="text/css" rel="stylesheet" href="page.css" />
M
r93  
Mr.doob 已提交
10 11 12 
</head>

<body>
M
r98  
Mr.doob 已提交
13 14 15 16 17 
	<h1>[name]</h1>

	<p>
		3D models are available in hundreds of file formats, each with different
		purposes, assorted features, and varying complexity. Although
M
r114  
Mr.doob 已提交
18 
		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
M
r98  
Mr.doob 已提交
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 
		three.js provides many loaders</a>, choosing the right format and
		workflow will save time and frustration later on. Some formats are
		difficult to work with, inefficient for realtime experiences, or simply not
		fully supported at this time.
	</p>

	<p>
		This guide provides a workflow recommended for most users, and suggestions
		for what to try if things don't go as expected.
	</p>

	<h2>Before we start</h2>

	<p>
		If you're new to running a local server, begin with
		[link:#manual/introduction/How-to-run-things-locally how to run things locally]
		first. Many common errors viewing 3D models can be avoided by hosting files
		correctly.
	</p>

	<h2>Recommended workflow</h2>

	<p>
		Where possible, we recommend using glTF (GL Transmission Format). Both
		<small>.GLB</small> and <small>.GLTF</small> versions of the format are
		well supported. Because glTF is focused on runtime asset delivery, it is
		compact to transmit and fast to load. Features include meshes, materials,
		textures, skins, skeletons, morph targets, animations, lights, and
		cameras.
	</p>

	<p>
		Public-domain glTF files are available on sites like
		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
		Sketchfab</a>, or various tools include glTF export:
	</p>

	<ul>
M
r100  
Mr.doob 已提交
57 
		<li><a href="https://github.com/KhronosGroup/glTF-Blender-IO" target="_blank" rel="noopener">glTF-Blender-IO</a> by the Khronos Group</li>
M
r98  
Mr.doob 已提交
58 59 60 61 62 63 
		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by the Khronos Group</li>
		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by Facebook</li>
		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by Analytical Graphics Inc</li>
		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> by Allegorithmic</li>
		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
M
r100  
Mr.doob 已提交
64 
		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> by SideFX</li>
M
r102.1  
Mr.doob 已提交
65 
		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> by MAXON</li>
M
r98  
Mr.doob 已提交
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 
		<li>&hellip;and <a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">many more</a></li>
	</ul>

	<p>
		If your preferred tools do not support glTF, consider requesting glTF
		export from the authors, or posting on
		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
	</p>

	<p>
		When glTF is not an option, popular formats such as FBX, OBJ, or COLLADA
		are also available and regularly maintained.
	</p>

	<h2>Loading</h2>

	<p>
M
r99  
Mr.doob 已提交
83 
		Only a few loaders (e.g. [page:ObjectLoader]) are included by default with
M
r117  
Mr.doob 已提交
84 
		three.js — others should be added to your app individually.
M
r98  
Mr.doob 已提交
85 86 87 
	</p>

	<code>
M
Merge pull request #19767 from parke/patch-1  
Mr.doob 已提交
88 
		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
M
r107  
Mr.doob 已提交
89 
	</code>
M
r98  
Mr.doob 已提交
90 91 92 93 

	<p>
		Once you've imported a loader, you're ready to add a model to your scene. Syntax varies among
		different loaders — when using another format, check the examples and documentation for that
M
r107  
Mr.doob 已提交
94 
		loader. For glTF, usage with global scripts would be:
M
r98  
Mr.doob 已提交
95 96 97 
	</p>

	<code>
M
Merge pull request #19767 from parke/patch-1  
Mr.doob 已提交
98 
		var loader = new GLTFLoader();
M
r98  
Mr.doob 已提交
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 

		loader.load( 'path/to/model.glb', function ( gltf ) {

			scene.add( gltf.scene );

		}, undefined, function ( error ) {

			console.error( error );

		} );
	</code>

	<p>
		See [page:GLTFLoader GLTFLoader documentation] for further details.
	</p>

	<h2>Troubleshooting</h2>

	<p>
		You've spent hours modeling an artisanal masterpiece, you load it into
		the webpage, and — oh no! 😭 It's distorted, miscolored, or missing entirely.
		Start with these troubleshooting steps:
	</p>

	<ol>
		<li>
			Check the JavaScript console for errors, and make sure you've used an
			<em>onError</em> callback when calling <em>.load()</em> to log the result.
		</li>
		<li>
			View the model in another application. For glTF, drag-and-drop viewers
			are available for
			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> and
			<a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. If the model
			appears correctly in one or more applications,
			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">file a bug against three.js</a>.
			If the model cannot be shown in any application, we strongly encourage
			filing a bug with the application used to create the model.
		</li>
		<li>
			Try scaling the model up or down by a factor of 1000. Many models are
			scaled differently, and large models may not appear if the camera is
			inside the model.
		</li>
M
r109  
Mr.doob 已提交
143 144 145 
		<li>
			Try to add and position a light source. The model may be hidden in the dark.
		</li>
M
r98  
Mr.doob 已提交
146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 
		<li>
			Look for failed texture requests in the network tab, like
			<em>C:\\Path\To\Model\texture.jpg</em>. Use paths relative to your
			model instead, such as <em>images/texture.jpg</em> — this may require
			editing the model file in a text editor.
		</li>
	</ol>

	<h2>Asking for help</h2>

	<p>
		If you've gone through the troubleshooting process above and your model
		still isn't working, the right approach to asking for help will get you to
		a solution faster. Post a question on the
		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a> and, whenever possible,
		include your model (or a simpler model with the same problem) in any formats
		you have available. Include enough information for someone else to reproduce
		the issue quickly — ideally, a live demo.
	</p>
M
r93  
Mr.doob 已提交
165 166 167 

</body>
M
r94  
Mr.doob 已提交
168 
</html>