three.js如何实现这种材质效果[gif图像]？

three.js
这是一款商业游戏的场景背景。
我非常喜欢网格线效果。
我不知道如何描述它，网格线像波浪一样？
着色器可以实现此效果
正如@Waverider所说，您可能需要编写自己的着色器来实现此效果。首先，请看一看ShaderMaterial 40文档，特别是其中链接的示例代码。
开始编写自己的着色器是一件非常困难的事情，但从一些真正基本的着色器开始（尝试编写单色着色器，或将纹理映射到立方体），然后从那里开始。
当我第一次研究着色器时，我找到了这本互动书。nhttps://thebookofshaders.com/36resp.https://thebookofshaders.com/01/12
我真的很喜欢它。不同的语言是可用的！
然后我给初学者举了一些例子。也许这会有帮助。见http://threejs.hofk.de/18在中间。因为初学者的详细评论是用德语写的，所以我已经把它们复制到了https://www.deepl.com/translator10
翻译成英语。
我认为结果是有用的。试试看。
一个非常粗糙的解决方案，基于此酷炫的着色器：http://madebyevan.com/shaders/grid/103njsidle示例126nCode of=sin（p.x*.1-时间）*cos（p.z*.1-时间）==v*vec3（0,1,1.）*（sin（时间*5）。-pos.z*.25）*.5+=vec4（c，1.0）；}；
我以前忘了：
在那里http://glslsandbox.com/83是许多有趣的例子。@prisoner849谢谢你的精彩例子！nvec3>nI know vec3(0., 1., 1.)控制高亮颜色，ntime * 5控制波速，npos.z * .25是波的z轴宽度。
是否可能有很多网格瓷砖具有z轴，一次只显示一个波并保持较小的波z轴宽度。nhttps://jsfiddle.net/4ckvcd2t/数学是我的弱点，所以我不确定我是否能学会使用着色器。
谢谢其他人，我想提及你的名字，但我不能，对不起！
我真的不明白
https://jsfiddle.net/realhunts/4ckvcd2t/1/28
我只是好奇，为什么要有很多瓷砖平面而不是一个大的呢？njsfiddle 33示例
你可以像这样更改片段着色器的main()函数：nvoid main() = smoothstep(0., 5., mp) * (1. - smoothstep(s ->nI\"m not sure, though, how correct such an approach is, as it was made from a scratch. nTwo-dimensional schematicnThe game is about the player move forward, so that is the ground chunk, may be one chunk has a random gear(like a laser or box let the player to slide shovel or jump) and I can reuse the ground chunk.nSo the highlight wave of the chunk must can one by one light up, when get in the boss ground chunk, the highlight color may be change to red and speed up, I think this is very nice for the game atmosphere.nSo based on my idea for multi chunks and just can display one wave at a time for all chunksnI tried to change the step variable, for example like chunk1 step is 500, chunk2 step is 500*2 an so on, but failed.nMaybe the better way is by using the setInterval function of javascript to one by one light up the chunk?nBut how to calculate the highlight lifetime of one chunk?nYou can add the position of a chunk in the vertex shader, call it, for example, basePosPlanehunks 695×400 147 KB
一个非常粗糙和简单的jsfiddle 29示例。nuniform float time;uniform vec3 basePos;varying vec3>nWhen used with box geometry had a problem, the vertical mesh will lost the grid line of x axisnhttps://jsfiddle.net/806vun3k/1/ 21nI fixed itnhttps://jsfiddle.net/806vun3k/2/ 48nYep, well done! nUse it with the 6 side tube had a problem, the grid line not divided equally each mesh.nMy knowledge not enough to fix this problem nAnd how to setup the base color for grid line(default is black) ?image783×697 287 KBnhttps://jsfiddle.net/yfh2e0qa/2/ 21nAs an option, try to use uv coordinates of vertices in THREE.TubeBufferGeometry().nI>
都失败了
你知道你欠我六包吗，如果你不开始思考你自己？nvUv\\u线864×47518kbnhttps://jsfiddle.net/prisoner849/hg90shov/56
应该将uv传递给fragment=projectionMatrix*modelViewMatrix*=min（grid.x，grid.y）；返回1。-min（line，1.0）；}void main（）=1。-平滑步长（0,5,mp）*（1。-smoothstep（s->
仅供参考，我把它放在Shadertoy:Shader-Shadertoy BETA 31上
你可以像这样设置网格线的基色：nvec3>
而不是
vec3>
你好，保罗。请给我你的邮件，我想和你谈谈这个项目
How to achieve this material effect [gif image]?n

three.js如何实现这种材质效果[gif图像]？

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形