weixin_63443072的博客

在 Three.js 中，和都是用于自定义着色器的材质类，但它们的核心区别在于。

开始觉得比 gsap 动画更舒服了。

需要注意的点是：一定要给给物体设置好名称。

大家不要被这个“管道漫游”这几个字所蒙骗了，学完后大家就知道这个知识点有多脏了。我也是误入歧途，好奇了一下“管道漫游”。好了，现在就给大家展示一下为啥这个只是点脏了。我也废话少说了，带大家实现这个轨道漫游。

包围盒Box3，就是一个长方体空间，把模型的所有顶点数据包围在一个最小的长方体空间中，这个最小长方体空间就是该模型的包围盒Box3。包围盒Box3表示三维长方体包围区域，使用min和max两个属性来描述该包围区域，Box3的min和max属性值都是三维向量对象Vector3。描述一个长方体包围盒需要通过xyz坐标来表示，X范围[Xmin,Xmax],Y范围[Ymin,Ymax],Z范围[Zmin,Zmax],.min属性值是.max属性值是。

实现的方式很简单，设置一受光源影响的材质，例如 MeshLambertMaterial，然后再设置一下边界线，将边界线添加在 物体mesh 上面，即可展示。由于加载glb模型一般可能模型的材质的受光照影响的，所以这里需要设置一下环境光在去加载glb文件。其实这个效果实现的方式和案例1也一样，只不过这里用的是SphereGeometry创建的多边体。

说shape是平面雕刻大师一点都不为过。shade可以雕刻出各种复杂的平面，包括房子的那种什么c4d设计图纸。然后通过曲线的拉伸，将建筑立体化。

一个shape构成的平面和曲线轨迹，将平面顺着曲线移动，得到的多边体产物。把曲线中间的部分给填充一个平面。把曲线中间的部分进行拉长。

构造函数：TubeGeometry(路径，路径方向细分数，半径，圆弧数，闭合)如何让一个曲线变粗呢？那当然是使用管道TubeGeometry啦~

没错这是一个u形的线条。这是三条线条组合成的。分别是两条直线和一条曲线，不过需要用到一个曲线组合器CurvePath。先看一个效果，大家看一下是如何实现的。

样条曲线是曲线的核心，通过几个二维坐标或者三维坐标就可以实现一些曲线，这里给大家分开讲解二维样条曲线和三维样条曲线以及贝塞尔曲线。这些样条曲线就像是曲线的灵魂，先赋予灵魂再放入BufferGeometry ，BufferGeometry是灵魂的存放体，也可以当做是肉体。

在没有学会曲线的时候，如果现在去实现一个圆形边框，那如何实现咧？那必然是要用到缓冲几何体，BufferGeometry 和 一些数学公式。

这里用到了new URL('', import.meta.url).href 方法加载图片是因为，我是用Vue+Vite构建的项目，然后文件资源并没有放在public下面，所以这里是需要动态去加载图片的。实现这个效果，如果会这个三个知识点当然就更好了。不会也没关系，代码里面给大家留着注释。其实扫光效果也就是创建了另一个大一点的球包住地球，然后通过去调节局部的颜色来实现的。这里需要两个光线，环境光用来提高地图的亮度，平行光用作局部高亮效果。

这里用到的知识点比较少，都是常识：着色器、光线、贴图。实现这个效果，如果会这个三个知识点当然就更好了。不会也没关系，代码里面给大家留着注释。

【代码】实现3D热力图。

首先需要一段热力信息的json，我放在头部了。然后就是需要de-geo库了。

别的我也不多说了，效果和代码都放这里了。

方法一：BufferGeometryUtils加上 着色器。方法二：圆柱体 加上 半透明图片

答案当然是数量，生成的建筑过多，那么一定会卡顿模糊，所以。生成建筑的难点而是在于对性能的优化。生成建筑，重点在于，BufferGeometryUtils

假设你有一个场景，其中包含多个简单的几何体（如立方体、球体等），你可以将它们合并成一个单一的几何体，以减少渲染调用次数。

这里主要用到的就是threejs的shader，至于其他知识点，可以参考。

这里主要用到的就是threejs的shader，至于其他知识点，可以参考。

【代码】根据JSON绘制3D地区。

如果你已经了解了这四点，那么相信你已经知道了，这是一个后期处理的一个工作流程。

世界地图，带有国家（地区）的 ISO 3166 代码、中文简称与全称。含中国南海海域十段线。在引入的地方有使用到一个文件 earthquake.json我也一块放在资源里面了。@surbowl/world-geo-json-zh ：这个第三方包是简体中文。最后在vue的onMounted生命周期里面调用就好了。three ：这个我就不用说了。

既然是通过canvas来绘制地图，那肯定是需要地图的数据信息的。接下来跟着我的脚步去实现这些细节。

如果你在threejs中做数据可视化，需要加载大量数据的话，那么肯定是需要用到InstancedMesh的。InstancedMesh用于实例化大量相似几何体的一种高效方法。它通过使用硬件加速的实例化技术来渲染多个共享同一几何体和材质的对象，从而减少了内存消耗和提高了渲染性能。

比如一条直线，你把直线几何体两个端点，分别设置一个颜色，threejs会根据两端的颜色，在两点之间，按照距离远近插入不同颜色，就是所谓的颜色插值计算，距离某个点越近受某个点颜色影响越大。以这个距离距离r作为临界值，每个方形点的所有片元凡是距离中心vec2(0.5, 0.5)的距离大于r，都舍弃，就会生成一个圆形的点。对于网格的三角形也是类似，三角形内部一个点的颜色，同时收到三个点的颜色影响，距离某个点越近，受影响越大。的时候，threejs会在内部给你写的顶点着色器代码中，插入一行代码。

有些模型文件直接使用GLTFLoader加载会报错，如果格式没有问题的话，很可能就是这个模型文件被压缩了。压缩也是可以加载的更快嘛~现在就来说说这个坑。http://www.webgl3d.cn/pages/09c637/ 这个连接有很详细的说明这个咋个解压或者压缩模型文件的，但是有个地方这句话有坑：大概能就是去找到这个依赖文件夹去复制到某个路径下去，因为我这里用的构建工具，那么打包的话public文件夹下的东西肯定是不会动的，而且会打包到根路径，因此代码要这样写：

【代码】Three.js的Shader展示16张瓦片图。

如果你想模拟下雨效果，一个雨滴用一个3D水滴形曲面表示，假设一个水滴用40个三角形表示，1万个雨滴，就是40万个三角形，精灵模型Sprite在threejs内部就像相当于两个三角形构成的矩形，1万个精灵模型，相当于2万个三角形，Sprite模拟雨滴相比比3D曲面几何体表示雨滴顶点数量就会少很多，这样threejs渲染性能就更好。非常简单，你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。.clearcoat的范围0到1，默认0。

2.球体，用一张全景图片贴在球上。效果比较好，但是做网页的话，图片会非常大。所以可以优化：把全景图切割成瓦片图，请求的时候图片懒加载。而且要包两层，这样看起来不那么丑。但是现在咱们要搞视频全景，配合上设备方向识别。不就可以实现“vr”效果了吗？以vue3为例，直接上代码。先说说市面上比较流行的3d全景web基本是图片来制作的。1.环境贴图，六个面把透视相机包起来。

【代码】Threejs3D看房思路教学。