fix possible urls

Author: asukaminato0721

src/data/zh-Hans.yml

@@ -469,42 +469,32 @@ learn:
     href="{{root}}/learn/getting-started-in-webgl-appearance.html">样式和外观</a>教程中学习。
   getting-started-in-webgl-custom-geometry-info2x2: '样式和外观'
   getting-started-in-webgl-custom-geometry-info2x3: 教程。
-
   getting-started-in-webgl-custom-geometry-heading2: 创建基本过程几何体
-
   getting-started-in-webgl-custom-geometry-p4x1: >-
 几何体还可以使用代码进行过程化定义。这是创建可以移动或使用您自己的一组规则形成的几何体的绝佳方式。有许多方法可以使用它们在 p5.js 中类似于 2D 绘图的方式创建 3D 几何体。例如，<a class="code">quad()</a>、<a
  class="code">triangle()</a>、<a class="code">rect()</a> 和 <a class="code">circle()</a> 等方法都有额外的参数，使它们可以用于 3D。
 
   getting-started-in-webgl-custom-geometry-p5x1: >-
-    还有其他方法可以更好地控制几何体。可以使用<a class="code"
-    href="{{root}}/reference/#/p5/beginShape">beginShape()</a>、<a class="code"
-    href="{{root}}/reference/#/p5/vertex">vertex()</a> 和 <a class="code"
-    href="{{root}}/reference/#/p5/endShape">endShape()</a> 逐点定义形状。下面的示例演示了如何使用这些方法在数学上构建 3D 形状。
-
+    还有其他方法可以更好地控制几何体。可以使用<a class="code" href="{{root}}/reference/#/p5/beginShape">beginShape()</a>、
+    <a class="code" href="{{root}}/reference/#/p5/vertex">vertex()</a> 和
+    <a class="code" href="{{root}}/reference/#/p5/endShape">endShape()</a> 逐点定义形状。
+    下面的示例演示了如何使用这些方法在数学上构建 3D 形状。
   getting-started-in-webgl-custom-geometry-p5x2: '和 '
-
   getting-started-in-webgl-custom-geometry-p5x3: >-
     下面的示例演示了如何使用这些方法在数学上构建 3D 形状。
-
   getting-started-in-webgl-custom-geometry-p6x1: >-
-    还有一个强大的类，<a class="code"
-    href="{{root}}/reference/#/p5/p5.Geometry">p5.Geometry</a>，p5.js 内部使用
+    还有一个强大的类，<a class="code" href="{{root}}/reference/#/p5/p5.Geometry">p5.Geometry</a>，p5.js 内部使用
     <a class="code">loadModel()</a>，但也可用于定义自定义几何体，提供可以有助于计算面和法线的工具。
-
   getting-started-in-webgl-custom-geometry-p6x1_: >-
     ，p5.js 内部使用<a class="code">loadModel()</a>，但也可用于定义自定义几何体，提供可以有助于计算面和法线的工具。
-
   getting-started-in-webgl-custom-geometry-p6x2: >-
     在 3D 中，面指的是由三个或四个点组成的集合，这些点形成了一个表面，使我们的几何体具有实体的外观。法线是垂直于面的方向，这有助于 p5.js 计算表面上的光照。
-
   getting-started-in-webgl-custom-geometry-p6x3: >-
-    在下面的示例中，使用 <a class="code">p5.Geometry</a> 绘制几何体的网格点。然后，<a class="code">computeFaces()</a> 用于使几何体具有实体外观，<a
-    class="code">computeNormals()</a> 允许我们的几何体具有适当的照明。
+    在下面的示例中，使用 <a class="code">p5.Geometry</a> 绘制几何体的网格点。然后，<a class="code">computeFaces()</a> 用于使几何体具有实体外观，
+    <a class="code">computeNormals()</a> 允许我们的几何体具有适当的照明。
   getting-started-in-webgl-custom-geometry-heading3: 结论
   getting-started-in-webgl-custom-geometry-p7x1: >-
     现在，您应该能够创建自定义的几何体，从其他工具或代码中创建独特的形状变为可能。花一些时间使用各种 3D 建模工具，以便找到最适合您的那个。
-
   getting-started-in-webgl-custom-geometry-glossary-term1-title: 过程化的
   getting-started-in-webgl-custom-geometry-glossary-term1-definition: >-
     意味着某物是通过数学定义的，而不是通过存储的数据，例如文件。
@@ -523,7 +513,6 @@ learn:
     垂直于面的方向，通常在计算照明或使用材料时需要。
   getting-started-in-webgl-custom-geometry-glossary-term7-title: 规范化
   getting-started-in-webgl-custom-geometry-glossary-term7-definition: 更改某物以适应标准范围。
-
   getting-started-in-webgl-appearance-title: 样式和外观
   getting-started-in-webgl-appearance: 在 WebGL 中的材质和照明的基础知识
   getting-started-in-webgl-appearance-p0x1: >-
@@ -532,8 +521,8 @@ learn:
   getting-started-in-webgl-appearance-heading1: 相机和视图
   getting-started-in-webgl-appearance-p1x1: >-
     相机是 3D 场景的基本组成部分；它为我们提供 3D 所特有的空间和维度感。
-    在 p5.js 中，WebGL 模式默认提供透视相机，但我们可以使用 <a class="code"
-    href="{{root}}/reference/#/p5/perspective">perspective()</a> 或 
+    在 p5.js 中，WebGL 模式默认提供透视相机，但我们可以使用
+    <a class="code" href="{{root}}/reference/#/p5/perspective">perspective()</a> 或 
     <a class="code" href="{{root}}/reference/#/p5/ortho">ortho()</a> 
     来更改这一点。
   getting-started-in-webgl-appearance-p1x2: '或 '
@@ -554,8 +543,8 @@ learn:
       href="{{root}}/reference/#/p5/orbitControl">orbitControl()</a>，可以使用鼠标缩放、平移和定位相机。
   getting-started-in-webgl-appearance-p5x2: 可以使用鼠标缩放、平移和定位相机。
   getting-started-in-webgl-appearance-p6x1: >-
-    一个场景可以有多个相机，但一次只能有一个相机处于活动状态。 在 p5.js 中，草图默认只有一个透视相机，但可以通过调用 <a
-    class="code">perspective()</a>（使用新参数）或 <a class="code">ortho()</a> 来更改相机类型。
+    一个场景可以有多个相机，但一次只能有一个相机处于活动状态。 在 p5.js 中，草图默认只有一个透视相机，但可以通过调用
+    <a class="code">perspective()</a>（使用新参数）或 <a class="code">ortho()</a> 来更改相机类型。
     <a class="code">camera()</a> 可以用于更改活动相机的位置和相机所看向的位置。在下面的草图中试试吧。
   getting-started-in-webgl-appearance-heading2: 照明
   getting-started-in-webgl-appearance-p7x1: 照明是 3D 场景中的另一个重要组成部分。为了能够传达形状和深度，必须拥有光源。p5.js 中有一些不同类型的光源可供草图使用。
@@ -577,11 +566,11 @@ learn:
   getting-started-in-webgl-appearance-p12x1: 尝试在这个示例中注释或取消注释不同的光源：
   getting-started-in-webgl-appearance-p13x1: >-
     通过使用<a class="code">texture()</a>可以实现更多自定义材料。简而言之，这些是可以映射到几何图形表面的图像。
-    这些纹理可以从图像中导入，甚至可以使用着色器在代码中生成。 要将纹理映射到几何图形上，请在preload()中使用<a
-    class="code">loadImage()</a>，然后在绘制形状之前调用<a class="code">texture()</a>。
+    这些纹理可以从图像中导入，甚至可以使用着色器在代码中生成。 要将纹理映射到几何图形上，请在preload()中使用
+    <a class="code">loadImage()</a>，然后在绘制形状之前调用<a class="code">texture()</a>。
   getting-started-in-webgl-appearance-info1x1: >-
-    尽管着色器可以用于改变几何体的外观，但在本教程范围之外。因此，请确保在准备好时查看<a
-    href="{{root}}/learn/introduction-to-shaders.html">着色器简介</a>页面。
+    尽管着色器可以用于改变几何体的外观，但在本教程范围之外。因此，请确保在准备好时查看
+    <a href="{{root}}/learn/introduction-to-shaders.html">着色器简介</a>页面。
   getting-started-in-webgl-appearance-info1x2: 着色器简介
   getting-started-in-webgl-appearance-info1x3: 页面准备就绪时
   getting-started-in-webgl-appearance-heading4: 结论
@@ -615,9 +604,9 @@ learn:
     p5.js WebGL 模型。
   getting-started-in-webgl-shaders-p2x1: >-
     着色器程序由两部分组成，一个<strong>顶点着色器</strong>和一个<strong>片元着色器</strong>。
-    顶点着色器影响3D几何图形在屏幕上的绘制位置，片元着色器则负责影响颜色输出。这两个部分分别存储在不同的文件中，并通过<a
-    class="code">loadShader()</a>加载到p5.js中。一旦着色器被加载，它就可以在<a
-    class="code">draw()</a>中使用。下面的示例将展示如何在p5.js中设置基本着色器：
+    顶点着色器影响3D几何图形在屏幕上的绘制位置，片元着色器则负责影响颜色输出。这两个部分分别存储在不同的文件中，并通过
+    <a class="code">loadShader()</a>加载到p5.js中。一旦着色器被加载，它就可以在
+    <a class="code">draw()</a>中使用。下面的示例将展示如何在p5.js中设置基本着色器：
   getting-started-in-webgl-shaders-heading2: 着色语言 (GLSL)
   getting-started-in-webgl-shaders-p3x1: >-
     现在你可能想知道我们实际上在这些着色器文件中写了什么！着色器文件是用图形库着色语言
@@ -633,13 +622,13 @@ learn:
   getting-started-in-webgl-shaders-p5x1: 通常情况下，着色语言比 JavaScript 更加严格。例如，缺少分号将导致错误信息。 不能在不同类型的数字之间进行交换，如浮点数或整数。
   getting-started-in-webgl-shaders-p6x1: 首先，让我们看一个基本的顶点着色器：
   getting-started-in-webgl-shaders-p7x1: >-
-    这个顶点着色器以一个 <em>attribute</em> 开始，p5.js 使用它来与着色器共享顶点位置信息。这个 attribute 是一个 <a
-    class="code">vec3</a>，意味着它包含一个 x、y 和 z 值。 Attributes
+    这个顶点着色器以一个 <em>attribute</em> 开始，p5.js 使用它来与着色器共享顶点位置信息。这个 attribute 是一个
+    <a class="code">vec3</a>，意味着它包含一个 x、y 和 z 值。 Attributes
     是特殊的变量类型，只在顶点着色器中使用，并且通常由 p5.js 提供。
   getting-started-in-webgl-shaders-p8x1: >-
     所有顶点着色器都需要一个函数 <a class="code">main()</a>，在其中我们定位我们的顶点。
-    在这个例子中，顶点着色器重新定位我们的顶点，使着色器输出占据整个画布。在 <a class="code">main()</a> 的末尾，我们必须给 <a
-    class="code">gl_Position</a> 赋值。
+    在这个例子中，顶点着色器重新定位我们的顶点，使着色器输出占据整个画布。在 <a class="code">main()</a> 的末尾，我们必须给
+    <a class="code">gl_Position</a> 赋值。
   getting-started-in-webgl-shaders-p9x1: >-
     如果这还不是很清楚，也不要担心。顶点着色器起着重要的作用， 但通常只负责确保我们在片段着色器中创建的内容在几何体上正确地显示。
     在许多项目中，您可能会发现自己反复使用相同的顶点着色器。 另一方面，片段着色器负责着色器的颜色输出，是我们进行大量着色器编程的地方。