Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 8a5ca09d 编写于 作者: D Don McCurdy
浏览文件
操作

Add example to model loading page.

上级 0dc83308
隐藏空白更改
内联 并排
Showing with 235 addition and 184 deletion
docs/manual/en/introduction/Loading-3D-models.html
浏览文件 @ 8a5ca09d
......@@ -2,127 +2,174 @@
<html lang="en">
<head>
<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" />
<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" />
</head>
<body>
<h1>[name]</h1>
<br />
<p>
3D models are available in hundreds of file formats, each with different
purposes, assorted features, and varying complexity. Although
<a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders" target="_blank" rel="noopener">
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>
<li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter" target="_blank" rel="noopener">glTF-Blender-Exporter</a> by the Khronos Group</li>
<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>
<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>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>
<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>
<h1>[name]</h1>
<br />
<p>
3D models are available in hundreds of file formats, each with different
purposes, assorted features, and varying complexity. Although
<a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders" target="_blank" rel="noopener">
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>
<li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter" target="_blank" rel="noopener">glTF-Blender-Exporter</a> by the Khronos Group</li>
<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>
<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>
Only a few loaders ([page:ObjectLoader] and [page:JSONLoader]) are included by default with
three.js — others should be added to your page individually. Depending on your
preference and comfort with build tools, choose one of the following:
</p>
<code>
// global script
&lt;script src="GLTFLoader.js"&gt;&lt;/script&gt;
// commonjs
var THREE = window.THREE = require('three');
require('three/examples/js/loaders/GLTFLoader');
</code>
<p>
Currently three.js examples are not available as ES modules (import &hellip; from '&hellip;').
Several workarounds are discussed in
<a href="https://github.com/KhronosGroup/glTF/issues/9562" target="_blank" rel="noopener">#9562</a>.
</p>
<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
loader. For glTF, basic usage would be:
</p>
<code>
var loader = new THREE.GLTFLoader();
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>
<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>
</body>
......
docs/manual/zh/introduction/Loading-3D-models.html
浏览文件 @ 8a5ca09d
......@@ -2,107 +2,111 @@
<html lang="en">
<head>
<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" />
<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" />
</head>
<body>
<h1>载入3D模型（[name]）</h1>
<br />
<h1>载入3D模型（[name]）</h1>
<br />
<p>
<p>
3D模型目前的有成千上万种格式可供选择，但每一种格式都具有不同的目的、用途以及复杂性。
虽然<a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders" target="_blank" rel="noopener">
虽然<a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders" target="_blank" rel="noopener">
three.js已经提供了多种导入工具</a>
但是选择正确的文件格式以及工作流程将可以节省很多时间，以及避免很多挫折。某些格式难以使用，或者实时体验效率低下，或者目前尚未得到完全支持。
</p>
</p>
<p>
<p>
对大多数用户，本指南向你推荐了一个工作流程，并向你提供了一些当没有达到预期效果时的建议。
</p>
</p>
<h2>在开始之前</h2>
<h2>在开始之前</h2>
<p>
如果你是第一次运行一个本地服务器，可以先阅读[link:#manual/introduction/How-to-run-things-locally how to run things locally]。
正确地托管文件，可以避免很多查看3D模型时的常见错误。
</p>
<p>
如果你是第一次运行一个本地服务器，可以先阅读[link:#manual/introduction/How-to-run-things-locally how to run things locally]。
正确地托管文件，可以避免很多查看3D模型时的常见错误。
</p>
<h2>推荐的工作流程</h2>
<h2>推荐的工作流程</h2>
<p>
如果有可能的话，我们推荐使用glTF（gl传输格式）。<small>.GLB</small>和<small>.GLTF</small>是这种格式的这两种不同版本，
都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。
功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。
</p>
<p>
如果有可能的话，我们推荐使用glTF（gl传输格式）。<small>.GLB</small>和<small>.GLTF</small>是这种格式的这两种不同版本，
都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。
功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。
</p>
<p>
公共领域的glTF文件可以在网上找到，例如
<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
Sketchfab</a>，或者很多工具包含了glTF的导出功能：
</p>
<p>
公共领域的glTF文件可以在网上找到，例如
<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
Sketchfab</a>，或者很多工具包含了glTF的导出功能：
</p>
<ul>
<li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter" target="_blank" rel="noopener">glTF-Blender-Exporter</a> by the Khronos Group</li>
<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>
<li>……<a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">还有更多</a></li>
</ul>
<ul>
<li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter" target="_blank" rel="noopener">glTF-Blender-Exporter</a> by the Khronos Group</li>
<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>
<li>……<a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">还有更多</a></li>
</ul>
<p>
倘若你所喜欢的工具不支持glTF格式，请考虑向该工具的作者请求glTF导出功能，
或者在<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>贴出你的想法。
<p>
倘若你所喜欢的工具不支持glTF格式，请考虑向该工具的作者请求glTF导出功能，
或者在<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>贴出你的想法。
</p>
</p>
<p>
当glTF不可用的时候，诸如FBX、OBJ或者COLLADA等等其它广受欢迎的格式在Three.js中也是可以使用、并且定期维护的。
</p>
<p>
当glTF不可用的时候，诸如FBX、OBJ或者COLLADA等等其它广受欢迎的格式在Three.js中也是可以使用、并且定期维护的。
</p>
<h2>故障排除</h2>
<h2>Loading</h2>
<p>
你花了几个小时亲手建了一个堪称杰作的模型，现在你把它给导入到网页中——
哦，天呐~😭它导入以后完全失真了、材质贴图丢了、或者说整个模型完全丢失了！<br>
接下来我们来按照下面的步骤排除故障：
</p>
<p>TODO.</p>
<ol>
<li>
<h2>故障排除</h2>
<p>
你花了几个小时亲手建了一个堪称杰作的模型，现在你把它给导入到网页中——
哦，天呐~😭它导入以后完全失真了、材质贴图丢了、或者说整个模型完全丢失了！<br>
接下来我们来按照下面的步骤排除故障：
</p>
<ol>
<li>
在Javascript的Console中查找错误，并确定当你调用<em>.load()</em>的时候，使用了<em>onError</em>回调函数来输出结果。
</li>
<li>
</li>
<li>
请在别的应用程序中查看3D模型。对于glTF格式的模型来说，可以直接在下面的应用程序中进行查看：
<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a>和
<a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>。
<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a>和
<a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>。
如果该模型能够在一个或者更多应用程序里正确地呈现，请<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">点击这里向three.js提交Bug报告</a>。
如果模型不能在任意一个应用程序里显示，我们强烈鼓励你向我们提交Bug报告，并告知我们你的模型是使用哪一款应用程序创建的。
</li>
<li>
</li>
<li>
尝试将模型放大或缩小到原来的1000倍。许多模型的缩放比例各不相同，倘若摄像机位于相机内，则大型模型将可能不会显示。
</li>
<li>
</li>
<li>
在网络面板中查找失败的纹理贴图请求，像<em>C:\\Path\To\Model\texture.jpg</em>。使用相对于你的模型的文件路径，例如
<em>images/texture.jpg</em>——这或许需要在文本编辑器中来对模型文件进行修改。
</li>
</ol>
</li>
</ol>
<h2>请求帮助</h2>
<h2>请求帮助</h2>
<p>
<p>
倘若你已经尝试经历了以上故障排除的过程，但是你的模型仍然无法工作，寻求正确的方法来获得帮助将使您更快地获得解决方案。
您可以将您的问题发布到<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a>，
同时，尽可能将你的模型（或者一个简单的、具有相同问题的模型）包含在你能够使用的任何格式中，为其他人提供足够的信息，以便快速重现这个问题——最好是一个能够现场演示的Demo。
</p>
</p>
</body>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或