先上图
相信很多人都见过，或者写过类似的效果，但是很多代码记录过老，基本都是r129的，现在都r154了，老的太夸张，只能用于学习入门。
有的同学说，你能不能修改成最新的呀，好吧，我抽了时间，把之前的版本修改成了最新版本，发现坑太多了，做个记录。
坑1 ：
类没有了，变化了
PlaneBufferGeometry变成了PlaneGeometry，r154版本没有PlaneBufferGeometry了
ParticleBasicMaterial和ParticleSystem 类都变化了PointsMaterial，Points
THREE.Ray 方法都变化了，传参值不一致了
哎，太坑了，修改吧
坑2
颜色变化
以为该修改的，都修改了，兴奋的合不拢嘴
看看效果先
哎，什么鬼，怎么是这样的 效果，完全不一样呀，傻眼了，查找原因吧
材质不一样，难道是灯光问题，不管了，调整灯光，各种参数，无语，最后没有效果
突然想起来了，r152 新增了颜色管理器，难道和这个有关系
问问chartgpt吧，
问：更新到r152后，渲染的颜色变化了，如何处理
答：
如果在更新到Three.js的版本r152后，渲染的颜色发生了变化，你可以尝试以下方法来处理：
-
检查渲染器(Renderer)的颜色管理属性是否正确设置。确保outputEncoding和toneMapping等属性与你的应用程序的需求一致。
-
如果你在项目中使用了自定义的材质(Material)或纹理(Texture)，确保将它们的colorSpace属性正确设置。根据你的需求，将其设置为THREE.ColorSpace线性编码（例如：THREE.LinearEncoding）或者THREE.sRGBEncoding。
-
如果你的场景(Scene)中使用了后期处理(Post-processing)特效或自定义着色器(Shader)，确保在应用这些特效之前或在着色器中正确处理颜色管理。你可能需要将颜色从色彩空间转换为正确的色彩配置。
-
确保在渲染循环(Render Loop)的每一帧渲染之前，正确更新色彩空间(ColorSpace)的状态，使用colorSpace.update()方法。
-
如果你使用了外部库或插件，检查它们是否与Three.js的版本r152兼容。有时，版本更新可能会导致一些插件或库的不兼容问题，这可能会对渲染结果产生影响。
如果以上方法仍然无法解决问题，你可以尝试退回到之前的版本或是研究具体的变更，看看是否有其他解决方案可用。此外，向Three.js的社区或官方论坛寻求帮助也是一个好的选择，他们可以提供更具体的指导和支持。
奥，突然有思路了，颜色修改了，不一致了，先修改一个试一试
加
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ReinhardToneMapping;
在修改
看着，有点相似了，整体还是感觉暗。
调整灯光，稍微亮点了，哎，感觉 太费劲了，渲染的效果，之前版本，颜色偏深，剩下的留给大家思考修改啊
需要 r154 版本代码的，联系作者
技术交流
qq 2945853209
后面会吧效果，更新到网站中：threelab实验室 www.threelab.cn
差点忘记了，里面用到了一个 数据算法，
THREE.Ray
留给大家思考，计算公式我会用图像的方式，绘制出来，讲解一下为什么这么写
留给大家思考：
为什么 用的三阶贝塞尔曲线 而不是 二阶贝塞尔曲线
提示 ：
