NanChen的博客

用于获取地图的位置以及到下一个目的地的总路程，可以将实际路程转成自己配置的路程，以及正在路上的标识，可以用头像表示，经过的地方可以嵌入链接点击进行跳转如果是 Vue 写的话需要从生命周期中获取 Dom 元素动画渲染函数用于制作开始场景镜头动画(由远到近并附带略微旋转)这个动画在后面会用到，是根据滚动下方内容进行左右镜头旋转的动画效果此时星空就已经搭建好了，可以左右旋转试试效果其实也就是创建一个球，然后贴个准确的贴图放在圆上调整一些光感即可绘制红色圆点和点与点之间的飞线效果用画布渲染

正投影相机和透视相机的区别如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果透视投影相机一般是人在场景用漫游，或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体，此长方体就是 Box3改变相机的位置.position，三维场景在 canvas 画布上呈现不同的效果，如果连续改变相机的位置.positi

两个模型重叠的模型，通过浏览器旋转预览，会发现模型旋转的时候会发生闪烁。这种情况，主要是两个模型重合，电脑分不清谁在前谁在后，这种情况，可以理解为深度冲突。效果：适当偏移，解决深度冲突，偏移尺寸相对模型尺寸比较小，视觉上两个几何体近似还是重合效果。这种情况我这里遇到过一次，通过压缩模型后进行放大缩小会发现出现模型闪烁的 bug，所以这里可以用解决冲突问题。注意：如果两模型面间隙过小，或者重合，，此渲染器对数深度缓冲区也是没有效果的区别：不加这里拿来测试这里可以进行判断，如果等于100，也就

- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;-- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;

和都是拥有金属度、粗糙度属性的PBR材质，是的子集，除了继承了他的这些属性以外，还新增了清漆、透光率、反射率、光泽、折射率等等清漆层属性可以用来模拟物体表面刷了一层透明的模的范围0到1，默认0。关于MeshPhysicalMaterial材质是Three.js中的一种材质类型，它是基于物理的渲染（PBR）材质，可以模拟真实世界中的光照和材质反射。它支持金属和非金属材质，可以设置粗糙度、金属度、环境光遮蔽、法线贴图、位移贴图等属性，以实现更真实的渲染效果。还支持高光反射和透明度，可以用于创建逼真的玻璃、水

如果想使用环境贴图对scene所有Mesh添加贴图材质，可以通过Scene的场景环境属性.environment实现,把环境贴图对应纹理对象设置为.environment的属性值即可。用于设置环境贴图的强度。当然在实际开发中，环境贴图的不同也会对渲染效果造成影响，也需要选择合适的贴图，往往这种贴图可以让美术提供即可。表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。总结：粗糙度越小，反射效果越强，如果设置为0，那么他将完全镜面反射，等同于镜子。

前端推荐使用 Blender 三维建模软件，模型推荐使用 gltf 或者 glb 文件。后续会更新 Blender 的使用方法glTF（GL Transmission Format）是一种用于传输和加载 3D 模型的开放标准格式。它是由 Khronos Group 开发的，旨在提供一种轻量级、高效、可扩展的 3D 模型格式，以便在 Web 和移动设备等平台上实现快速加载和渲染。glTF 格式支持包括几何体、材质、纹理、动画和场景等多种 3D 模型元素，并且可以使用 JSON 格式进行序列化和压缩，从而减少

360°全景环绕

首先我们需要两个模型，一个是场景模型，另一个是人物模型。人物模型我这里用的Threejs官网中的给的模型，名称是。当然人物模型也可以自己去这个网站下载sketchfab，下载后给模型添加动画mixamo下载模型动画这里注意一下用Blander软件给模型添加动画的两种方式，具体写法的区别后面会说到方式一：把每个单独的动画拆分出来方式二：将所用到的动画统一放在一个时间戳中场景加载完后再放入人物模型：这里需要将控制器给取消，并且将初始镜头删除，把镜头给到人物模型到这里模型就全部引入完成注意：视频无

color 和 map 同时使用会出现重叠混合的现象，最好就是设置了 color 就不用设置 map，设置 map 就不用设置 color。把一个背景透明的.png 图像作为平面矩形网格模型 Mesh 的颜色贴图是一个非常有用的功能，通过这样一个功能，可以对 three.js 三维场景进行标注。texture.wrapS是WebGL中纹理对象的属性之一，用于指定纹理在水平方向上的重复方式。，将图片作为圆形的材质贴图，那么他就会将一张方形图片剪切渲染为圆形效果。的UV坐标会对颜色纹理贴图.map进行提取，

remove和visible的区别：remove是等同于删除某个模型对象，visible只是把模型隐藏起来。// 光源和网格模型Mesh对应一样是三维场景的一部分，自然需要添加到三维场景中才能起作用。， 模型默认是以原点为中心，所以要把他拿到X、Y轴上方就给他加一半的坐标，之后将父级。这里跟js中的remove()方法一致，选择对应的父节点删除里面的子节点即可。// 支持的参数：fov, aspect, near, far。这里注意：如果隐藏模型的材质，将会把所有同材质的模型进行隐藏。

通过 THREE.Group 类创建一个组对象 group,然后通过 add 方法把网格模型 mesh1、mesh2 作为设置为组对象 group 的子对象，然后在通过执行 scene.add(group)把组对象 group 作为场景对象的 scene 的子对象。也就是说场景对象是 scene 是 group 的父对象，group 是 mesh1、mesh2 的父对象。我们在开发的时候，会优先加载外部的模型，之后要对模型上添加标签锕，标点啊等等，就需要批量给子对象设置节点名称。

该类表示的是一个三维向量（3D vector）。绕着 xyz 轴分别旋转 45 度，0 度，90 度。可以设置模型在场景 Scene 中的位置。网格模型绕(0,1,0)向量表示的轴旋转π/20。复制一份和原对象一样的新对象，可以参考这种写法。设置模型 xyz 坐标。

本章节针对与几何体的基本概念进行效果展示

文章：Three.js 常见的几何体：常见的几何体：这里拿平面做示例：Three.js 的材质默认正面可见，反面不可见,对于矩形平面、圆形平面如果你想看到两面，可以设置。高光网格材质和基础网格材质、漫反射网格材质一样都是网格模型的 Mesh 的材质。注意：高光网格材质和漫反射网格材质一样会受到光照的影响。和都会收到光照的影响区别在于，对光线反射方式有差异。可以实现高光反射效果，而恰恰相反。所谓的高光，就比如你在一个太阳下方去看一个小汽车，你会在特定的角度及位置看到玻璃表面某个位置特别亮。可以提供一

通过 stats.js 库可以查看 three.js 当前的渲染性能，具体说就是计算 three.js 的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是 three.js 每秒钟完成的渲染次数，一般渲染达到每秒钟 60 次为最佳状态。Threejs 渲染的结果是一个 canvas 画布，画布也是 HTML 元素之一，布局和普通前端的习惯是一样的。方法的参数 mode 的数值设置首次打开页面，测试结果的显示模式，鼠标单击可以更换不同的显示模式。所谓的全屏渲染那就是把宽高改成当前窗口高度宽度即可。

Three.js中给出了多种模拟生活中光源的API，在文档中查找light就可以看到这三种光源看图片大家应该就可以理解，这里主要解释一下环境光后面还会说到环境光主要就是把周围的场景的光打在模型上，比如阴，晴，日，夜，黄昏，黎明等，烘托主体，突出主体，在不使主体淹没在背景中，还具备营造环境气氛的作用点光源PointLight可以类比为一个发光点，就像生活中一个灯泡以灯泡为中心向四周发射光线。这里代码需要用到点光源，坐标，将光源加载场景中三部即可渲染在浏览器中查看效果注意：这里的材质需要使用。

给模型添加标签时需要准标签部分从本章开始会从最初的搭建场景模型开始到插入精灵图部分结尾，便于刚入门three而不知如何去学起的前端工程师去学习，这里可以学到场景搭建的基础知识，引入外部模型以及动画，对模型添加标签以及优化模型方案等。详情可查找搭建3D场景需要认识一下场景Scene相机Camera三个概念，看张图片在创建模型在页面中显示出来时我们需要先创建一个场景(这里所用到的东西都在THREE中，直接就可以了)

引入外部模型太大？用DRACOLoader压缩一下！

👼学习本节课的重点是建立顶点的概念。如果你建立了顶点的概念，那么对于你深入理解学习 Three.js 很有帮助。类型化数组😋可以直接调用 BoxGeometry 直接创建一个立方体几何体，调用 SphereGeometry 创建一个球体几何体。下面代码通过 Threejs 引擎的BufferGeometry和BufferAttribute两个 API 自定义了一个具有六个顶点数据的几何体。三个点为一组渲染出三角形可以把上面的点连接起来一个立方体网格模型，有 6 个面，每个面至少两个三角形拼成一个..

里面的参数为(长，宽，高)代码var box=new THREE.BoxGeometry(100,100,100);通过构造函数THREE.BoxGeometry()创建了一个长宽高都是100的立方体，通过构造函数名字BoxGeometry也能猜出这个构造函数的意义，利用new关键字操作构造函数可以创建一个对象， 这都是Javascript语言的基本知识，至于THREE.BoxGeometry()构造函数具体是什么可以不用关心， 就像你使用前端使用JQuery库一样查找官方文档就可以，你可以把代码THREE