Почетна Преглед Помоћ
Регистрација Пријавите се
samien
/
three.js
огледало од https://github.com/mrdoob/three.js.git
1
0
Креирај огранак 0
Датотеке Дискусије 0 Вики
Преглед изворни кода

docs(zh): translate "Getting Started" manual pages into Chinese (#32996)

DDDDD12138 пре 2 месеци
родитељ
acf55ac61a
комит
d55227ba5c
11 измењених фајлова са 1625 додато и 0 уклоњено
Подељен поглед Покажи статистику Diff
  1. 13 0
      manual/list.json
  2. 179 0
      manual/zh/creating-a-scene.html
  3. 159 0
      manual/zh/creating-text.html
  4. 91 0
      manual/zh/drawing-lines.html
  5. 93 0
      manual/zh/faq.html
  6. 306 0
      manual/zh/installation.html
  7. 142 0
      manual/zh/libraries-and-plugins.html
  8. 151 0
      manual/zh/loading-3d-models.html
  9. 241 0
      manual/zh/uniform-types.html
  10. 190 0
      manual/zh/useful-links.html
  11. 60 0
      manual/zh/webgl-compatibility-check.html

+ 13 - 0
manual/list.json
Прегледај датотеку 

@@ -326,6 +326,19 @@
 
 		}
 
 	},
 
 	"zh": {
 
+		"入门": {
 
+			"安装": "zh/installation",
 
+			"创建场景": "zh/creating-a-scene",
 
+			"创建文本": "zh/creating-text",
 
+			"绘制线条": "zh/drawing-lines",
 
+			"常见问题": "zh/faq",
 
+			"库和插件": "zh/libraries-and-plugins",
 
+			"加载3D模型": "zh/loading-3d-models",
 
+			"Uniform类型": "zh/uniform-types",
 
+			"相关资源": "zh/useful-links",
 
+			"WebGL兼容性检查": "zh/webgl-compatibility-check"
 
+		},
 
+		"---": {},
 
 		"基本": {
 
 			"基础": "zh/fundamentals",
 
 			"响应式设计": "zh/responsive",

+ 179 - 0
manual/zh/creating-a-scene.html
Прегледај датотеку 

@@ -0,0 +1,179 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>创建场景</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – 创建场景">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>创建场景</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <p>本节的目标是简要介绍 three.js。我们将从搭建一个包含旋转立方体的场景开始。页面底部提供了可运行的示例，如果你遇到困难可以参考。</p>
 
+
 
+		<h2>开始之前</h2>
 
+
 
+		<p>
 
+			如果你还没有阅读过<a href="installation.html">安装</a>指南，请先阅读它。我们假设你已经搭建好了相同的项目结构（包括 <i>index.html</i> 和 <i>main.js</i>），安装了 three.js，并且正在使用构建工具，或使用本地服务器并配合 CDN 与 import maps。
 
+		</p>
 
+
 
+		<h2>创建场景</h2>
 
+
 
+		<p>要使用 three.js 显示任何内容，我们需要三样东西：场景（scene）、相机（camera）和渲染器（renderer），这样我们才能通过相机来渲染场景。</p>
 
+
 
+		<p><i>main.js —</i></p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+import * as THREE from 'three';
 
+
 
+const scene = new THREE.Scene();
 
+const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
+
 
+const renderer = new THREE.WebGLRenderer();
 
+renderer.setSize( window.innerWidth, window.innerHeight );
 
+document.body.appendChild( renderer.domElement );
 
+</pre>
 
+
 
+		<p>让我们花点时间解释一下这里发生了什么。我们现在已经设置好了场景、相机和渲染器。</p>
 
+
 
+		<p>three.js 中有几种不同的相机。目前，我们先使用 `PerspectiveCamera`（透视相机）。</p>
 
+
 
+		<p>第一个参数是`视野范围`（field of view）。FOV 是指在任意时刻显示器上能看到的场景范围，值以角度为单位。</p>
 
+
 
+		<p>第二个参数是`宽高比`（aspect ratio）。几乎总是应该使用元素的宽度除以高度，否则会出现类似在宽屏电视上播放老电影的效果——画面看起来会被压扁。</p>
 
+
 
+		<p>接下来的两个参数是近裁剪面（`near`）和远裁剪面（`far`）。也就是说，距离相机比 `far` 更远或比 `near` 更近的物体将不会被渲染。你现在不必担心这个，但在实际应用中可能需要调整这些值以获得更好的性能。</p>
 
+
 
+		<p>接下来是渲染器。除了创建渲染器实例之外，我们还需要设置渲染尺寸。通常建议用应用需要填满的区域宽高——在这里就是浏览器窗口的宽度和高度。对于性能要求较高的应用，你也可以给 `setSize` 传入较小的值，例如 `window.innerWidth/2` 和 `window.innerHeight/2`，这会使应用以四分之一的尺寸进行渲染。</p>
 
+
 
+		<p>如果你希望保持应用的显示尺寸不变，但以较低的分辨率渲染，可以在调用 `setSize` 时将第三个参数 `updateStyle` 设为 false。例如，假设你的 &lt;canvas&gt; 宽高均为 100%，调用 `setSize(window.innerWidth/2, window.innerHeight/2, false)` 将以一半的分辨率渲染应用。</p>
 
+
 
+		<p>最后，我们将 `renderer` 元素添加到 HTML 文档中。这是一个 &lt;canvas&gt; 元素，渲染器用它来向我们展示场景。</p>
 
+
 
+		<p><em>"听起来不错，但你说好的立方体呢？"</em> 现在就来添加它。</p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 
+const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 
+const cube = new THREE.Mesh( geometry, material );
 
+scene.add( cube );
 
+
 
+camera.position.z = 5;
 
+</pre>
 
+
 
+		<p>要创建一个立方体，我们需要一个 `BoxGeometry`（立方体几何体）。这个对象包含了立方体的所有顶点（`vertices`）和面（`faces`）。我们以后会进一步探索这些内容。</p>
 
+
 
+		<p>除了几何体，我们还需要一个材质来为它着色。Three.js 提供了多种材质，这里我们先使用 `MeshBasicMaterial`。所有材质都接受一个属性对象。为了简单起见，我们只提供一个颜色属性 `0x00ff00`，即绿色。颜色的工作方式与 CSS 或 Photoshop 中的十六进制颜色（`hex colors`）相同。</p>
 
+
 
+		<p>我们需要的第三样东西是 `Mesh`（网格）。网格是一个接受几何体并将材质应用于其上的对象，然后我们可以将它插入场景中并自由移动。</p>
 
+
 
+		<p>默认情况下，当我们调用 `scene.add()` 时，添加的对象会被放置在坐标 `(0,0,0)` 处。这会导致相机和立方体重叠在一起。为了避免这种情况，我们只需将相机稍微向外移动一些。</p>
 
+
 
+		<h2>渲染场景</h2>
 
+
 
+		<p>如果你将上面的代码复制到之前创建的 main.js 文件中，你会发现什么都看不到。这是因为我们还没有真正进行渲染。为此，我们需要一个所谓的渲染循环或动画循环。</p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+function animate( time ) {
 
+  renderer.render( scene, camera );
 
+}
 
+renderer.setAnimationLoop( animate );
 
+</pre>
 
+
 
+		<p>这会创建一个循环，让渲染器在每次屏幕刷新时绘制场景（在普通屏幕上这意味着每秒 60 次）。如果你是浏览器游戏开发的新手，可能会问<em>"为什么不直接用 setInterval？"</em>当然可以，但 `WebGLRenderer` 内部使用的 `requestAnimationFrame` 有很多优势。其中最重要的一点是，当用户切换到其他浏览器标签页时它会自动暂停，从而不会浪费宝贵的处理资源和电池寿命。</p>
 
+
 
+		<h2>让立方体动起来</h2>
 
+
 
+		<p>如果你将上面所有的代码都插入到文件中，你应该能看到一个绿色的立方体。让我们给它添加旋转，使它更有趣一些。</p>
 
+
 
+		<p>在 `animate` 函数中的 `renderer.render` 调用之前添加以下代码：</p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+cube.rotation.x = time / 2000;
 
+cube.rotation.y = time / 1000;
 
+</pre>
 
+
 
+		<p>这段代码会在每一帧执行（通常每秒 60 次），让立方体产生流畅的旋转动画。基本上，在应用运行期间你想要移动或改变的任何东西都需要通过动画循环来实现。当然，你可以在其中调用其他函数，这样就不会让 `animate` 函数变得过于冗长。</p>
 
+
 
+		<h2>最终效果</h2>
 
+		<p>恭喜！你已经完成了你的第一个 three.js 应用。虽然很简单，但万事总要有个开始。</p>
 
+
 
+		<p>完整代码如下，也可以作为可编辑的 [link:https://jsfiddle.net/zycqb61k/ 在线示例] 查看。试着修改代码来加深理解。</p>
 
+
 
+		<p><i>index.html —</i></p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+&lt;!DOCTYPE html&gt;
 
+&lt;html lang="en"&gt;
 
+  &lt;head&gt;
 
+    &lt;meta charset="utf-8"&gt;
 
+    &lt;title&gt;My first three.js app&lt;/title&gt;
 
+    &lt;style&gt;
 
+      body { margin: 0; }
 
+    &lt;/style&gt;
 
+  &lt;/head&gt;
 
+  &lt;body&gt;
 
+    &lt;script type="module" src="/main.js"&gt;&lt;/script&gt;
 
+  &lt;/body&gt;
 
+&lt;/html&gt;
 
+</pre>
 
+
 
+		<p><i>main.js —</i></p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+import * as THREE from 'three';
 
+
 
+const scene = new THREE.Scene();
 
+const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
+
 
+const renderer = new THREE.WebGLRenderer();
 
+renderer.setSize( window.innerWidth, window.innerHeight );
 
+renderer.setAnimationLoop( animate );
 
+document.body.appendChild( renderer.domElement );
 
+
 
+const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 
+const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 
+const cube = new THREE.Mesh( geometry, material );
 
+scene.add( cube );
 
+
 
+camera.position.z = 5;
 
+
 
+function animate( time ) {
 
+
 
+  cube.rotation.x = time / 2000;
 
+  cube.rotation.y = time / 1000;
 
+
 
+  renderer.render( scene, camera );
 
+
 
+}
 
+</pre>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 159 - 0
manual/zh/creating-text.html
Прегледај датотеку 

@@ -0,0 +1,159 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>创建文本</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – 创建文本">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>创建文本</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <div>
 
+            <p>
 
+              在 three.js 应用中，你经常需要用到文本——下面是几种实现方式。
 
+            </p>
 
+          </div>
 
+
 
+          <h2>1. DOM + CSS</h2>
 
+          <div>
 
+            <p>
 
+              使用 HTML 通常是添加文本最简单、最快捷的方式。大多数 three.js 示例中的描述性叠加层都采用了这种方法。
 
+            </p>
 
+            <p>你可以向某个元素添加内容，例如：</p>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+&lt;div id="info"&gt;Description&lt;/div&gt;
 
+</pre>
 
+            <p>
 
+              然后使用 CSS 将其绝对定位，并通过 z-index 使其显示在所有其他元素之上，尤其是在 three.js 全屏运行时。
 
+            </p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+#info {
 
+  position: absolute;
 
+  top: 10px;
 
+  width: 100%;
 
+  text-align: center;
 
+  z-index: 100;
 
+  display:block;
 
+}
 
+</pre>
 
+
 
+          </div>
 
+
 
+
 
+          <h2>2. 使用 `CSS2DRenderer` 或 `CSS3DRenderer`</h2>
 
+          <div>
 
+            <p>
 
+              使用这些渲染器可以将包含在 DOM 元素中的高质量文本绘制到 three.js 场景中。
 
+              这与方法 1 类似，但元素能更紧密、更动态地融入场景。
 
+            </p>
 
+          </div>
 
+
 
+
 
+          <h2>3. 将文本绘制到 canvas 上并用作 `Texture`</h2>
 
+          <div>
 
+            <p>如果你希望在 three.js 场景中的平面上轻松绘制文本，可以使用此方法。</p>
 
+          </div>
 
+
 
+
 
+          <h2>4. 在你常用的 3D 应用中创建模型并导出到 three.js</h2>
 
+          <div>
 
+            <p>如果你更喜欢使用 3D 建模应用来制作模型，然后导入到 three.js 中，可以使用此方法。</p>
 
+          </div>
 
+
 
+
 
+          <h2>5. 程序化文本几何体</h2>
 
+          <div>
 
+            <p>
 
+              如果你更倾向于完全在 THREE.js 中工作，或者需要创建程序化、动态的 3D 文本几何体，
 
+              可以创建一个网格，其几何体是 THREE.TextGeometry 的实例：
 
+            </p>
 
+            <p>
 
+              <code>new THREE.TextGeometry( text, parameters );</code>
 
+            </p>
 
+            <p>
 
+              不过要使其正常工作，TextGeometry 的 `font` 参数需要设置为一个 THREE.Font 实例。
 
+
 
+              请参阅 `TextGeometry` 页面，了解如何设置字体、各参数的说明，以及 THREE.js 发行版自带的 JSON 字体列表。
 
+            </p>
 
+
 
+            <h3>示例</h3>
 
+
 
+            <p>
 
+              [example:webgl_geometry_text WebGL / geometry / text]<br />
 
+              [example:webgl_shadowmap WebGL / shadowmap]
 
+            </p>
 
+
 
+            <p>
 
+              如果 Typeface 不可用，或你想使用其中没有的字体，可参考一个教程，
 
+              其中包含用于 Blender 的 Python 脚本，可将文本导出为 Three.js 的 JSON 格式：
 
+              [link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
 
+            </p>
 
+
 
+          </div>
 
+
 
+
 
+          <h2>6. 位图字体</h2>
 
+          <div>
 
+            <p>
 
+              BMFonts（位图字体）允许将字形批量合并到单个 BufferGeometry 中。BMFont 渲染支持自动换行、字母间距、字距调整、带标准导数的有符号距离场、多通道有符号距离场、多纹理字体等。
 
+              参阅 [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] 或 [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text]。
 
+            </p>
 
+            <p>
 
+              现成的字体可以在 [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts] 等项目中找到，
 
+              你也可以从任何 .TTF 字体创建自己的位图字体，并优化为仅包含项目所需的字符。
 
+            </p>
 
+            <p>
 
+              一些有用的工具：
 
+            </p>
 
+            <ul>
 
+              <li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>（基于 Web）</i></li>
 
+              <li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>（命令行）</i></li>
 
+              <li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>（桌面应用）</i></li>
 
+            </ul>
 
+          </div>
 
+
 
+
 
+          <h2>7. Troika Text</h2>
 
+          <div>
 
+            <p>
 
+              [link:https://www.npmjs.com/package/troika-three-text troika-three-text] 该包使用与 BMFonts 类似的技术渲染高质量抗锯齿文本，但可以直接使用任何 .TTF 或 .WOFF 字体文件，无需离线预生成字形纹理。它还提供了以下功能：
 
+            </p>
 
+            <ul>
 
+              <li>描边、投影和弯曲等效果</li>
 
+              <li>可以应用任何 three.js 材质，甚至是自定义 ShaderMaterial</li>
 
+              <li>支持连字、连写字母书写体系（如阿拉伯文），以及从右到左/双向排版</li>
 
+              <li>针对大量动态文本进行了优化，大部分工作在 Web Worker 中完成，避免占用主线程</li>
 
+            </ul>
 
+          </div>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 91 - 0
manual/zh/drawing-lines.html
Прегледај датотеку 

@@ -0,0 +1,91 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>绘制线条</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – 绘制线条">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>绘制线条</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <p>
 
+            假设你想绘制一条线或一个圆，而不是线框 `Mesh`。
 
+            首先我们需要设置渲染器、场景和相机（参见"创建场景"页面）。
 
+          </p>
 
+
 
+          <p>以下是我们将使用的代码：</p>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+const renderer = new THREE.WebGLRenderer();
 
+renderer.setSize( window.innerWidth, window.innerHeight );
 
+document.body.appendChild( renderer.domElement );
 
+
 
+const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
 
+camera.position.set( 0, 0, 100 );
 
+camera.lookAt( 0, 0, 0 );
 
+
 
+const scene = new THREE.Scene();
 
+</pre>
 
+          <p>接下来我们需要定义一个材质。对于线条，需要使用 `LineBasicMaterial` 或 `LineDashedMaterial`。</p>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+// 创建一个蓝色的 LineBasicMaterial
 
+const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
 
+</pre>
 
+
 
+          <p>
 
+            有了材质之后，我们还需要一个带有顶点的几何体：
 
+          </p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+const points = [];
 
+points.push( new THREE.Vector3( - 10, 0, 0 ) );
 
+points.push( new THREE.Vector3( 0, 10, 0 ) );
 
+points.push( new THREE.Vector3( 10, 0, 0 ) );
 
+
 
+const geometry = new THREE.BufferGeometry().setFromPoints( points );
 
+</pre>
 
+
 
+          <p>注意，线条是在每对相邻顶点之间绘制的，而不会连接首尾两个顶点（即线条不是闭合的）。</p>
 
+
 
+          <p>现在我们有了两条线段的顶点和一个材质，可以将它们组合成一条线：</p>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+const line = new THREE.Line( geometry, material );
 
+</pre>
 
+          <p>剩下的就是将其添加到场景中并调用 `renderer.render()`。</p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+scene.add( line );
 
+renderer.render( scene, camera );
 
+</pre>
 
+
 
+          <p>现在你应该能看到一个由两条蓝色线段组成的向上箭头。</p>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 93 - 0
manual/zh/faq.html
Прегледај датотеку 

@@ -0,0 +1,93 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>常见问题</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – 常见问题">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>常见问题</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <h2>哪种 3D 模型格式的支持最完善？</h2>
 
+          <div>
 
+            <p>
 
+              推荐使用 glTF（GL Transmission Format）格式来导入和导出资源。由于 glTF 专注于运行时资源传输，它体积紧凑、加载速度快。
 
+            </p>
 
+            <p>
 
+              three.js 也提供了许多其他常见格式的加载器，如 FBX、Collada 和 OBJ 等。尽管如此，你应该始终优先在项目中建立基于 glTF 的工作流。
 
+            </p>
 
+          </div>
 
+
 
+          <h2>为什么示例中有 meta viewport 标签？</h2>
 
+          <div>
 
+            <pre class="prettyprint notranslate lang-js" translate="no">&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</pre>
 
+
 
+              <p>这些标签用于控制移动端浏览器的视口大小和缩放比例（在移动端，页面内容的渲染尺寸可能与可见视口不同）。</p>
 
+
 
+              <p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
 
+
 
+              <p>[link:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Viewport_meta_tag MDN: 使用 viewport meta 标签]</p>
 
+          </div>
 
+
 
+          <h2>如何在窗口缩放时保持场景比例？</h2>
 
+          <p>
 
+            我们希望所有物体无论距离相机多远，在窗口缩放时都保持相同的显示大小。
 
+
 
+            解决这个问题的关键公式是给定距离下的可见高度：
 
+
 
+            <pre class="prettyprint notranslate lang-js" translate="no">visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;</pre>
 
+            如果我们将窗口高度增加一定百分比，那么我们希望所有距离下的可见高度也增加相同的百分比。
 
+
 
+            这无法通过改变相机位置来实现，而需要改变相机的视野范围（field-of-view）。
 
+            [link:http://jsfiddle.net/Q4Jpu/ 示例]。
 
+          </p>
 
+
 
+          <h2>为什么我的物体有一部分不可见？</h2>
 
+          <p>
 
+            这可能是由于面剔除（face culling）导致的。每个面都有一个朝向，决定了哪一侧是正面、哪一侧是背面。默认情况下，剔除会移除背面。
 
+            要检查是否是这个问题，可以将材质的 side 属性设置为 THREE.DoubleSide。
 
+            <pre class="prettyprint notranslate lang-js" translate="no">material.side = THREE.DoubleSide</pre>
 
+          </p>
 
+
 
+          <h2>为什么 three.js 对无效输入有时会返回奇怪的结果？</h2>
 
+          <p>
 
+            出于性能考虑，three.js 在大多数情况下不会验证输入。确保所有输入有效是你的应用的责任。
 
+          </p>
 
+
 
+          <h2>能否在 Node.js 中使用 three.js？</h2>
 
+          <p>
 
+            由于 three.js 是为 Web 构建的，它依赖于浏览器和 DOM API，而这些在 Node.js 中并不总是存在。部分问题可以通过使用
 
+            [link:https://github.com/stackgl/headless-gl headless-gl] 和 [link:https://github.com/rstacruz/jsdom-global jsdom-global] 等 shim（兼容层）来解决，
 
+            或者用自定义替代方案替换 `TextureLoader` 等组件。其他 DOM API 可能与使用它们的代码深度耦合，更难处理。我们欢迎简洁且易于维护的 Pull Request 来改善 Node.js 支持，但建议先提交 issue 讨论你的改进方案。
 
+          </p>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 306 - 0
manual/zh/installation.html
Прегледај датотеку 

@@ -0,0 +1,306 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>安装</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – 安装">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>安装</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <h2>项目结构</h2>
 
+
 
+          <p>
 
+            每个 three.js 项目至少需要一个 HTML 文件来定义网页，以及一个 JavaScript 文件来运行你的 three.js 代码。下面的结构和命名方式并非强制要求，但为了保持一致性，本指南将始终使用这种方式。
 
+          </p>
 
+
 
+          <ul>
 
+            <li>
 
+              <i>index.html</i>
 
+    <pre class="prettyprint notranslate lang-js" translate="no">
 
+&lt;!DOCTYPE html&gt;
 
+&lt;html lang="en"&gt;
 
+  &lt;head&gt;
 
+    &lt;meta charset="utf-8"&gt;
 
+    &lt;title&gt;My first three.js app&lt;/title&gt;
 
+    &lt;style&gt;
 
+      body { margin: 0; }
 
+    &lt;/style&gt;
 
+  &lt;/head&gt;
 
+  &lt;body&gt;
 
+    &lt;script type="module" src="/main.js"&gt;&lt;/script&gt;
 
+  &lt;/body&gt;
 
+&lt;/html&gt;
 
+    </pre>
 
+  </li>
 
+  <li>
 
+    <i>main.js</i>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+import * as THREE from 'three';
 
+
 
+...
 
+</pre>
 
+            </li>
 
+            <li>
 
+              <i>public/</i>
 
+              <ul>
 
+                <li>
 
+                  <i>public/</i> 文件夹有时也被称为"static"（静态）文件夹，因为其中的文件会原封不动地发布到网站上。通常纹理、音频和 3D 模型会放在这里。
 
+                </li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+
 
+          <p>
 
+            现在我们已经搭建好了基本的项目结构，接下来需要一种方式在本地运行项目并通过浏览器访问它。安装和本地开发可以通过 npm 和构建工具来完成，也可以通过从 CDN 导入 three.js 来实现。下面将分别介绍这两种方式。
 
+          </p>
 
+
 
+          <h2>方式一：使用 NPM 和构建工具安装</h2>
 
+
 
+          <h3>开发</h3>
 
+
 
+          <p>
 
+            从 [link:https://www.npmjs.com/ npm 包注册表] 安装并使用 [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC 构建工具] 对大多数用户来说是推荐的方式——你的项目依赖越多，就越可能遇到静态托管难以解决的问题。使用构建工具时，导入本地 JavaScript 文件和 npm 包无需 import map 即可直接使用。
 
+          </p>
 
+
 
+
 
+          <ol>
 
+            <li>
 
+              安装 [link:https://nodejs.org/ Node.js]。我们需要它来管理依赖和运行构建工具。
 
+            </li>
 
+            <li>
 
+              <p>
 
+                在项目文件夹中打开 [link:https://www.joshwcomeau.com/javascript/terminal-for-js-devs/ 终端]，安装 three.js 和构建工具 [link:https://vitejs.dev/ Vite]。Vite 仅在开发过程中使用，不会成为最终网页的一部分。如果你更喜欢使用其他构建工具也没问题——我们支持任何能导入 [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC ES Modules] 的现代构建工具。
 
+              </p>
 
+<pre class="prettyprint notranslate" translate="no">
 
+# three.js
 
+npm install --save three
 
+
 
+# vite
 
+npm install --save-dev vite
 
+</pre>
 
+              <aside>
 
+                <details>
 
+                  <summary>安装后项目中多出了 <i>node_modules/</i> 和 <i>package.json</i>，它们是什么？</summary>
 
+                  <p>
 
+                    npm 使用 <i>package.json</i> 来记录你安装的每个依赖的版本。如果有其他人和你一起开发项目，他们只需运行 <i>npm install</i> 就能安装相同版本的依赖。如果你使用版本控制，请提交 <i>package.json</i>。
 
+                  </p>
 
+                  <p>
 
+                    npm 将每个依赖的代码安装到新的 <i>node_modules/</i> 文件夹中。当 Vite 构建你的应用时，它会看到对 'three' 的导入，并自动从这个文件夹中获取 three.js 文件。<i>node_modules/</i> 文件夹仅在开发时使用，不应上传到你的网站托管服务商或提交到版本历史中。
 
+                  </p>
 
+                </details>
 
+                <details>
 
+                  <summary>使用 <i>jsconfig</i> 或 <i>tsconfig</i> 改善编辑器自动补全</summary>
 
+                  <p>
 
+                    在项目根目录放置一个 <i>jsconfig.json</i>（TypeScript 项目则使用 <i>tsconfig.json</i>）。添加以下配置可以帮助编辑器定位 three.js 文件，从而增强自动补全功能。
 
+                  </p>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+{
 
+  "compilerOptions": {
 
+    // other options...
 
+    "paths": {
 
+      "three/webgpu": ["node_modules/three/build/three.webgpu.js"],
 
+      "three/tsl": ["node_modules/three/build/three.tsl.js"],
 
+    },
 
+  }
 
+}
 
+</pre>
 
+                </details>
 
+              </aside>
 
+            </li>
 
+            <li>
 
+              在终端中运行：
 
+              <pre class="prettyprint notranslate" translate="no">npx vite </pre>
 
+              <aside>
 
+                <details>
 
+                  <summary><i>npx</i> 是什么？</summary>
 
+                  <p>
 
+                    npx 随 Node.js 一起安装，用于运行 Vite 等命令行程序，这样你就不必自己在 <i>node_modules/</i> 中查找正确的文件。如果你愿意，也可以将 [link:https://vitejs.dev/guide/#command-line-interface Vite 的常用命令] 添加到 [link:https://docs.npmjs.com/cli/v9/using-npm/scripts package.json:scripts] 列表中，然后使用 <i>npm run dev</i> 来代替。
 
+                  </p>
 
+                </details>
 
+              </aside>
 
+            </li>
 
+            <li>
 
+              如果一切顺利，你会在终端中看到一个类似 <i>http://localhost:5173</i> 的 URL，打开该 URL 即可查看你的 Web 应用。
 
+            </li>
 
+          </ol>
 
+
 
+          <p>
 
+            页面将是空白的——你已经准备好<a href="creating-a-scene.html">创建一个场景</a>了。
 
+          </p>
 
+
 
+          <p>
 
+            如果你想在继续之前了解更多关于这些工具的信息，请参阅：
 
+          </p>
 
+
 
+          <ul>
 
+            <li>
 
+              [link:https://threejs-journey.com/lessons/local-server three.js journey: 本地服务器]
 
+            </li>
 
+            <li>
 
+              [link:https://cn.vite.dev/guide/cli Vite: 命令行接口]
 
+            </li>
 
+            <li>
 
+              [link:https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management MDN: 包管理基础]
 
+            </li>
 
+          </ul>
 
+
 
+          <h3>生产环境</h3>
 
+
 
+          <p>
 
+            稍后，当你准备部署 Web 应用时，只需让 Vite 执行生产构建——<i>npx vite build</i>。应用使用的所有内容都会被编译、优化并复制到 <i>dist/</i> 文件夹中。该文件夹的内容即可直接托管到你的网站上。
 
+          </p>
 
+
 
+          <h2>方式二：从 CDN 导入</h2>
 
+
 
+          <h3>开发</h3>
 
+
 
+          <p>不使用构建工具进行安装需要对上述项目结构做一些修改。</p>
 
+
 
+          <ol>
 
+            <li>
 
+              <p>
 
+                我们在 <i>main.js</i> 中从 'three'（一个 npm 包）导入了代码，但浏览器并不知道这意味着什么。在 <i>index.html</i> 中，我们需要添加一个 [link:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap import map] 来定义从哪里获取该包。将以下代码放在 <i>&lt;head>&lt/head></i> 标签内，样式之后。
 
+              </p>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+&lt;script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js",
 
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/examples/jsm/"
 
+  }
 
+}
 
+&lt;/script>
 
+</pre>
 
+              <p>
 
+                别忘了将 <i>&lt;version&gt;</i> 替换为 three.js 的实际版本号，例如 <i>"v0.149.0"</i>。最新版本可以在 [link:https://www.npmjs.com/package/three?activeTab=versions npm 版本列表] 中找到。
 
+              </p>
 
+            </li>
 
+            <li>
 
+              <p>
 
+                我们还需要运行一个<i>本地服务器</i>来将这些文件托管到浏览器可以访问的 URL 上。虽然技术上可以双击 HTML 文件在浏览器中打开，但出于安全原因，我们后续要实现的重要功能在以这种方式打开页面时无法正常工作。
 
+              </p>
 
+              <p>
 
+                安装 [link:https://nodejs.org/ Node.js]，然后在项目目录中运行 [link:https://www.npmjs.com/package/serve serve] 来启动本地服务器：
 
+              </p>
 
+              <pre class="prettyprint notranslate" translate="no">npx serve .</pre>
 
+            </li>
 
+            <li>
 
+              如果一切顺利，你会在终端中看到一个类似 http://localhost:3000 的 URL，打开该 URL 即可查看你的 Web 应用。
 
+            </li>
 
+          </ol>
 
+
 
+          <p>
 
+            页面将是空白的——你已经准备好 [link:#manual/introduction/Creating-a-scene 创建一个场景] 了。
 
+          </p>
 
+
 
+          <p>
 
+            还有许多其他本地静态服务器可供选择——有些使用 Node.js 以外的语言，有些是桌面应用程序。它们的工作方式基本相同，下面列出了一些替代方案。
 
+          </p>
 
+
 
+          <details>
 
+            <summary>更多本地服务器</summary>
 
+
 
+            <h3>命令行</h3>
 
+
 
+            <p>命令行本地服务器从终端窗口运行。可能需要先安装相应的编程语言。</p>
 
+
 
+            <ul>
 
+              <li><i>npx http-server</i> (Node.js)</li>
 
+              <li><i>npx five-server</i> (Node.js)</li>
 
+              <li><i>python -m SimpleHTTPServer</i> (Python 2.x)</li>
 
+              <li><i>python -m http.server</i> (Python 3.x)</li>
 
+              <li><i>php -S localhost:8000</i> (PHP 5.4+)</li>
 
+            </ul>
 
+
 
+
 
+            <h3>图形界面</h3>
 
+
 
+            <p>图形界面本地服务器以应用程序窗口的形式在你的计算机上运行，可能带有用户界面。</p>
 
+
 
+            <ul>
 
+              <li>[link:https://greggman.github.io/servez Servez]</li>
 
+            </ul>
 
+
 
+            <h3>代码编辑器插件</h3>
 
+
 
+            <p>一些代码编辑器提供插件，可按需启动简单服务器。</p>
 
+
 
+            <ul>
 
+              <li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server]，适用于 Visual Studio Code</li>
 
+              <li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server]，适用于 Visual Studio Code</li>
 
+              <li>[link:https://atom.io/packages/atom-live-server Live Server]，适用于 Atom</li>
 
+            </ul>
 
+
 
+
 
+          </details>
 
+
 
+          <h3>生产环境</h3>
 
+
 
+          <p>
 
+            当你准备部署 Web 应用时，只需将源文件推送到你的网站托管服务商——无需构建或编译任何内容。这种方式的缺点是，你需要小心地确保 import map 与应用所需的所有依赖（以及依赖的依赖！）同步更新。如果托管这些依赖的 CDN 暂时宕机，你的网站也会停止工作。
 
+          </p>
 
+
 
+          <p>
 
+            <i><b>重要提示：</b>所有依赖都应从同一版本的 three.js 和同一个 CDN 导入。混合使用不同来源的文件可能导致代码被重复引入，甚至以意想不到的方式破坏应用。</i>
 
+          </p>
 
+
 
+          <h2>附加组件</h2>
 
+
 
+          <p>
 
+            three.js 开箱即用地包含了 3D 引擎的基础功能。其他 three.js 组件——如控制器、加载器和后期处理效果——属于 [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm addons/] 目录的一部分。附加组件不需要单独<i>安装</i>，但需要单独<i>导入</i>。
 
+          </p>
 
+
 
+          <p>
 
+            下面的示例展示了如何导入 three.js 以及 `OrbitControls` 和 `GLTFLoader` 附加组件。在必要时，每个附加组件的文档或示例中也会提到这一点。
 
+          </p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+import * as THREE from 'three';
 
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
+
 
+const controls = new OrbitControls( camera, renderer.domElement );
 
+const loader = new GLTFLoader();
 
+</pre>
 
+
 
+          <p>
 
+            也有一些优秀的第三方项目可用于 three.js。这些需要单独安装——请参阅<a href="libraries-and-plugins">库和插件</a>。
 
+          </p>
 
+
 
+          <h2>下一步</h2>
 
+
 
+          <p>
 
+            你现在已经准备好<a href="creating-a-scene.html">创建一个场景</a>了。
 
+          </p>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 142 - 0
manual/zh/libraries-and-plugins.html
Прегледај датотеку 

@@ -0,0 +1,142 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>库与插件</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – 库与插件">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>库与插件</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <p class="desc">
 
+            这里列出由外部开发、与 three.js 兼容的库和插件。此列表及相关包由社区维护，不能保证是最新的。如需更新该列表，请提交 PR！
 
+          </p>
 
+
 
+          <h3>物理引擎</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
 
+            <li>[link:https://enable3d.io/ enable3d]</li>
 
+            <li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
 
+            <li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
 
+            <li>[link:https://rapier.rs/ rapier]</li>
 
+            <li>[link:https://github.com/jrouwe/JoltPhysics.js Jolt]</li>
 
+
 
+          </ul>
 
+
 
+          <h3>后处理</h3>
 
+
 
+          <p>
 
+            除了 [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing three.js 官方后处理效果]之外，外部库还提供对一些额外效果和框架的支持。
 
+          </p>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
 
+          </ul>
 
+
 
+          <h3>相交检测与射线检测性能</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
 
+          </ul>
 
+
 
+          <h3>路径追踪</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
 
+          </ul>
 
+
 
+          <h3>文件格式</h3>
 
+
 
+          <p>
 
+            除了 [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders three.js 官方加载器]之外，外部库还提供对一些额外格式的支持。
 
+          </p>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
 
+            <li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
 
+            <li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
 
+            <li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
 
+          </ul>
 
+
 
+          <h3>几何体</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
 
+          </ul>
 
+
 
+          <h3>3D 文本与布局</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
 
+            <li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
 
+          </ul>
 
+
 
+          <h3>粒子系统</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
 
+            <li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
 
+          </ul>
 
+
 
+          <h3>逆运动学</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
 
+            <li>[link:https://github.com/lo-th/fullik fullik]</li>
 
+            <li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
 
+          </ul>
 
+
 
+          <h3>游戏 AI</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://mugen87.github.io/yuka/ yuka]</li>
 
+            <li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
 
+            <li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
 
+          </ul>
 
+
 
+          <h3>封装与框架</h3>
 
+
 
+          <ul>
 
+            <li>[link:https://aframe.io/ A-Frame]</li>
 
+            <li>[link:https://lume.io/ Lume] - 基于 Three 构建的 3D 图形 HTML 元素。</li>
 
+            <li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - 基于 Three 构建的 3D 图形 React 组件。</li>
 
+            <li>[link:https://threepipe.org/ threepipe] - 使用 three.js 进行渲染的多功能 3D 查看器框架。</li>
 
+            <li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
 
+            <li>[link:https://threlte.xyz/ Threlte] - 基于 Three 构建的 3D 图形 Svelte 组件。</li>
 
+            <li>[link:https://needle.tools/ Needle Engine]</li>
 
+            <li>[link:https://tresjs.org/ tresjs] - 基于 Three 构建的 3D 图形 Vue 组件。</li>
 
+            <li>[link:https://giro3d.org Giro3D] - 基于 Three 构建的多功能框架，用于可视化和交互地理空间 2D、2.5D 和 3D 数据。</li>
 
+            <li>[link:https://zap.works/mattercraft/ Mattercraft] - 基于 three.js 的浏览器端可视化编辑器，用于 AR、WebXR 和 3D 网页内容，支持实时预览和物理引擎。</li>
 
+          </ul>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 151 - 0
manual/zh/loading-3d-models.html
Прегледај датотеку 

@@ -0,0 +1,151 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>加载 3D 模型</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – 加载 3D 模型">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>加载 3D 模型</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <p>
 
+            3D 模型有数百种文件格式，每种格式都有不同的用途、各异的特性和不同的复杂度。虽然
 
+            <a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
 
+            three.js 提供了许多加载器</a>，但选择正确的格式和工作流可以节省大量时间，避免后续的麻烦。某些格式难以使用、不适合实时场景，或者目前尚未完全支持。
 
+          </p>
 
+
 
+          <p>
 
+            本指南提供了适用于大多数用户的推荐工作流，以及在遇到问题时的排查建议。
 
+          </p>
 
+
 
+          <h2>开始之前</h2>
 
+
 
+          <p>
 
+            如果你是第一次搭建本地服务器，请先阅读<a href="installation.html">安装</a>页面。正确托管文件可以避免许多查看 3D 模型时的常见错误。
 
+          </p>
 
+
 
+          <h2>推荐工作流</h2>
 
+
 
+          <p>
 
+            我们推荐尽可能使用 glTF（GL Transmission Format）格式。该格式的 <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>
 
+
 
+          <ul>
 
+            <li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> by the Blender Foundation</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://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> by SideFX</li>
 
+            <li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> by MAXON</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>&hellip;以及<a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">更多工具</a></li>
 
+          </ul>
 
+
 
+          <p>
 
+            如果你常用的工具不支持 glTF，可以考虑向作者请求添加 glTF 导出功能，或者在
 
+            <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">glTF 路线图讨论帖</a>中发帖。
 
+          </p>
 
+
 
+          <p>
 
+            当 glTF 不可用时，也可以使用 FBX、OBJ 或 COLLADA 等常见格式，它们同样可用且持续维护中。
 
+          </p>
 
+
 
+          <h2>加载</h2>
 
+
 
+          <p>
 
+            three.js 默认只包含少数加载器（如 `ObjectLoader`），其他加载器需要单独添加到你的应用中。
 
+          </p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
+</pre>
 
+
 
+          <p>
 
+            导入加载器后，就可以向场景中添加模型了。不同加载器的语法各不相同——使用其他格式时，请查阅对应加载器的示例和文档。对于 glTF，使用全局脚本的方式如下：
 
+          </p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+const loader = new GLTFLoader();
 
+
 
+loader.load( 'path/to/model.glb', function ( gltf ) {
 
+
 
+  scene.add( gltf.scene );
 
+
 
+}, undefined, function ( error ) {
 
+
 
+  console.error( error );
 
+
 
+} );
 
+</pre>
 
+
 
+          <h2>故障排查</h2>
 
+
 
+          <p>
 
+            你花了好几个小时精心制作了一个模型，将它加载到网页中，结果——天哪！😭 它变形了、颜色不对，或者完全看不到。请按以下步骤排查：
 
+          </p>
 
+
 
+          <ol>
 
+            <li>
 
+              检查 JavaScript 控制台是否有错误，并确保在调用 `.load()` 时使用了 `onError` 回调来记录错误信息。
 
+            </li>
 
+            <li>
 
+              在其他应用中查看模型。对于 glTF，可以使用
 
+              <a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> 和
 
+              <a href="https://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>
 
+              尝试将模型放大或缩小 1000 倍。许多模型的缩放比例不同，如果相机位于模型内部，大型模型可能不会显示。
 
+            </li>
 
+            <li>
 
+              尝试添加并调整光源位置。模型可能隐藏在黑暗中。
 
+            </li>
 
+            <li>
 
+              在网络面板中查找失败的纹理请求，例如 `"C:\\Path\To\Model\texture.jpg"`。请使用相对于模型的路径，如 `images/texture.jpg`——这可能需要在文本编辑器中修改模型文件。
 
+            </li>
 
+          </ol>
 
+
 
+          <h2>寻求帮助</h2>
 
+
 
+          <p>
 
+            如果你已经完成了上述排查步骤，模型仍然无法正常工作，正确的求助方式能帮你更快找到解决方案。在
 
+            <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js 论坛</a>上发帖提问，并尽可能附上你的模型（或具有相同问题的简化模型），提供你手头的所有格式。请包含足够的信息以便他人快速复现问题——最好提供一个在线演示。
 
+          </p>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 241 - 0
manual/zh/uniform-types.html
Прегледај датотеку 

@@ -0,0 +1,241 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>Uniform 类型</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – Uniform 类型">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>Uniform 类型</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <p>
 
+            每个 uniform 都必须有一个 `value` 属性。其值的类型必须与 GLSL 代码中 uniform 变量的类型相对应，具体的 GLSL 基本类型对应关系见下表。Uniform 结构体和数组同样受支持。基本类型的 GLSL 数组必须指定为对应 THREE 对象的数组，或者包含所有对象数据的扁平数组。换言之，GLSL 基本类型本身不应再嵌套一层数组。此规则不具有传递性。例如，一个由 `vec2` 数组组成的数组，每个子数组包含五个向量，则必须是一个数组的数组，其中每个元素可以是五个 `Vector2` 对象或十个 `number`。
 
+          </p>
 
+
 
+          <table>
 
+            <thead>
 
+              <tr>
 
+                <th>GLSL 类型</th>
 
+                <th>JavaScript 类型</th>
 
+              </tr>
 
+            </thead>
 
+            <tbody>
 
+              <tr>
 
+                <td>int</td>
 
+                <td>Number</td>
 
+              </tr>
 
+              <tr>
 
+                <td>uint</td>
 
+                <td>Number</td>
 
+              </tr>
 
+              <tr>
 
+                <td>float</td>
 
+                <td>Number</td>
 
+              </tr>
 
+              <tr>
 
+                <td>bool</td>
 
+                <td>Boolean</td>
 
+              </tr>
 
+              <tr>
 
+                <td>bool</td>
 
+                <td>Number</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec2</td>
 
+                <td>Vector2</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec2</td>
 
+                <td>Float32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec2</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec3</td>
 
+                <td>Vector3</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec3</td>
 
+                <td>Color</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec3</td>
 
+                <td>Float32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec3</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec4</td>
 
+                <td>Vector4</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec4</td>
 
+                <td>Quaternion</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec4</td>
 
+                <td>Float32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>vec4</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>mat2</td>
 
+                <td>Float32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>mat2</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>mat3</td>
 
+                <td>Matrix3</td>
 
+              </tr>
 
+              <tr>
 
+                <td>mat3</td>
 
+                <td>Float32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>mat3</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>mat4</td>
 
+                <td>Matrix4</td>
 
+              </tr>
 
+              <tr>
 
+                <td>mat4</td>
 
+                <td>Float32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>mat4</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>ivec2, bvec2</td>
 
+                <td>Float32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>ivec2, bvec2</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>ivec3, bvec3</td>
 
+                <td>Int32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>ivec3, bvec3</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>ivec4, bvec4</td>
 
+                <td>Int32Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>ivec4, bvec4</td>
 
+                <td>Array (*)</td>
 
+              </tr>
 
+              <tr>
 
+                <td>sampler2D</td>
 
+                <td>Texture</td>
 
+              </tr>
 
+              <tr>
 
+                <td>samplerCube</td>
 
+                <td>CubeTexture</td>
 
+              </tr>
 
+            </tbody>
 
+          </table>
 
+
 
+          <p>
 
+            (*) 对于相同 GLSL 类型的（最内层）数组（维度）同样适用，其中包含数组中所有向量或矩阵的分量。
 
+          </p>
 
+
 
+          <h2>结构化 Uniform</h2>
 
+
 
+          <p>
 
+            有时你可能希望在着色器代码中将 uniform 组织为 `struct`（结构体）。必须使用以下方式，`three.js` 才能正确处理结构化的 uniform 数据。
 
+          </p>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+uniforms = {
 
+  data: {
 
+    value: {
 
+      position: new Vector3(),
 
+      direction: new Vector3( 0, 0, 1 )
 
+    }
 
+  }
 
+};
 
+</pre>
 
+          此定义可以映射到以下 GLSL 代码：
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+struct Data {
 
+  vec3 position;
 
+  vec3 direction;
 
+};
 
+uniform Data data;
 
+</pre>
 
+
 
+          <h2>带数组的结构化 Uniform</h2>
 
+
 
+          <p>
 
+            也可以在数组中管理 `structs`。此用法的语法如下：
 
+          </p>
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+const entry1 = {
 
+  position: new Vector3(),
 
+  direction: new Vector3( 0, 0, 1 )
 
+};
 
+const entry2 = {
 
+  position: new Vector3( 1, 1, 1 ),
 
+  direction: new Vector3( 0, 1, 0 )
 
+};
 
+
 
+uniforms = {
 
+  data: {
 
+    value: [ entry1, entry2 ]
 
+  }
 
+};
 
+</pre>
 
+          此定义可以映射到以下 GLSL 代码：
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+struct Data {
 
+  vec3 position;
 
+  vec3 direction;
 
+};
 
+uniform Data data[ 2 ];
 
+</pre>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 190 - 0
manual/zh/useful-links.html
Прегледај датотеку 

@@ -0,0 +1,190 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>相关资源</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – 相关资源">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>相关资源</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <p class="desc">
 
+            以下是一些在学习 three.js 时可能对你有用的链接合集。<br />
 
+            如果你想在此添加内容，或者认为以下某个链接已经过时或失效，请点击右下角的"编辑"按钮进行修改！<br /><br />
 
+
 
+            另外请注意，由于 three.js 处于快速开发中，其中许多链接可能包含过时的信息——如果某些内容未按预期工作，或与这些链接中描述的不一致，请检查浏览器控制台中的警告或错误，同时查阅相关文档页面。
 
+          </p>
 
+
 
+          <h2>帮助论坛</h2>
 
+          <p>
 
+            Three.js 官方使用[link:https://discourse.threejs.org/ 论坛]和 [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] 来处理帮助请求。如果你需要帮助，请前往这些平台。请不要在 GitHub 上提交 issue 来寻求帮助。
 
+          </p>
 
+
 
+          <h2>教程与课程</h2>
 
+
 
+          <h3>three.js 入门</h3>
 
+          <ul>
 
+            <li>
 
+              [link:https://threejs.org/manual/#en/fundamentals Three.js 基础入门课程]
 
+            </li>
 
+            <li>
 
+              [link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL]，作者 [link:https://codepen.io/rachsmith/ Rachel Smith]。
 
+            </li>
 
+            <li>
 
+              [link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
 
+            </li>
 
+          </ul>
 
+
 
+          <h3>更深入/进阶的文章与课程</h3>
 
+          <ul>
 
+            <li>
 
+              [link:https://threejs-journey.com/ Three Journey] 课程，作者 [link:https://bruno-simon.com/ Bruno Simon] - 手把手教初学者使用 Three.js
 
+            </li>
 
+            <li>
 
+              [link:https://discoverthreejs.com/ Discover three.js]
 
+            </li>
 
+            <li>
 
+              [link:http://blog.cjgammon.com/ 系列教程]，作者 [link:http://www.cjgammon.com/ CJ Gammon]。
 
+            </li>
 
+            <li>
 
+              [link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js]。
 
+            </li>
 
+           <li>
 
+             [link:https://www.udacity.com/course/interactive-3d-graphics--cs291 Interactive 3D Graphics] - Udacity 上的免费课程，讲授 3D 图形学基础，使用 three.js 作为编程工具。
 
+           </li>
 
+           <li>
 
+            [Link:https://aerotwist.com/tutorials/ Aerotwist] 教程，作者 [link:https://github.com/paullewis/ Paul Lewis]。
 
+           </li>
 
+           <li>
 
+             [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js 书架] - 想找更多关于 three.js 或计算机图形学的资源？来看看社区推荐的书单吧。
 
+           </li>
 
+          </ul>
 
+
 
+          <h2>新闻与动态</h2>
 
+          <ul>
 
+            <li>
 
+              [link:https://twitter.com/hashtag/threejs Three.js on Twitter]
 
+            </li>
 
+            <li>
 
+              [link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 
+            </li>
 
+            <li>
 
+              [link:http://www.reddit.com/r/webgl/ WebGL on reddit]
 
+            </li>
 
+          </ul>
 
+
 
+          <h2>示例</h2>
 
+          <ul>
 
+            <li>
 
+              [link:https://github.com/edwinwebb/three-seed/ three-seed] - 使用 ES6 和 Webpack 的 three.js 起步项目
 
+            </li>
 
+            <li>
 
+              [link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoski 的示例] - 使用 three.js r60 构建的适合初学者的示例合集。
 
+            </li>
 
+            <li>
 
+              [link:https://threejs.org/examples/ three.js 官方示例] - 这些示例作为 three.js 仓库的一部分维护，始终使用最新版本的 three.js。
 
+            </li>
 
+            <li>
 
+              [link:https://raw.githack.com/mrdoob/three.js/dev/examples/ three.js 官方开发分支示例] - 与上面相同，但使用的是 three.js 的开发分支，用于在开发过程中检查一切是否正常工作。
 
+            </li>
 
+          </ul>
 
+
 
+        <h2>工具</h2>
 
+        <ul>
 
+          <li>
 
+            [link:https://github.com/tbensky/physgl physgl.org] - 基于 three.js 封装的 JavaScript 前端，为学习物理和数学的学生提供 WebGL 图形支持。
 
+          </li>
 
+          <li>
 
+            [link:https://whsjs.readme.io/ Whitestorm.js] – 模块化的 three.js 框架，带有 AmmoNext 物理插件。
 
+          </li>
 
+          <li>
 
+            [link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
 
+          </li>
 
+          <li>
 
+            [link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js]。
 
+          </li>
 
+          <li>
 
+            [link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - 着色器语言语法高亮。
 
+            <br />
 
+            [link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - 使用注释为标签模板字符串提供着色器语言语法高亮，如 glsl.js。
 
+          </li>
 
+          <li>
 
+            [link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
 
+          </li>
 
+        </ul>
 
+
 
+        <h2>WebGL 参考</h2>
 
+          <ul>
 
+            <li>
 
+            [link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - 包含所有 WebGL 和 GLSL 关键字、术语、语法和定义的参考卡片。
 
+            </li>
 
+          </ul>
 
+
 
+        <h2>旧链接</h2>
 
+        <p>
 
+          这些链接出于历史原因保留——你可能仍然会觉得它们有用，但请注意其中的信息可能涉及非常旧的 three.js 版本。
 
+        </p>
 
+
 
+        <ul>
 
+          <li>
 
+            [link:https://www.youtube.com/watch?v=Dir4KO9RdhM AlterQualia at WebGL Camp 3]
 
+          </li>
 
+          <li>
 
+            [link:http://yomotsu.github.io/threejs-examples/ Yomotsu 的示例] - 使用 three.js r45 的示例合集。
 
+          </li>
 
+          <li>
 
+            [link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js]，作者 [link:http://github.com/kig/ Ilmari Heikkinen]（幻灯片）。
 
+          </li>
 
+          <li>
 
+            [link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js]，作者 [link:http://github.com/yomotsu Akihiro Oyamada]（幻灯片）。
 
+          </li>
 
+          <li>
 
+            [link:https://www.youtube.com/watch?v=VdQnOaolrPA Trigger Rally]，作者 [link:https://github.com/jareiko jareiko]（视频）。
 
+          </li>
 
+          <li>
 
+            [link:http://blackjk3.github.io/threefab/ ThreeFab] - 场景编辑器，维护至 three.js r50 左右。
 
+          </li>
 
+          <li>
 
+            [link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks]，作者 [link:https://github.com/BKcore BKcore]
 
+          </li>
 
+          <li>
 
+            [link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]，作者 [link:http://github.com/nrocy Paul King]
 
+          </li>
 
+          <li>
 
+            [link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]，作者 [link:https://github.com/BKcore BKcore]
 
+          </li>
 
+          <li>
 
+            [link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - 日语 three.js 教程
 
+          </li>
 
+         </ul>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

+ 60 - 0
manual/zh/webgl-compatibility-check.html
Прегледај датотеку 

@@ -0,0 +1,60 @@
 
+<!DOCTYPE html><html lang="zh"><head>
 
+    <meta charset="utf-8">
 
+    <title>WebGL 兼容性检查</title>
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+    <meta name="twitter:card" content="summary_large_image">
 
+    <meta name="twitter:site" content="@threejs">
 
+    <meta name="twitter:title" content="Three.js – WebGL 兼容性检查">
 
+    <meta property="og:image" content="https://threejs.org/files/share.png">
 
+    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 
+    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
 
+
 
+    <link rel="stylesheet" href="../resources/lesson.css">
 
+    <link rel="stylesheet" href="../resources/lang.css">
 
+<script type="importmap">
 
+{
 
+  "imports": {
 
+    "three": "../../build/three.module.js"
 
+  }
 
+}
 
+</script>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="lesson-title">
 
+        <h1>WebGL 兼容性检查</h1>
 
+      </div>
 
+      <div class="lesson">
 
+        <div class="lesson-main">
 
+
 
+          <p>
 
+            尽管这个问题越来越少见，但某些设备或浏览器可能仍然不支持 WebGL 2。以下方法可以检测是否支持 WebGL 2，并在不支持时向用户显示提示信息。请导入 WebGL 支持检测模块，并在渲染任何内容之前运行以下代码。
 
+          </p>
 
+
 
+<pre class="prettyprint notranslate lang-js" translate="no">
 
+import WebGL from 'three/addons/capabilities/WebGL.js';
 
+
 
+if ( WebGL.isWebGL2Available() ) {
 
+
 
+  // 在此处调用初始化函数或执行其他初始化操作
 
+  animate();
 
+
 
+} else {
 
+
 
+  const warning = WebGL.getWebGL2ErrorMessage();
 
+  document.getElementById( 'container' ).appendChild( warning );
 
+
 
+}
 
+</pre>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  <script src="../resources/prettify.js"></script>
 
+  <script src="../resources/lesson.js"></script>
 
+
 
+
 
+
 
+
 
+</body></html>

粤ICP备19079148号