演示地址:https://threelab.cn/pro/#/earth
先上图
相信很多人都见过,或者写过类似的效果,但是很多代码记录过老,基本都是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
留给大家思考,计算公式我会用图像的方式,绘制出来,讲解一下为什么这么写
留给大家思考:
为什么 用的三阶贝塞尔曲线 而不是 二阶贝塞尔曲线
提示 :