Manual: Improve Chinese translation. (#27991)

* Manual: Fix shadows.html

* Manual: Improve Chinese translation.

manual/list.json

@@ -331,7 +331,7 @@
 		"优化": {
 			"大量对象的优化": "zh/optimize-lots-of-objects",
 			"优化对象的同时保持动画效果": "zh/optimize-lots-of-objects-animated",
-			"Using OffscreenCanvas in a Web Worker": "zh/offscreencanvas"
+			"在Web Worker中使用离屏渲染": "zh/offscreencanvas"
 		},
 		"解决方案": {
 			"加载 .OBJ 文件": "zh/load-obj",
@@ -341,19 +341,19 @@
 			"多个画布, 多个场景": "zh/multiple-scenes",
 			"鼠标选取对象": "zh/picking",
 			"后期处理": "zh/post-processing",
-			"Using Shadertoy shaders": "zh/shadertoy",
+			"使用Shadertoy中的着色器": "zh/shadertoy",
 			"对齐HTML元素到3D对象": "zh/align-html-elements-to-3d",
 			"使用纹理索引来拾取和着色": "zh/indexed-textures",
 			"使用Canvas生成动态纹理": "zh/canvas-textures",
 			"广告牌(Billboards)": "zh/billboards",
 			"释放资源": "zh/cleanup",
-			"Making Voxel Geometry (Minecraft)": "zh/voxel-geometry",
-			"Start making a Game": "zh/game"
+			"体素几何体 (Minecraft)": "zh/voxel-geometry",
+			"来试试做一个游戏吧": "zh/game"
 		},
 		"WebXR": {
-			"VR - Basics": "zh/webxr-basics",
-			"VR - Look To Select": "zh/webxr-look-to-select",
-			"VR - Point To Select": "zh/webxr-point-to-select"
+			"VR - 基础": "zh/webxr-basics",
+			"VR - 用目光进行选择": "zh/webxr-look-to-select",
+			"VR - 用点进行选择": "zh/webxr-point-to-select"
 		},
 		"参考": {
 			"材质特性表": "zh/material-table"

manual/zh/load-obj.html

@@ -479,7 +479,7 @@ Three.js一般是以Y为上（up）。有些建模包默认是Z为上，有些
 <p>还记得我们在<a href="textures.html">关于纹理的文章</a>中提到的纹理占用内存，所以一个50k的JPG扩展到4096x4096会下载很快，但仍然需要大量的内存。</p>
 </li>
 </ul>
-<p>我最不想展示的就是旋转风车。不幸的是. obj文件没有层次结构（hierarchy）。这意味着每个风车模型基本上都是一个单独的网格（mesh）。你不能转动风车的叶片，因为它们没有与建筑物的其他部分分开。</p>
+<p>最后我想展示的是让风车旋转起来。不幸的是. obj文件没有层次结构（hierarchy）。这意味着每个风车模型基本上都是一个单独的网格（mesh）。你不能转动风车的叶片，因为它们没有与建筑物的其他部分分开。</p>
 <p>这就是为什么.obj不是一个好的3D格式的主要原因之一。如果我猜一下，它比其他格式更常见的原因是它很简单，而且不支持很多特性。特别是如果你在做一些静态的物体，比如建筑图像，没必要动起来。</p>
 <p>接下来我们将尝试加载一个gLTF场景。gLTF格式支持更多特性。</p>
 

manual/zh/multiple-scenes.html

@@ -215,25 +215,26 @@ Renderer.### <a href="">setViewport</a> ( x : Integer, y : Integer, width : Inte
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
 +scene.background = new THREE.Color('red');
 </pre>
-<p>此时，我们快速滚动屏幕，就会发现这个问题。屏幕滚动时的动画放慢十倍后的效果如下：</p>
+<p>此时，我们<a href="../examples/multiple-scenes-v2.html" target="_blank">快速滚动屏幕</a>，就会发现这个问题。屏幕滚动时的动画放慢十倍后的效果如下：</p>
 <div class="threejs_center"><img class="border" src="../resources/images/multi-view-skew.gif"></div>
 <p>为了解决这个问题，先将<code class="notranslate" translate="no">Canvas</code>的定位方式由<code class="notranslate" translate="no">position: fixed</code> 改为<code class="notranslate" translate="no">position: absolute</code>。</p>
 <pre class="prettyprint showlinemods notranslate lang-css" translate="no">#c {
 -  position: fixed;
 +  position: absolute;
 </pre>
-<p>为了解决这个问题，先将<code class="notranslate" translate="no">Canvas</code>的定位方式由<code class="notranslate" translate="no">position: fixed</code> 改为<code class="notranslate" translate="no">position: absolute</code>。</p>
+</pre>
+<p>然后，我们将设置<code class="notranslate" translate="no">Canvas</code>的<code class="notranslate" translate="no">transform</code>来移动它，使画布的顶部位于页面当前滚动到的任何部分的顶部。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
   ...
 
   const transform = `translateY(${window.scrollY}px)`;
   renderer.domElement.style.transform = transform;
 </pre>
-<p><code class="notranslate" translate="no">position: fixed</code> 会完全禁用画布的滚动，无论其他元素是否已经滚动到它的上；
+<p><code class="notranslate" translate="no">position: fixed</code> 会完全禁用画布的滚动，无论其他元素是否已经滚动经过它；
 <code class="notranslate" translate="no">position: absolute</code>则会保持画布与页面的其余部分一起滚动，这意味着我们绘制的任何东西都会与页面一起滚动，就算还未完全渲染出来。当场景完成渲染之后，然后移动画布，场景会与页面被滚动后的位置相匹配，并重新渲染，这就意味着，只有窗口的边缘会显示出一些还未被渲染的数据，当时页面中的场景不会出现这种现象。下面时利用以上方法后的效果（动画同样放慢了10倍）。</p>
 <h2 id="-">让它更加通用</h2>
 <p>现在，我们已经实现了在一个<code class="notranslate" translate="no">Canvas</code>中渲染多个场景的功能，接下来就来处理一下让它更加好用些。</p>
-<p>我们可以封装一个主渲染函数用来管理整个<code class="notranslate" translate="no">Canvas</code>,并定义一个场景元素列表和他们对应的场景初始化函数。对于每个元素，它将检查该元素是否滚动到了可视区域并调用相应的场景初始化函数。这样我们就构建了一个渲染系统，在这个系统中每个独立的<code class="notranslate" translate="no">scenes</code>都会在它们各自定义的空间内独立渲染且不互相影响。</p>
+<p>我们可以封装一个主渲染函数用来管理整个<code class="notranslate" translate="no">Canvas</code>，并定义一个场景元素列表和他们对应的场景初始化函数。对于每个元素，它将检查该元素是否滚动到了可视区域并调用相应的场景初始化函数。这样我们就构建了一个渲染系统，在这个系统中每个独立的<code class="notranslate" translate="no">scenes</code>都会在它们各自定义的空间内独立渲染且不互相影响。</p>
 <p>主渲染函数如下：</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const sceneElements = [];
 function addScene(elem, fn) {

manual/zh/optimize-lots-of-objects.html

@@ -159,8 +159,7 @@ function hsl(h, s, l) {
 }
 </pre>
 <p>看过来, 当材质加载完成后才调用<code class="notranslate" translate="no">render</code>方法. 我们这么做是因为使用了<a href="rendering-on-demand.html">按需渲染</a>中的方法, 而不是连续渲染. 这样我们仅仅需要在材质加载后渲染一遍就好. </p>
-<p>然后我们需要对代码做一些改动, 每个数据都画一个点, 而不是每个</p>
-<p>然后我们需要修改上面每个数据点画一个点的代码, 改为每个数据点画一个框</p>
+<p>然后我们需要修改上面每个数据点画一个点的代码, 改为每个数据点画一个框.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function addBoxes(file) {
   const {min, max, data} = file;
   const range = max - min;
@@ -421,7 +420,7 @@ scene.add(mesh);
 </div>
 
 <p></p>
-<p>合并几何体是一个常见的优化手段. 比如, 可以将一百多棵树合并成一个几何体, 一堆石头合并成一块石头, 零零碎碎的栅栏合并成一个栅栏的mesh. 另一个例子是Minecraft并不是一个一个方块去绘制, 而是创建一组合并了的方块, 当然之前选择性地移除那些看不见的. </p>
+<p>合并几何体是一个常见的优化手段. 比如, 可以将一百多棵树合并成一个几何体, 一堆石头合并成一块石头, 零零碎碎的栅栏合并成一个栅栏的mesh. 另一个在 Minecraft 中的例子是, 它不太可能单独绘制每个立方体, 而是创建一组合并的立方体, 并且选择性地删除那些永远不可见的面. </p>
 <p>这么做带来的问题是, 合并起来简单, 分离难. 接下来我们再引入一种优化方案
 <a href="optimize-lots-of-objects-animated.html">优化大量动画对象</a>.</p>
 <p><canvas id="c"></canvas></p>

manual/zh/shadows.html

@@ -35,7 +35,7 @@
 <p>糟糕的是，如果你有一个能投射阴影点光源在这个场景中，那个这个场景将会为这个点光源再绘制 6 次。</p>
 <p>由于这些原因，除了寻找其他根本上的解决方案去解决一堆光源都能投射阴影的性能问题。一般还有常见的解决方案，就是允许多个光源，但只让一个光源能投射阴影。</p>
 <p>另一个解决方案就是使用光照贴图或者环境光贴图，预先计算离线照明的效果。这将导致静态光照，但是至少该方案渲染得非常快。在另一篇文章中将涵盖这两个解决方案。</p>
-<p>其他的解决方案是使用假的阴影。举个例子，做一个飞机模型，将它的平面纹理做灰值处理，将其绘制在模型的下面的地面上。</p>
+<p>其他的解决方案是使用假的阴影。举个例子，创建一个平面，在平面上放一个近似阴影的灰度纹理，把它画在物体下面的地面上。</p>
 <p>这个例子我们将使用假阴影</p>
 <div class="threejs_center"><img src="../examples/resources/images/roundshadow.png"></div>