1.threejs结合vue3实现一个自动旋转的贴图源贴图正方体-材质贴与环境贴
2.带你入门three.js——从0到1实现一个3d可视化地图
3.Vue3 + Three.js 联手,如何实现酷炫的 3D 模型交互预览
4.Threejs粒子云切换效果的实现
5.ThreeJS 跨域

threejs结合vue3实现一个自动旋转的正方体-材质贴与环境贴

       为了实现基于Three.js和Vue3的自动旋转正方体，我们首先需要加载材质贴图与环境贴图以实现更真实的贴图源贴图渲染效果。Three.js提供了纹理加载器TextureLoader，贴图源贴图可以轻松加载作为贴图。贴图源贴图

       材质贴图用于模拟物体表面的贴图源贴图颜色和纹理。加载纹理时，贴图源贴图最迪士尼源码可以使用TextureLoader实例的贴图源贴图load方法，将URL作为参数传递，贴图源贴图加载完成后，贴图源贴图纹理被存储在加载器的贴图源贴图内部。加载完毕后，贴图源贴图可以使用材质的贴图源贴图map属性引用加载的纹理。为了实现自动旋转的贴图源贴图正方体，可以使用Three.js中的贴图源贴图AnimationLoop或使用Vue3的生命周期钩子来定时更新旋转角度。

       环境贴图（CubeTexture）用于模拟光源，贴图源贴图提供物体的镜面反射效果。通过立方体贴图，可以模拟出真实的环境反射效果。加载立方体贴图时，需要使用CubeTextureLoader，它能从一个包含六个图像的数组加载立方体贴图。加载完成后，使用环境贴图的reflective属性设置立方体贴图作为环境映射。

       接下来，我们将使用Vue3来构建一个简单的组件，用于展示自动旋转的正方体。在组件中，我们首先引入Three.js和Vue3所需的库，然后创建一个渲染函数，用于创建场景、相机和渲染器。在组件的生命周期钩子中，我们可以初始化立方体贴图和材质，同时添加一个定时器来更新旋转角度。

       在数据属性中，我们可以定义旋转速度和当前旋转角度，通过定时器在每个动画帧更新这两个值。同时，试看20源码更新材质的旋转角度属性，以实现正方体的自动旋转效果。在模板中，我们可以使用Three.js的几何体和材质创建正方体，并将其添加到场景中。最后，确保在组件销毁时停止定时器，避免内存泄漏。

       通过上述步骤，我们成功地实现了基于Three.js和Vue3的自动旋转正方体，并结合材质贴图和环境贴图来提高渲染效果。这样不仅能够展示物体的真实感，还能实现流畅的动画效果，满足用户对视觉体验的需求。

带你入门three.js——从0到1实现一个3d可视化地图

       前言

       终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么

       3d框架的选择——three.js

       为什么选择three.js

       three.js 对 WebGL 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。你不懂计算机图形学，只要理解了three.js的一些基本概念就可以。

       Threejs 的基本要素——场景

       定义如下：

       「场景」：是一个三维空间，所有物品的容器。你可以往里面添加物体，比如正方体、矩形等。three.js 整个之间的关系是一个「树形结构」。

       Threejs 的短期底部源码基本要素——相机

       「相机」：用来确定位置、方向、角度，相机看到的内容就是我们最终在屏幕上看到的内容。three.js 中的相机分为两种，一种是正交相机 和透视相机。

       透视相机

       视锥体由6个裁剪面围成，构成视锥体的4个侧面称为上左下右面，分别对应屏幕的四个边界。为了防止物体离摄像机过近，设置近切面，同时为了防止物体离摄像机太远而不可见，设置远切面。透视相机最大的特点就是符合我们人眼观察事物的特点， 近大远小。

       正交相机

       正交相机的特点就是视椎体是一个立方体。在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的中物体的大小都保持不变。

       Threejs 的基本要素——网格

       网格由三角形组成的网格来描述。一条弧线是由多条线段得到，线段的数量越多，越接近弧线。在计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。three.js 提供了一些常见的几何形状，有三维的也有二维的。

       2d与3d

       有了形状，可能渲染出来的图形没有美丽的样子，这时候材质就出来了。材质+几何体就是一个 mesh。three.js 提供了一些比较有代表性的材质，常用的用漫反射、镜面反射两种材质，还可以引入外部，贴到物体表面，成为纹理贴图。

       Threejs 的mfc CSTRiNG 源码基本要素——灯光

       Threejs 支持模拟不同光源，展现不同光照效果，有环境光、平行光、聚光灯、点光源等。

       Threejs 的基本要素——渲染器

       渲染器就是去渲染你场景中灯光、相机、网格等。

       可视化地图——three.js实现场景的搭建

       场景搭建包括照相机、渲染器，我用一个map类来表示。场景有了，灯光也有了，接下来我们看下样子。

       对场景黑乎乎的什么都没有，接下来我们随便加一个长方体并且调用renderer的render方法。

       按照上面的步骤去做，你会发现页面还是明明都已经加了，为什么呢？「默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可」

       所以只要将照相机的位置z轴属性调整一下就可以到了

       这时候有同学就会问，嗯搞了半天不和canvas 2d 一样嘛，有什么区别？ 看不出立体的感觉？ OK 接下来我就让这个立方体动起来。其实就是不停的去调用我们render函数。我们用requestanimationframe。尽量还是不要用setInterval，有一个很简单的优化。

       效果如下图所示：

       是不是有那个立体的感觉了？我以最简单的立方体的旋转，带大家从头入门下three.js。 如果看到这里觉得对你有帮助的话，希望你能给我点个赞哦，感谢各位老铁了！下面正式地图需求分析。

       地图数据的留言页源码获得

       获取地图数据，大家可以了解下openStreetMap，这是一个可供自由编辑的世界地图。有了点才能生成线，最后才能生成平面。这里涉及到一个知识点，「墨卡托投影转换」。墨卡托投影转换可以把我们经纬度坐标转换成我们对应平面的2d坐标。

       我直接用可视化框架——「d3」 它里面有自带的墨卡托投影转换。由于中国有很多省,每个省都对应一个Object3d。

       Object3d是three.js 所有的基类, 提供了一系列的属性和方法来对三维空间中的物体进行操纵。通过.add( object )方法来将对象进行组合，该方法将对象添加为子对象。我这里的整个中国是一个大的Object3d，每一个省是一个Object3d，省是挂在中国下的。很明显，在three.js 是一个很典型的树形数据结构。

       我们看下代码：

       整体框架定下来了，接下来我们进入核心环节。

       生成地图几何体

       这里用到了 Three.shape() 和 THREE.ExtrudeGeometry（）。为什么会用到这个呢？首先每一个省份轮廓组成的下标是一个 2d坐标，但是我们要生成立方体，shape() 可以定义一个二维形状平面。它可以和ExtrudeGeometry一起使用，获取点，或者获取三角面。

       我们看下代码：

       代码如下：

       遍历第一个点的的和canvas2d画图其实是一模一样的，移动起点，然后后面在划线，画出轮廓。然后我们在这里可以设置拉伸的深度，然后接下来就是设置材质了。lineGeometry 其实 对应的是轮廓的边线。我们看下吧：

       相机辅助视图

       为了方便调相机位置，我增加了辅助视图， cameraHelper。然后你回看下屏幕会出现一个十字架，然后我们就可以不断地调整相机的位置，让我们地地图处于画面的中央：

       经过辅助的视图地不断调整：

       是不是有那个立体感了？到这里我们的中国地图已经在画布的中央了就已经实现了。

       增加交互控制器

       现在地图是已经生成了，但是用户交互感比较差，这里我们引入three的OrbitControls 可以用鼠标在画面随意转动，就可以看到立方体的每一个部分了。

       射线追踪

       但是这个方法不在three 的包里面，得单独引入一个文件。我们可以对canvas监听的onmouseMove事件，然后 我们就可以知道当前移动的鼠标是选择的哪一个mesh。但是在这之前，我们先对每一个province这个对象上增加一个属性来表示他是哪一个省份的。

       引入射线追踪，带入如下：

       由于我们不停地在在画布移动，所以需要不停的的射线位置。现在有了射线，那我们需要场景的所有东西去比较了，rayCaster 也提供了方法：

       这个intersects得到的交叉很多，但是呢我们只选择其中一个，那就是物体材质个数有两个的，因为我们上面就是用对mesh用两个材质。

       过滤代码如下：

       看下效果图：

       增加tooltip

       为了让交互更加完美，找到了同时在鼠标右下方显示个tooltip，那这个肯定是一个div默认是影藏的，然后根据鼠标的移动移动相应的位置。

       第一步新建div

       第二步设置样式 默认是影藏的

       第三步更改div的位置：

       最后一步设置tooltip的名字：

       到这里，整个3d可视化地球项目已经完成了，我们一起来看下效果吧。

       总结

       如果觉得看完对你有帮助的话，希望你不要吝啬你手中的 ，点个 和关注是对我最大的支持，知识输出不容易，而我勿忘初心，持续分享可视化的好文章。如果你对可视化感兴趣，你可以关注下面我的可视化专栏，或者可以关注我的公众号：「前端图形」，持续分享计算机图形学知识。本篇文章的所有代码都在我的 github 上 欢迎star，最后文章有哪里写的不对的地方，欢迎指正交流。

Vue3 + Three.js 联手,如何实现酷炫的 3D 模型交互预览

       通过自学threejs，深入探索了模型预览、环境贴图、模型的交互操作，如旋转、缩放和平移，以及打光、清晰度调整。此教程详细介绍了threejs的几个核心方面，旨在帮助开发者实现酷炫的3D模型交互预览。下面让我们逐一探索这些关键点。

       一、threejs安装

       通过npm或yarn轻松安装threejs库，确保项目能快速启动threejs。

       二、场景创建

       HTML和JavaScript的结合，构建动态的3D场景，为模型的展示提供舞台。

       三、模型引入

       将3D模型导入threejs环境，实现模型的加载与显示。

       四、交互事件

       定义变量，实现模型的旋转、缩放和平移，提供用户与模型互动的界面。

       五、优化调整

       精心设计打光方案与清晰度设置，确保模型在不同环境下的表现最佳。解决ios上safari网页缩放问题，确保模型的视觉体验不受影响。

       六、参考资源

       丰富的模型资源来自sketchfab.com或market.pmnd.rs，环境贴图hdr下载自hdrmaps.com。threejs官方文档为开发者提供指南和详细教程。

       七、总结与交流

       欢迎提出疑问或分享见解，与开发者社区交流心得。初次撰写文章，期待得到大家的支持与鼓励，点个赞表示认可。

Threejs粒子云切换效果的实现

       本文探讨Three.js中粒子与精灵的概念，利用精灵Sprite实现多种场景效果，如模拟雨滴、雪花。最终实现粒子云切换效果，即一组粒子渲染成几何体，并在不同几何体之间来回切换，效果酷炫。首先，讲解粒子基础知识，如Sprite与Mesh的区别。Sprite作为二维平面，无阴影效果，适合实现下雪、火焰爆炸等效果。创建Sprite简单，仅需精灵材质。演示了如何创建x矩阵并设置随机颜色，展示效果。

       接着，介绍如何利用Sprite模拟下雨效果。下载雨滴素材，通过TextureLoader加载到SpriteMaterial。在xx范围内生成个精灵Sprite，每次渲染减少Y轴坐标，实现下落效果。设置镜头near参数避免过于靠近镜头的雨滴不渲染，最终展示下雨效果。

       进入粒子领域，重点讲解Points。Points更适用于处理大量粒子场景，性能优越。Points创建时接收形状与材质参数，BufferGeometry作为形状构建基础，提供了大量内置形状。通过Points实现漫天飞雪效果，创建随机点并应用雪花贴图，演示效果。

       粒子切换效果实现，通过改变模型顶点实现几何体切换。封装changeGeometry函数，处理变换前后顶点数组长度不一致问题。优化mixFloatArray函数，避免生成随机数，使用原始数组补足缺失数据，优化切换效果。实现基本切换后，优化代码提升效率，保证效果流畅。

       最后，讨论滚动切换效果。封装slideTo函数控制模型切换，监听滚动事件实现动态切换。演示了如何在页面中实现粒子云随滚动切换不同几何体。总结粒子效果实现过程，深入学习粒子基础知识，掌握Three.js中精灵与粒子的应用，通过数学思维解决顶点计算问题，展示高级效果。

       点击访问最终实现效果。

ThreeJS 跨域

       在使用 ThreeJS 进行地球材质贴图时，遇到了跨域的问题，导致出现报错。为解决此问题，有多种方案可供选择。

       方案一涉及修改 ThreeJS 的配置，以允许跨域请求。具体步骤包括设置服务器端的 CORS（跨源资源共享）策略，使客户端能成功获取跨域资源。通过修改服务器端配置文件或使用第三方代理服务器等方式实现。

       方案二涉及客户端代码的优化。例如，通过使用同源策略的例外情况，如设置请求头中的`Access-Control-Allow-Origin`字段，允许特定来源的请求。同时，可以利用``标签来统一设置跨域策略，简化代码实现。

       在实际应用中，添加允许跨域请求的代码后，ThreeJS 的请求跨域问题得到了解决。然而，浏览器跨域的问题依然存在，需要从服务器端进行配置解决。

       具体实现方法是，服务器端如 IIS、Tomcat 或者 Nginx 需要开启 CORS 支持。这通常涉及修改 web 服务器的配置文件，例如在 Nginx 中添加`Access-Control-Allow-Origin`和`Access-Control-Allow-Methods`等头部响应信息，以允许来自特定域名的请求。通过这些配置，浏览器能正确解析 CORS 响应头，从而解决跨域问题。