Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）

﹏ヽ暗。殇╰゛Y 2024-03-31 14:06 19阅读 0赞

## Three.js实例详解\_\_\_旋转的精灵女孩(附完整代码和资源)（二） ##

**本篇目录：**

五、实例中所使用的代码语法详细解释

（1）、构建一个三维空间场景

（2）、选择一个透视投影相机作为观察点

（a）、创建透视摄像机

（b）、透视摄像机语法详解

（3）、调入“旋转的精灵女孩”模型

（a）、调入模型代码

（b）、dae模型解释

（4）、场景渲染

（a）、调入WebGL Render渲染器

（b）、渲染器语法详解

（5）、为【旋转的精灵女孩】设置光线源

（a）、设置环境光、平行光

（b）、光线设置对模型展示效果的影响对比图

（c）、光线源语法详解

六、完整构建整个\[旋转的精灵女孩\]实例

--------------------

## 五、实例中所使用的代码语法详细解释 ##

### （1）、构建一个三维空间场景 ###

scene = new THREE.Scene();

####  ####

### （2）、选择一个透视投影相机作为观察点 ###

在本例中，我们会用到透视投影。

![a478ece1430f4acdaae568fcee6dcafa.png][]

#### （a）、创建透视摄像机 ####

camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 2000);

#### （b）、透视摄像机语法详解 ####

**代码：****camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 2000);**

**解释：****PerspectiveCamera（透视摄像机）**

**PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )  
fov — 摄像机视锥体垂直视野角度  
aspect — 摄像机视锥体长宽比  
near — 摄像机视锥体近端面  
far — 摄像机视锥体远端面**

![da75af90574f4d11a2ac400f7669de1f.png][]

**这些参数一起定义了摄像机的viewing frustum（视锥体）。**

**第一个参数是视野角度（FOV）**。摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示。默认值是50。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。

**第二个参数是长宽比（aspect ratio）**。 也就是你用一个物体的宽除以它的高的值。摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。

**第三个参数是近截面（near）**。摄像机的近端面，默认值是0.1。其有效值范围是0到当前摄像机far plane（远端面）的值之间。 请注意，和OrthographicCamera不同，0对于PerspectiveCamera的近端面来说不是一个有效值。

**第四个参数是远截面（far）**。 摄像机的远端面，默认值是2000。当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。该值必须大于near plane（摄像机视锥体近端面）的值。

**只有离摄像机的距离大于near值，小于far值，且在相机的可视角度之内，才能被摄像机投影到。**

![6beb46c54008420aabc76a765e365a48.png][]

![7a66d9115ddd4ee08f9ad20c47e9d20b.png][]

将透视摄像机的fov（摄像机视锥体垂直视野角度）设置得更大时，视景体变大了，因而旋转的精灵女孩相对于整个视景体的大小就变小了，看起来旋转的精灵女孩就显得变小了。 旋转的精灵女孩的实际大小并未改变。

**其他可用参数：**

**在大多数属性发生改变之后，你将需要调用.updateProjectionMatrix来使得这些改变生效。**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#ffffff;"> 代码：camera.position.set(9, 6, 8); 解释：position属性：用来指定透视投影相机在三维坐标中的位置。 position.set：移动相机位置，将位置移动到(9, 6, 8) 代码：camera.lookAt(0, 3, 0); 解释：lookAt——相机焦点方向，默认为Z轴负半轴； </td> 
 <td style="border-color:#ffffff;"> <img alt="" height="256" src="https://img-blog.csdnimg.cn/25a7130b6ce94dc1a23b04b6fdf94def.png" width="134"> </td> 
 </tr> 
 </tbody> 
</table>

**透视相机（PerspectiveCamera）方法：**共有方法请参见其基类Camera。

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#99ccff;text-align:center;width:263px;">名　　称</td> 
 <td style="background-color:#99ccff;text-align:center;width:425px;">解　　释</td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.clearViewOffset () : undefined</td> 
 <td style="width:425px;">清除任何由.setViewOffset设置的偏移量。</td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.getEffectiveFOV () : Float</td> 
 <td style="width:425px;"> 结合.zoom（缩放倍数）， 以角度返回当前垂直视野角度。 </td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.getFilmHeight () : Float</td> 
 <td style="width:425px;"> 返回当前胶片上图像的高， 如果.aspect小于或等于1（肖像格式、纵向构图），则结果等于.filmGauge。 </td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.getFilmWidth () : Float</td> 
 <td style="width:425px;"> 返回当前胶片上图像的宽， 如果.aspect大于或等于1（景观格式、横向构图），则结果等于.filmGauge。 </td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.getFocalLength () : Float</td> 
 <td style="width:425px;"> 返回当前.fov（视野角度） 相对于.filmGauge（胶片尺寸）的焦距。 </td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.setFocalLength ( focalLength : Float ) : undefined</td> 
 <td style="width:425px;"> 通过相对于当前.filmGauge的焦距，设置FOV。 默认情况下，焦距是为35mm（全画幅）摄像机而指定的。 </td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.updateProjectionMatrix () : undefined</td> 
 <td style="width:425px;"> 更新摄像机投影矩阵。 在任何参数被改变以后必须被调用。 </td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.toJSON (meta : Object) : Object</td> 
 <td style="width:425px;">meta -- 包含有元数据的对象，例如对象后代中的纹理或图像 将摄像机转换为 three.js JSON Object/Scene format（three.js JSON 物体/场景格式）。</td> 
 </tr> 
 <tr> 
 <td style="width:263px;"></td> 
 <td style="width:425px;"></td> 
 </tr> 
 <tr> 
 <td style="width:263px;">.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : undefined</td> 
 <td style="width:425px;">fullWidth — 多视图的全宽设置 fullHeight — 多视图的全高设置 x — 副摄像机的水平偏移 y — 副摄像机的垂直偏移 width — 副摄像机的宽度 height — 副摄像机的高度</td> 
 </tr> 
 <tr> 
 <td style="width:263px;"> 在较大的viewing frustum（视锥体）中设置偏移量，对于多窗口或者多显示器的设置是很有用的。 例如，如果你有一个3x2的显示器阵列，每个显示器分辨率都是1920x1080，且这些显示器排列成像这样的网格： +---+---+---+ | A | B | C | +---+---+---+ | D | E | F | +---+---+---+ </td> 
 <td style="width:425px;"> 那对于每个显示器，你可以这样来设置、调用： const w = 1920; const h = 1080; const fullWidth = w * 3; const fullHeight = h * 2; // A camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h ); // B camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h ); // C camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h ); // D camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h ); // E camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h ); // F camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h ); 请注意，显示器的不必具有相同的大小，或者不必在网格中。 </td> 
 </tr> 
 </tbody> 
</table>

### （3）、调入“旋转的精灵女孩”模型 ###

#### （a）、调入模型代码 ####

const loader = new ColladaLoader(loadingManager);
    			loader.load('./models/girl/girl.dae', function (collada) {
     
    				elf = collada.scene;
     
    			});

#### （b）、dae模型解释 ####

**代码：** **const loader = new ColladaLoader(loadingManager);  
loader.load('./models/girl/girl.dae', function (collada) \{ elf = collada.scene; \});**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#ffffff;width:285px;"> <img alt="" height="400" src="https://img-blog.csdnimg.cn/1ed94f190cdf46649e10c50ff013ac99.png" width="220"> </td> 
 <td style="border-color:#ffffff;width:403px;"> 解释：调入“旋转的精灵女孩”模型，模型是.dae格式的文件 　　DAE文件是”数字资产交换 “的首字母缩写，.dae文件扩展名代表COLLADA数字资产交换（.dae）文件类型和格式。COLLADA (Collaborative Design Activity)是一个社区努力开发和推广3D图形的开放交换格式，由Khronos集团维护。 　　DAE最初由索尼电脑娱乐公司设计，并发布给Khronos集团，是一种开放的XML 3D图形格式，被采纳为国际标准（ISO/PAS 17506:2012）。它的目的是为不同的和不兼容的数字内容创作（DCC）提供一个桥梁，作为一个中介。 　　.dae文件代表以 COLLADA DAE格式翻译的3D对象或场景。它是一个符合 COLLADA DAE 模式的 XML 文件。由于DAE的开放性，DAE是目前3D图形中关键的资产交换格式，不少3D DCC工具都支持DAE导入/导出。众多的在线作品集将其大部分商业和免费的3D作品以.dae文件的形式发布，此外还有其他几种高度支持的交换格式。 </td> 
 </tr> 
 </tbody> 
</table>

### （4）、场景渲染 ###

三维场景渲染与重建是利用场景的图形或图像等信息渲染出特定观测视点的场景图像和重建出三维场景的结构模型。

如果将之前写好的代码简单直接复制到HTML文件中，你不会在页面中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此，我们需要使用一个被叫做“**渲染循环**”（render loop）或者“**动画循环**”（animate loop）的东西。

function animate() \{  
requestAnimationFrame( animate );  
renderer.render( scene, camera );  
\}  
animate();

**requestAnimationFrame**有很多的优点。当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。

#### （a）、调入WebGL Render渲染器 ####

renderer = new THREE.WebGLRenderer();
    			renderer.outputEncoding = THREE.sRGBEncoding;
    			renderer.setPixelRatio(window.devicePixelRatio);
    			renderer.setSize(window.innerWidth, window.innerHeight);
    			container.appendChild(renderer.domElement);
    			renderer.setClearColor(0xffffff, 1.0);

#### （b）、渲染器语法详解 ####

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#ffffff;width:452px;"> 代码：renderer = new THREE.WebGLRenderer(); 解释：渲染器。WebGL Render 用WebGL渲染出你精心制作的场景。 &nbsp;　　除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。 WebGLRenderer( parameters : Object ) &nbsp;　　parameters - (可选) 该对象的属性定义了渲染器的行为。也可以完全不传参数。在所有情况下，当缺少参数时，它将采用合理的默认值。 &nbsp;　　以下是合法参数： &nbsp; </td> 
 <td style="border-color:#ffffff;width:236px;"> <img alt="" height="408" src="https://img-blog.csdnimg.cn/d98b7e7d1ba047abaeda21e0ba566c79.png" width="220"> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#99ccff;text-align:center;">参　　数</td> 
 <td style="background-color:#99ccff;text-align:center;">解　　释</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>canvas&nbsp;</td> 
 <td> 一个供渲染器绘制其输出的canvas 它和下面的domElement属性对应。 如果没有传这个参数，会创建一个新canvas </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>context&nbsp;</td> 
 <td> 可用于将渲染器附加到已有的渲染环境(RenderingContext)中。 默认值是null </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>precision</td> 
 <td> 着色器精度。 可以是 "highp", "mediump" 或者 "lowp". 如果设备支持，默认为"highp"&nbsp; </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>alpha</td> 
 <td>controls the default clear alpha value. When set to true, the value is 0. Otherwise it's 1. Default is false.控制默认的清除 alpha 值。设置为 true 时，该值为 0。否则为 1。默认值为假。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>premultipliedAlpha</td> 
 <td> renderer是否假设颜色有 premultiplied alpha. 默认为true </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>antialias</td> 
 <td> 是否执行抗锯齿。 默认为false. </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>stencil</td> 
 <td> 绘图缓存是否有一个至少8位的模板缓存(stencil buffer)。 默认为true </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>preserveDrawingBuffer</td> 
 <td> 是否保留缓直到手动清除或被覆盖。 默认false. </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>powerPreference</td> 
 <td> 提示用户代理怎样的配置更适用于当前WebGL环境。 可能是"high-performance", "low-power" 或 "default"。默认是"default". 详见WebGL spec </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>failIfMajorPerformanceCaveat</td> 
 <td> 检测渲染器是否会因性能过差而创建失败。 默认为false。详见 WebGL spec for details. </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>depth</td> 
 <td> 绘图缓存是否有一个至少6位的深度缓存(depth buffer )。 默认是true. </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>logarithmicDepthBuffer</td> 
 <td>是否使用对数深度缓存。 如果要在单个场景中处理巨大的比例差异，就有必要使用。 Note that this setting uses gl_FragDepth if available which disables the Early Fragment Test optimization and can cause a decrease in performance. 请注意，此设置使用gl_FragDepth（如果可用）禁用早期片段测试优化，并可能导致性能下降。默认是false。 示例：camera / logarithmicdepthbuffer</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 </tbody> 
</table>

**属性**

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#99ccff;text-align:center;">名　称</td> 
 <td style="background-color:#99ccff;text-align:center;">解　释</td> 
 <td style="background-color:#99ccff;text-align:center;">备　注</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.autoClear : Boolean</td> 
 <td>定义渲染器是否在渲染每一帧之前自动清除其输出。</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.autoClearColor : Boolean</td> 
 <td>如果autoClear为true, 定义renderer是否清除颜色缓存。</td> 
 <td>默认是true</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.autoClearDepth : Boolean</td> 
 <td>如果autoClear是true, 定义renderer是否清除深度缓存。</td> 
 <td>默认是true</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.autoClearStencil : Boolean</td> 
 <td>如果autoClear是true, 定义renderer是否清除模板缓存.</td> 
 <td>默认是true</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.debug : Object</td> 
 <td>- checkShaderErrors: 如果为true，定义是否检查材质着色器程序 编译和链接过程中的错误。禁用此检查生产以获得性能增益可能很有用。强烈建议在开发期间保持启用这些检查。 如果着色器没有编译和链接 - 它将无法工作，并且相关材料将不会呈现。</td> 
 <td>默认是true</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.clippingPlanes : Array</td> 
 <td>用户自定义的剪裁平面，在世界空间中被指定为THREE.Plane对象。 这些平面全局使用。空间中与该平面点积为负的点将被切掉。</td> 
 <td>默认值是[]</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.localClippingEnabled : Boolean</td> 
 <td>定义渲染器是否考虑对象级剪切平面。</td> 
 <td>默认为false</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.physicallyCorrectLights : Boolean</td> 
 <td>是否使用物理上正确的光照模式。示例：lights / physical</td> 
 <td>默认是false</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.properties : Object</td> 
 <td>渲染器内部使用，以跟踪各种子对象属性。</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.renderLists : WebGLRenderLists</td> 
 <td>在内部用于处理场景渲染对象的排序。</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.state : Object</td> 
 <td>包含设置WebGLRenderer.context状态的各种属性的函数。</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.sortObjects : Boolean</td> 
 <td> 定义渲染器是否应对对象进行排序。 说明: 排序用于尝试正确渲染出具有一定透明度的对象。根据定义，排序可能不总是有用。根据应用的需求，可能需要关闭排序并使其他方法来处理透明度的渲染，例如， 手动确定每个对象的渲染顺序。 </td> 
 <td>默认是true.</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.xr : WebXRManager</td> 
 <td>提供对渲染器的 WebXR 相关接口的访问。</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.domElement : DOMElement</td> 
 <td>一个canvas，渲染器在其上绘制输出。 渲染器的构造函数会自动创建(如果没有传入canvas参数); 你需要做的仅仅是像下面这样将它加页面里去: document.body.appendChild( renderer.domElement );</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.toneMapping : Constant</td> 
 <td>查看Renderer constants以获取其它备选项</td> 
 <td>默认是NoToneMapping。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.toneMappingExposure : Number</td> 
 <td>色调映射的曝光级别。</td> 
 <td>默认是1</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.shadowMap : WebGLShadowMap</td> 
 <td>如果使用，它包含阴影贴图的引用。 - enabled: 如果设置开启，允许在场景中使用阴影贴图。默认是 false。 - autoUpdate: 启用场景中的阴影自动更新。默认是true 如果不需要动态光照/阴影, 则可以在实例化渲染器时将之设为false - needsUpdate: 当被设为true, 场景中的阴影贴图会在下次render调用时刷新。默认是false 如果你已经禁用了阴影贴图的自动更新(shadowMap.autoUpdate = false), 那么想要在下一次渲染时更新阴影的话就需要将此值设为true - type: 定义阴影贴图类型 (未过滤, 关闭部分过滤, 关闭部分双线性过滤), 可选值有: THREE.BasicShadowMap THREE.PCFShadowMap (默认) THREE.PCFSoftShadowMap THREE.VSMShadowMap</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.extensions : Object</td> 
 <td>- get( extensionName : String ): 用于检查是否支持各种扩展，并返回一个对象，其中包含扩展的详细信息。 该方法检查以下扩展： WEBGL_depth_texture EXT_texture_filter_anisotropic WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_pvrtc WEBGL_compressed_texture_etc1</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.info : Object</td> 
 <td>一个对象，包含有关图形板内存和渲染过程的一系列统计信息。这些信息可用于调试或仅仅满足下好奇心。该对象包含以下字段:（memory:geometries、textures，render:calls、triangles、points、lines、frame、programs） 默认情况下，这些字段在每次渲染调用时都会重置，但是当每帧有多个渲染通道时（例如，使用后处理时），最好使用自定义模式重置。先将 autoReset 设置为 false. renderer.info.autoReset = false;然后在单个帧时渲染完成后调用 reset(). renderer.info.reset();</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.capabilities : Object</td> 
 <td>一个包含当前渲染环境(RenderingContext)的功能细节的对象。 - floatFragmentTextures: 环境是否支持OES_texture_float扩展 - floatVertexTextures: 如果floatFragmentTextures和vertexTextures都是true， 则此值为true - getMaxAnisotropy(): 返回最大可用各向异性。 - getMaxPrecision(): 返回顶点着色器和片元着色器的最大可用精度。 - isWebGL2: true if the context in use is a WebGL2RenderingContext object. - logarithmicDepthBuffer: 如果logarithmicDepthBuffer在构造器中被设为true且 环境支持EXT_frag_depth扩展，则此值为true - maxAttributes: gl.MAX_VERTEX_ATTRIBS的值 - maxCubemapSize: gl.MAX_CUBE_MAP_TEXTURE_SIZE 的值，着色器可使用的立方体贴图纹理的最大宽度*高度 - maxFragmentUniforms: gl.MAX_FRAGMENT_UNIFORM_VECTORS的值，片元着色器可使用的全局变量(uniforms)数量 - maxSamples: The value of gl.MAX_SAMPLES. Maximum number of samples in context of Multisample anti-aliasing (MSAA). - maxTextureSize: gl.MAX_TEXTURE_SIZE的值，着色器可使用纹理的最大宽度*高度 - maxTextures: *gl.MAX_TEXTURE_IMAGE_UNITS的值，着色器可使用的纹理数量 - maxVaryings: gl.MAX_VARYING_VECTORS的值，着色器可使用矢量的数量 - maxVertexTextures: gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS的值，顶点着色器可使用的纹理数量。 - maxVertexUniforms: gl.MAX_VERTEX_UNIFORM_VECTORS的值，顶点着色器可使用的全局变量(uniforms)数量 - precision: 渲染器当前使用的着色器的精度 - vertexTextures: 如果 .maxVertexTextures : Integer大于0，此值为true (即可以使用顶点纹理)</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 </tbody> 
</table>

**方法：**

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#99ccff;text-align:center;">名　　称</td> 
 <td style="background-color:#99ccff;text-align:center;">解　　释</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.clear ( color : Boolean, depth : Boolean, stencil : Boolean ) : undefined</td> 
 <td>告诉渲染器清除颜色、深度或模板缓存. 此方法将颜色缓存初始化为当前颜色。参数们默认都是true</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.clearColor ( ) : undefined</td> 
 <td>清除颜色缓存。 相当于调用.clear( true, false, false )</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.clearDepth ( ) : undefined</td> 
 <td>清除深度缓存。相当于调用.clear( false, true, false )</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.clearStencil ( ) : undefined</td> 
 <td>清除模板缓存。相当于调用.clear( false, false, true )</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.compile ( scene : Object3D, camera : Camera ) : undefined</td> 
 <td>使用相机编译场景中的所有材质。这对于在首次渲染之前预编译着色器很有用。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.copyFramebufferToTexture ( position : Vector2, texture : FramebufferTexture, level : Number ) : undefined</td> 
 <td>将当前WebGLFramebuffer中的像素复制到2D纹理中。可访问WebGLRenderingContext.copyTexImage2D.</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.copyTextureToTexture ( position : Vector2, srcTexture : Texture, dstTexture : Texture, level : Number ) : undefined</td> 
 <td>将纹理的所有像素复制到一个已有的从给定位置开始的纹理中。可访问WebGLRenderingContext.texSubImage2D.</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.dispose ( ) : undefined</td> 
 <td>处理当前的渲染环境</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.forceContextLoss () : undefined</td> 
 <td>模拟WebGL环境的丢失。需要支持 WEBGL_lose_context 扩展才能用。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.forceContextRestore ( ) : undefined</td> 
 <td>模拟WebGL环境的恢复。需要支持 WEBGL_lose_context 扩展才能用。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getClearAlpha () : Float</td> 
 <td>返回一个表示当前alpha值的float，范围0到1</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getClearColor ( target : Color ) : Color</td> 
 <td>返回一个表示当前颜色值的THREE.Color实例</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getContext () : WebGL2RenderingContext</td> 
 <td>返回当前WebGL环境</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getContextAttributes () : WebGLContextAttributes</td> 
 <td>返回一个对象，这个对象中存有在WebGL环境在创建的时候所设置的属性</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getActiveCubeFace () : Integer</td> 
 <td>返回当前活动的立方体面。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getActiveMipmapLevel () : Integer</td> 
 <td>返回当前活动的 mipmap 级别。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getRenderTarget () : RenderTarget</td> 
 <td>如果当前存在RenderTarget，则返回该值；否则返回null。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getCurrentViewport () : RenderTarget</td> 
 <td>返回当前视口</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getDrawingBufferSize () : Object</td> 
 <td>返回一个包含渲染器绘图缓存宽度和高度(单位像素)的对象。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getPixelRatio () : number</td> 
 <td>返回当前使用设备像素比</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.getSize ( target : Vector2 ) : Vector2</td> 
 <td>返回包含渲染器输出canvas的宽度和高度(单位像素)的对象。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.initTexture ( texture : Texture ) : undefined</td> 
 <td>初始化给定的纹理。用于预加载纹理而不是等到第一次渲染（可能会由于解码和 GPU 上传的开销而导致明显的延迟）.</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.resetGLState ( ) : undefined</td> 
 <td>将GL状态重置为默认值。WebGL环境丢失时会内部调用</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.readRenderTargetPixels ( renderTarget : WebGLRenderTarget, x : Float, y : Float, width : Float, height : Float, buffer : TypedArray, activeCubeFaceIndex : Integer ) : undefined</td> 
 <td>buffer - Uint8Array 是所有情况下唯一支持的目标类型，其他类型取决于 renderTarget 和平台。 将renderTarget中的像素数据读取到传入的缓冲区中。这是WebGLRenderingContext.readPixels()的包装器。示例：interactive / cubes / gpu 要读出 WebGLCubeRenderTarget，请使用可选参数 activeCubeFaceIndex 来确定应该读取哪个人脸。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.render ( scene : Object3D, camera : Camera ) : undefined</td> 
 <td>用相机(camera)渲染一个场景(scene)或是其它类型的object。 渲染一般是在canvas上完成的，或者是renderTarget(如果有指定) 如果forceClear值是true，那么颜色、深度及模板缓存将会在渲染之前清除，即使渲染器的autoClear属性值是false。 即便forceClear设为true, 也可以通过将autoClearColor、autoClearStencil或autoClearDepth属性的值设为false来阻止对应缓存被清除。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.resetState () : undefined</td> 
 <td>可用于重置内部 WebGL 状态。此方法主要与跨多个 WebGL 库共享单个 WebGL 上下文的应用程序相关。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.setAnimationLoop ( callback : Function ) : undefined</td> 
 <td>callback — 每个可用帧都会调用的函数。 如果传入‘null’,所有正在进行的动画都会停止。 可用来代替requestAnimationFrame的内置函数. 对于WebXR项目，必须使用此函数。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.setClearAlpha ( alpha : Float ) : undefined</td> 
 <td>设置alpha。合法参数是一个0.0到 1.0之间的浮点数</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.setClearColor ( color : Color, alpha : Float ) : undefined</td> 
 <td>设置颜色及其透明度</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.setRenderTarget ( renderTarget : WebGLRenderTarget, activeCubeFace : Integer, activeMipmapLevel : Integer ) : undefined</td> 
 <td> renderTarget -- 需要被激活的renderTarget(可选)。若此参数为空，则将canvas设置成活跃的渲染目标。 activeCubeFace -- 指定 WebGLCubeRenderTarget 的活动立方体端（PX 0、NX 1、PY 2、NY 3、PZ 4、NZ 5）。当传递WebGLArrayRenderTarget或WebGL3DRenderTarget时，这表示要渲染到的z层（可选） activeMipmapLevel -- 指定活动的 mipmap 级别（可选）。该方法设置活跃rendertarget。 </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.setScissor ( x : Integer, y : Integer, width : Integer, height : Integer ) : undefined</td> 
 <td>将剪裁区域设为(x, y)到(x + width, y + height)&nbsp;</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.setScissorTest ( boolean : Boolean ) : undefined</td> 
 <td>启用或禁用剪裁检测. 若启用，则只有在所定义的裁剪区域内的像素才会受之后的渲染器影响。</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>.setViewport ( x : Integer, y : Integer, width : Integer, height : Integer ) : undefined</td> 
 <td>将视口大小设置为(x, y)到 (x + width, y + height).</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 </tbody> 
</table>

**代码：renderer.setSize(window.innerWidth, window.innerHeight);**  
**解释：**设置画布大小。**renderer.setSize ( width : Integer, height : Integer, updateStyle : Boolean )** : undefined  
　　将输出canvas的大小调整为(width, height)并考虑设备像素比，且将视口从(0, 0)开始调整到适合大小 将updateStyle设置为false以阻止对canvas的样式做任何改变。  
　　除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的尺寸。比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序。  
　　因此，我们可以将渲染器宽高设置为浏览器窗口宽高。对于性能比较敏感的应用程序来说，你可以使用setSize传入一个较小的值，例如window.innerWidth / 2和window.innerHeight / 2，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。

如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，将updateStyle（第三个参数）设为false。

例如，假设你的 < canvas > 标签现在已经具有了100 % 的宽和高，调用setSize(window.innerWidth / 2, window.innerHeight / 2, false)将使得你的应用程序以一半的分辨率来进行渲染。

**代码：renderer.outputEncoding = THREE.sRGBEncoding;**

**解释：**定义渲染器的输出编码。默认为THREE.LinearEncoding  
**renderer.outputEncoding** : number  
如果渲染目标已经使用 .setRenderTarget、之后将直接使用renderTarget.texture.encoding

**代码：renderer.setPixelRatio(window.devicePixelRatio);**

**解释：**setPixelRatio ( value : number ) : undefined  
设置设备像素比。通常针对高清，用于避免HiDPI设备上绘图模糊

**代码：renderer.setClearColor(0xffffff, 1.0);**

**解释：**.setClearColor ( color : a Color,lpha : Float ) : undefined

设置颜色及其透明度

**代码：container.appendChild(renderer.domElement);**

**解释：**最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的 < canvas > 元素。

### **（5）、为【旋转的精灵女孩】设置光线源** ###

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#000000;"> <img alt="" height="147" src="https://img-blog.csdnimg.cn/f1572aa2f6084f13934ca79afa07d2f5.gif" width="200"> </td> 
 <td style="background-color:#333333;"> <img alt="" height="192" src="https://img-blog.csdnimg.cn/c4564f8c848b43ff9abe9e0dd4c34fd9.gif" width="200"> </td> 
 <td style="background-color:#000000;"> <img alt="" height="200" src="https://img-blog.csdnimg.cn/cddebe730acf4903892b1d5d08c8da31.gif" width="200"> </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">灯/矩形灯</td> 
 <td style="text-align:center;">lights / spotlights</td> 
 <td style="text-align:center;">阴影贴图/点光源</td> 
 </tr> 
 </tbody> 
</table>

####  ####

#### （a）、设置环境光、平行光 ####

代码片段解释，勿直接拷贝运行，会出错。需要的可去下载本实例的完整的资料来运行(免费）
    
    			const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
    			scene.add(ambientLight);
    			//AmbientLight
    			//环境光会均匀的照亮场景中的所有物体。
    			//环境光不能用来投射阴影，因为它没有方向。
    			//color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。
    			//intensity - (参数可选)光照的强度。缺省值为 1。
    			// 创建一个环境光对象。
    
    
    			const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    			directionalLight.position.set(1, 1, 0).normalize();
    			scene.add(directionalLight);
    			//平行光（DirectionalLight）
    			//平行光是沿着特定方向发射的光。这种光的表现像是无限远, 从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。
    			//平行光可以投射阴影
    			//DirectionalLight(color : Integer, intensity : Float)
    			//color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff(白色)。
    			//intensity - (可选参数) 光照的强度。缺省值为1。
    
    			//

#### （b）、光线设置对模型展示效果的影响对比图 ####

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#ffffff;text-align:center;"> <img alt="" height="313" src="https://img-blog.csdnimg.cn/b7b3a14d11d54fe99975eb27ac5347c6.png" width="180"> </td> 
 <td style="border-color:#ffffff;text-align:center;"> <img alt="" height="335" src="https://img-blog.csdnimg.cn/a96ddc15dbb14b909c036297fd57d8eb.png" width="180"> </td> 
 </tr> 
 <tr> 
 <td style="border-color:#ffffff;text-align:center;">没有设置环境光时效果</td> 
 <td style="border-color:#ffffff;text-align:center;">设置了环境光时效果</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#ffffff;text-align:center;"> <img alt="" height="310" src="https://img-blog.csdnimg.cn/2a58bce93f8c49128fd6947716486091.png" width="180"> </td> 
 <td style="border-color:#ffffff;"> <img alt="" height="335" src="https://img-blog.csdnimg.cn/a96ddc15dbb14b909c036297fd57d8eb.png" width="180"> </td> 
 </tr> 
 <tr> 
 <td style="border-color:#ffffff;text-align:center;">没有设置平行光时效果</td> 
 <td style="border-color:#ffffff;text-align:center;">设置了平行光时效果</td> 
 </tr> 
 </tbody> 
</table>

#### （c）、光线源语法详解 ####

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#99ccff;text-align:center;width:248px;">光源名称</td> 
 <td style="background-color:#99ccff;text-align:center;width:440px;">构造函数</td> 
 </tr> 
 <tr> 
 <td style="width:248px;">Light 　　光源的基类 - 所有其他的光类型都继承了该类描述的属性和方法。</td> 
 <td style="width:440px;"> Light( color : Integer, intensity : Float ) color - (可选参数) 16进制表示光的颜色。 缺省值 0xffffff (白色)。 intensity - (可选参数) 光照强度。 缺省值 1。 创造一个新的光源。注意，这并不是直接调用的（而是使用派生类之一）。 </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> AmbientLight&nbsp;环境光 　　环境光会均匀的照亮场景中的所有物体。 　　环境光不能用来投射阴影，因为它没有方向。 </td> 
 <td style="width:440px;"> AmbientLight( color : Integer, intensity : Float ) color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。 intensity - (参数可选)光照的强度。缺省值为 1。 创建一个环境光对象。 const light = new THREE.AmbientLight( 0x404040 ); // soft white light scene.add( light ); </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> 环境光探针（AmbientLightProbe） 　　光照探针是一种在3D场景中添加光源的另一种方法。 　　AmbientLightProbe 是场景中单个环境光的光照估算数据。 </td> 
 <td style="width:440px;">AmbientLightProbe( color : Color, intensity : Float ) color - （可选）一个表示颜色的 Color 的实例、字符串或数字。 intensity - （可选）光照探针强度的数值。默认值为1。 创建一个新的AmbientLightProbe。</td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> 平行光（DirectionalLight） 　　平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。 　　常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。 　　平行光可以投射阴影&nbsp; </td> 
 <td style="width:440px;"> DirectionalLight( color : Integer, intensity : Float ) color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。 intensity - (可选参数) 光照的强度。缺省值为1。 创建一个新的 DirectionalLight。 // White directional light at half intensity shining from the top. const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); scene.add( directionalLight ); </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> 半球光（HemisphereLight） 　　光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。 　　半球光不能投射阴影。 </td> 
 <td style="width:440px;"> HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float ) skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。 groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。 intensity - (可选参数) 光照强度。 缺省值 1。 创建一个半球光。 </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> 半球光探针HemisphereLightProbe 　　光照探针是一种在3D场景中添加光源的另一种方法。 　　HemisphereLightProbe 是场景中单个半球光的光照估算数据。&nbsp; </td> 
 <td style="width:440px;"> HemisphereLightProbe( skyColor : Color, groundColor : Color, intensity : Float ) skyColor - （可选）一个表示颜色的 Color 的实例、字符串或数字。 groundColor - （可选）一个表示颜色的 Color 的实例、字符串或数字。 intensity - （可选）光照探针强度的数值。默认值为1。 创建一个新的 HemisphereLightProbe。 </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> 光照探针LightProbe 　　光照探针是一种在3D场景中添加光源的另一种方法。 　　与经典光源（平行光、点光、聚光）不同， 光照探针不发光。 　　相反，光照探针存储着有关穿过3D空间的光线的信息。 　　渲染过程中，通过使用来自光照探针的数据，来逼近打到3D物体上的光线。 </td> 
 <td style="width:440px;"> LightProbe( sh : SphericalHarmonics3, intensity : Float ) sh - （可选）一个SphericalHarmonics3的实例。 intensity - （可选）光照探针强度的数值。默认值为1。 创建一个新的 LightProbe 。 　　光照探针通常从（辐射）环境贴图中创建。 LightProbeGenerator 类可以根据 CubeTexture 或 WebGLCubeRenderTarget 的实例来创建光照探针。 但是，光照估算数据同样可以以其他形式提供，例如，通过WebXR。 这将能够渲染可对真实世界的光照做出反应的增强现实内容。 　　three.js中，当前的探针实现支持所谓的漫反射光照探针。 这种类型的光照探针功能上等效于辐照环境贴图。 </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> 点光源（PointLight） 　　从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。 　　该光源可以投射阴影&nbsp; </td> 
 <td style="width:440px;"> PointLight( color : Integer, intensity : Float, distance : Number, decay : Float ) color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。 intensity - (可选参数) 光照强度。 缺省值 1。 distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0. decay - 沿着光照距离的衰退量。缺省值 1。 在 physically correct 模式中，decay = 2。 创建一个新的点光源（PointLight）。 const light = new THREE.PointLight( 0xff0000, 1, 100 ); light.position.set( 50, 50, 50 ); scene.add( light ); </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> 平面光光源（RectAreaLight） 　　平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。 　　注意事项:不支持阴影。 　　只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。 　　你必须在你的场景中加入 RectAreaLightUniformsLib ，并调用init()。 </td> 
 <td style="width:440px;"> RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float ) color - (可选参数) 十六进制数字表示的光照颜色。缺省值为 0xffffff (白色) intensity - (可选参数) 光源强度／亮度 。缺省值为 1。 width - (可选参数) 光源宽度。缺省值为 10。 height - (可选参数) 光源高度。缺省值为 10。 创建一个新的平面光。 const width = 10; const height = 10; const intensity = 1; const rectLight = new THREE.RectAreaLight( 0xffffff, intensity, &nbsp;width, height ); rectLight.position.set( 5, 5, 0 ); rectLight.lookAt( 0, 0, 0 ); scene.add( rectLight ) rectLightHelper = new RectAreaLightHelper( rectLight ); scene.add( rectLightHelper ); </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> 聚光灯（SpotLight） 　　光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。 　　该光源可以投射阴影&nbsp; </td> 
 <td style="width:440px;"> SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float ) color - (可选参数) 十六进制光照颜色。 缺省值 0xffffff (白色)。 intensity - (可选参数) 光照强度。 缺省值 1。 distance - 从光源发出光的最大距离，其强度根据光源的距离线性衰减。 angle - 光线散射角度，最大为Math.PI/2。 penumbra - 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。 decay - 沿着光照距离的衰减量。 创建一个新的聚光灯。 // white spotlight shining from the side, modulated by a texture, casting a shadow const spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 100, 1000, 100 ); spotLight.map = new THREE.TextureLoader().load( url ); spotLight.castShadow = true; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; spotLight.shadow.camera.near = 500; spotLight.shadow.camera.far = 4000; spotLight.shadow.camera.fov = 30; scene.add( spotLight ); </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> LightShadow 　　该类作为其他阴影类的基类来使用。 </td> 
 <td style="width:440px;"> LightShadow( camera : Camera ) camera - 在光的世界里创建一个新的LightShadow。这不能直接调用的 - 它由其他阴影用作基类。 </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> PointLightShadow 　　该类在内部由PointLights所使用，以用于计算阴影。 </td> 
 <td style="width:440px;"> PointLightShadow( ) 创建一个新的PointLightShadow。该方法不是直接调用的 —— 其在内部由PointLight调用。 //Create a WebGLRenderer and turn on shadows in the renderer const renderer = new THREE.WebGLRenderer(); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap //Create a PointLight and turn on shadows for the light const light = new THREE.PointLight( 0xffffff, 1, 100 ); light.position.set( 0, 10, 4 ); light.castShadow = true; // default false scene.add( light ); //Set up shadow properties for the light light.shadow.mapSize.width = 512; // default light.shadow.mapSize.height = 512; // default light.shadow.camera.near = 0.5; // default light.shadow.camera.far = 500 // default //Create a sphere that cast shadows (but does not receive them) const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 ); const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } ); const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial ); sphere.castShadow = true; //default is false sphere.receiveShadow = false; //default scene.add( sphere ); //Create a plane that receives shadows (but does not cast them) const planeGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 ); const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } ) const plane = new THREE.Mesh( planeGeometry, planeMaterial ); plane.receiveShadow = true; scene.add( plane ); //Create a helper for the shadow camera (optional) const helper = new THREE.CameraHelper( light.shadow.camera ); scene.add( helper ); </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> DirectionalLightShadow 　　这是用于在DirectionalLights内部计算阴影。 　　与其他阴影类不同，它是使用OrthographicCamera来计算阴影，而不是PerspectiveCamera。这是因为来自DirectionalLight的光线是平行的。 </td> 
 <td style="width:440px;"> DirectionalLightShadow( ) 创建一个新的DirectionalLightShadow，不能直接调用-它是在DirectionalLights内部调用使用 //Create a WebGLRenderer and turn on shadows in the renderer const renderer = new THREE.WebGLRenderer(); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap //Create a DirectionalLight and turn on shadows for the light const light = new THREE.DirectionalLight( 0xffffff, 1 ); light.position.set( 0, 1, 0 ); //default; light shining from top light.castShadow = true; // default false scene.add( light ); //Set up shadow properties for the light light.shadow.mapSize.width = 512; // default light.shadow.mapSize.height = 512; // default light.shadow.camera.near = 0.5; // default light.shadow.camera.far = 500; // default //Create a sphere that cast shadows (but does not receive them) const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 ); const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } ); const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial ); sphere.castShadow = true; //default is false sphere.receiveShadow = false; //default scene.add( sphere ); //Create a plane that receives shadows (but does not cast them) const planeGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 ); const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } ) const plane = new THREE.Mesh( planeGeometry, planeMaterial ); plane.receiveShadow = true; scene.add( plane ); //Create a helper for the shadow camera (optional) const helper = new THREE.CameraHelper( light.shadow.camera ); scene.add( helper ); </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 <tr> 
 <td style="width:248px;"> SpotLightShadow 　　这在SpotLights内部用于计算阴影。 </td> 
 <td style="width:440px;"> 　　构造函数创建一个 PerspectiveCamera : PerspectiveCamera 来管理阴影的世界视图 //Create a WebGLRenderer and turn on shadows in the renderer const renderer = new THREE.WebGLRenderer(); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap //Create a SpotLight and turn on shadows for the light const light = new THREE.SpotLight( 0xffffff ); light.castShadow = true; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// default false scene.add( light ); //Set up shadow properties for the light light.shadow.mapSize.width = 512; &nbsp;// default light.shadow.mapSize.height = 512; // default light.shadow.camera.near = 0.5; &nbsp; &nbsp;// default light.shadow.camera.far = 500 &nbsp; &nbsp; &nbsp;// default light.shadow.focus = 1; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// default //Create a sphere that cast shadows (but does not receive them) const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 ); const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } ); const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial ); sphere.castShadow = true; //default is false sphere.receiveShadow = false; //default scene.add( sphere ); //Create a plane that receives shadows (but does not cast them) const planeGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 ); const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } ) const plane = new THREE.Mesh( planeGeometry, planeMaterial ); plane.receiveShadow = true; scene.add( plane ); //Create a helper for the shadow camera (optional) const helper = new THREE.CameraHelper( light.shadow.camera ); scene.add( helper ); </td> 
 </tr> 
 <tr> 
 <td style="width:248px;"></td> 
 <td style="width:440px;"></td> 
 </tr> 
 </tbody> 
</table>

## 六、完整构建整个\[旋转的精灵女孩\]实例 ##

![47eded33e29a4f2e9e8b76a271181334.gif][][Three.js实例详解\_\_\_旋转的精灵女孩(附完整代码和资源)（三）][Three.js]

![5fbb17651a4242e1beecf64f00f044a4.gif][][Three.js实例详解\_\_\_旋转的精灵女孩(附完整代码和资源)（一）][Three.js 1]

[Three.js实例详解\_\_\_旋转的精灵女孩(附完整代码和资源)（二）][Three.js 2]

[Three.js实例详解\_\_\_旋转的精灵女孩(附完整代码和资源)（三）][Three.js]

**推荐阅读：**

<table> 
 <tbody> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td><img alt="" src="https://img-blog.csdnimg.cn/bba02a1c4617422c9fbccbf5325850d9.png"></td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/128999468" title="原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)更好的向你所喜欢的人表达内心的感受。" rel="nofollow">原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)更好的向你所喜欢的人表达内心的感受。</a> </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td> <img alt="" height="140" src="https://img-blog.csdnimg.cn/fea225cb9ec14b60b2d1b797dd8278a2.png" width="250"> </td> 
 <td><a href="https://blog.csdn.net/weixin_69553582/article/details/128699908" title="2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子" rel="nofollow">2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子</a></td> 
 </tr> 
 <tr> 
 <td>25</td> 
 <td> <img alt="" height="140" src="https://img-blog.csdnimg.cn/1f53fb9c6e8b4482813326affe6a82ff.png" width="250"> </td> 
 <td><a href="https://blog.csdn.net/weixin_69553582/article/details/128581968" title="2023春节祝福系列第一弹（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）" rel="nofollow">2023春节祝福系列第一弹（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）</a></td> 
 </tr> 
 <tr> 
 <td>24</td> 
 <td> <img alt="" height="140" src="https://img-blog.csdnimg.cn/6176c4061c72430eb100750af6fc4d0e.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/128425770?spm=1001.2014.3001.5502" title="HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)" rel="nofollow">HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)</a> </td> 
 </tr> 
 <tr> 
 <td>23</td> 
 <td> <img alt="" height="140" src="https://img-blog.csdnimg.cn/17b403c4307c4141b8544d02f95ea06c.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/128368639" title="草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码" rel="nofollow">草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码</a> </td> 
 </tr> 
 <tr> 
 <td>22</td> 
 <td> <img alt="" height="140" src="https://img-blog.csdnimg.cn/5d409c8f397a45c986ca2af7b7e725c9.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/128296176" title="【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）" rel="nofollow">【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）</a> </td> 
 </tr> 
 <tr> 
 <td>21</td> 
 <td> <img alt="0a4256d5e96d4624bdca36433237080b.png" height="140" src="https://img-blog.csdnimg.cn/0a4256d5e96d4624bdca36433237080b.png" width="250"> </td> 
 <td><a href="https://blog.csdn.net/weixin_69553582/article/details/127941542" title="python爱心源代码集锦" rel="nofollow">python爱心源代码集锦</a></td> 
 </tr> 
 <tr> 
 <td>20</td> 
 <td> <img alt="4d9032c9cdf54f5f9193e45e4532898c.png" height="140" src="https://img-blog.csdnimg.cn/4d9032c9cdf54f5f9193e45e4532898c.png" width="250"> </td> 
 <td><a href="https://blog.csdn.net/weixin_69553582/article/details/128141522" title="巴斯光年python turtle绘图__附源代码" rel="nofollow">巴斯光年python turtle绘图__附源代码</a></td> 
 </tr> 
 <tr> 
 <td>19</td> 
 <td> <img alt="074cd3c255224c5aa21ff18fdc25053c.png" height="140" src="https://img-blog.csdnimg.cn/074cd3c255224c5aa21ff18fdc25053c.png" width="250"> </td> 
 <td><a href="https://blog.csdn.net/weixin_69553582/article/details/128015962" title="Three.js实例详解___旋转的精灵女孩(附完整代码和资源)" rel="nofollow">Three.js实例详解___旋转的精灵女孩(附完整代码和资源)</a></td> 
 </tr> 
 <tr> 
 <td>18</td> 
 <td> <img alt="daecd7067e7c45abb875fc7a1a469f23.png" height="140" src="https://img-blog.csdnimg.cn/daecd7067e7c45abb875fc7a1a469f23.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/127799077?spm=1001.2014.3001.5501" title="草莓熊python turtle绘图（玫瑰花版）附源代码" rel="nofollow">草莓熊python turtle绘图（玫瑰花版）附源代码</a> </td> 
 </tr> 
 <tr> 
 <td>17</td> 
 <td> <img alt="fe88b78e78694570bf2d850ce83b1f69.png" height="140" src="https://img-blog.csdnimg.cn/fe88b78e78694570bf2d850ce83b1f69.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/127799004" title="立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦" rel="nofollow">立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦</a> </td> 
 </tr> 
 <tr> 
 <td>16</td> 
 <td> <img alt="c5feeb25880d49c085b808bf4e041c86.png" height="140" src="https://img-blog.csdnimg.cn/c5feeb25880d49c085b808bf4e041c86.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/127505979" title="皮卡丘python turtle海龟绘图（电力球版）附源代码" rel="nofollow">皮卡丘python turtle海龟绘图（电力球版）附源代码</a> </td> 
 </tr> 
 <tr> 
 <td>15</td> 
 <td> <img alt="38266b5036414624875447abd5311e4d.png" height="140" src="https://img-blog.csdnimg.cn/38266b5036414624875447abd5311e4d.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/127582251" title="【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)" rel="nofollow">【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)</a> </td> 
 </tr> 
 <tr> 
 <td>14</td> 
 <td> <img alt="03ed644f9b1d411ba41c59e0a5bdcc61.png" height="140" src="https://img-blog.csdnimg.cn/03ed644f9b1d411ba41c59e0a5bdcc61.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/127131591" title="草莓熊python turtle绘图（风车版）附源代码" rel="nofollow">草莓熊python turtle绘图（风车版）附源代码</a> </td> 
 </tr> 
 <tr> 
 <td>13</td> 
 <td> <img alt="09e08f86f127431cbfdfe395aa2f8bc9.png" height="140" src="https://img-blog.csdnimg.cn/09e08f86f127431cbfdfe395aa2f8bc9.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/126624379" title="用代码过中秋，python海龟月饼你要不要尝一口？" rel="nofollow">用代码过中秋，python海龟月饼你要不要尝一口？</a> </td> 
 </tr> 
 <tr> 
 <td>12</td> 
 <td> <img alt="40e8b4631e2b486bab2a4ebb5bc9f410.png" height="140" src="https://img-blog.csdnimg.cn/40e8b4631e2b486bab2a4ebb5bc9f410.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/126365799" title="《 Python List 列表全实例详解系列》__系列总目录" rel="nofollow">《 Python List 列表全实例详解系列》__系列总目录</a> </td> 
 </tr> 
 <tr> 
 <td>11</td> 
 <td> <img alt="938bc5a8bb454a41bfe0d4185da845dc.jpeg" height="140" src="https://img-blog.csdnimg.cn/938bc5a8bb454a41bfe0d4185da845dc.jpeg" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/126110424" title="用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）" rel="nofollow">用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）</a> </td> 
 </tr> 
 <tr> 
 <td>10</td> 
 <td> <img alt="0f09e73712d149ff90f0048a096596c6.png" height="140" src="https://img-blog.csdnimg.cn/0f09e73712d149ff90f0048a096596c6.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/126006585" title="Python函数方法实例详解全集(更新中...)" rel="nofollow">Python函数方法实例详解全集(更新中...)</a> </td> 
 </tr> 
 <tr> 
 <td>9</td> 
 <td> <img alt="93d65dbd09604c4a8ed2c01df0eebc38.png" height="140" src="https://img-blog.csdnimg.cn/93d65dbd09604c4a8ed2c01df0eebc38.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/125986622" title="matplotlib 自带绘图样式效果展示速查（28种，全）" rel="nofollow">matplotlib 自带绘图样式效果展示速查（28种，全）</a> </td> 
 </tr> 
 <tr> 
 <td>8</td> 
 <td> <img alt="aa17177aec9b4e5eb19b5d9675302de8.png" height="140" src="https://img-blog.csdnimg.cn/aa17177aec9b4e5eb19b5d9675302de8.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/125776190" title="手机屏幕坏了____怎么把里面的资料导出（18种方法）" rel="nofollow">手机屏幕坏了____怎么把里面的资料导出（18种方法）</a> </td> 
 </tr> 
 <tr> 
 <td>7</td> 
 <td> <img alt="1750390dd9da4b39938a23ab447c6fb6.jpeg" height="140" src="https://img-blog.csdnimg.cn/1750390dd9da4b39938a23ab447c6fb6.jpeg" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/125532836" title="2023年6月多家权威机构____编程语言排行榜__薪酬状况" rel="nofollow">2023年6月多家权威机构____编程语言排行榜__薪酬状况</a> </td> 
 </tr> 
 <tr> 
 <td>6</td> 
 <td> <img alt="dc8796ddccbf4aec98ac5d3e09001348.jpeg" height="171" src="https://img-blog.csdnimg.cn/dc8796ddccbf4aec98ac5d3e09001348.jpeg" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/125403845" title="Python中Print()函数的用法___实例详解(全，例多）" rel="nofollow">Python中Print()函数的用法___实例详解(全，例多）</a> </td> 
 </tr> 
 <tr> 
 <td>5</td> 
 <td> <img alt="1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg" height="171" src="https://img-blog.csdnimg.cn/1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/125289540" title="色彩颜色对照表（300种颜色）(16进制、RGB、CMYK、HSV、中英文名)" rel="nofollow">色彩颜色对照表（300种颜色）(16进制、RGB、CMYK、HSV、中英文名)</a> </td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td> <img alt="80007dbf51944725bf9cf4cfc75c5a13.png" height="140" src="https://img-blog.csdnimg.cn/80007dbf51944725bf9cf4cfc75c5a13.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/124966437" title="Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）" rel="nofollow">Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）</a> </td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td> <img alt="c6374d75c29942f2aa577ce9c5c2e12b.png" height="171" src="https://img-blog.csdnimg.cn/c6374d75c29942f2aa577ce9c5c2e12b.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/124893550" title="Tomcat 启动闪退问题解决集（八大类详细）" rel="nofollow">Tomcat 启动闪退问题解决集（八大类详细）</a> </td> 
 </tr> 
 <tr> 
 <td>2</td> 
 <td> <img alt="5218ac5338014f389c21bdf1bfa1c599.png" height="171" src="https://img-blog.csdnimg.cn/5218ac5338014f389c21bdf1bfa1c599.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/124893517" title="Tomcat端口配置（详细）" rel="nofollow">Tomcat端口配置（详细）</a> </td> 
 </tr> 
 <tr> 
 <td>1</td> 
 <td> <img alt="fffa2098008b4dc68c00a172f67c538d.png" height="171" src="https://img-blog.csdnimg.cn/fffa2098008b4dc68c00a172f67c538d.png" width="250"> </td> 
 <td> <a href="https://blog.csdn.net/weixin_69553582/article/details/124845408" title="Tomcat10 安装（Windows环境）（详细）" rel="nofollow">Tomcat10 安装（Windows环境）（详细）</a> </td> 
 </tr> 
 </tbody> 
</table>

[a478ece1430f4acdaae568fcee6dcafa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/47f7b5158169429b8f6071a9c7a8b055.png
[da75af90574f4d11a2ac400f7669de1f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/79f065a910e241038741ec8a2446a6c7.png
[6beb46c54008420aabc76a765e365a48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2165944d0eb54554a652892b85663f43.png
[7a66d9115ddd4ee08f9ad20c47e9d20b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bf9bd9247af343fb846b7aabc130b043.png
[47eded33e29a4f2e9e8b76a271181334.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/81b936d043224be9ad913c80ffb08b75.gif
[Three.js]: https://blog.csdn.net/weixin_69553582/article/details/128027109
[5fbb17651a4242e1beecf64f00f044a4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bf2be50adbb845f89a3c759690b87142.gif
[Three.js 1]: https://blog.csdn.net/weixin_69553582/article/details/128015962
[Three.js 2]: https://blog.csdn.net/weixin_69553582/article/details/128141516