Three.js 纹理贴图偏移/重复对网格有效，但对点系统粒子忽略

我正在使用纹理图集来保存一系列图像。使用MeshLambertMaterial映射到网格时，使用Texture.offset和Texture.repeat可以完美地从整个图像中剪切出子纹理

但是，对PointCloudMaterial使用完全相同的纹理实例渲染整个图集的粒子，而不仅仅是选定的子图像

我试图遵循three.js源代码，但文档很少

有没有比用画布切碎图像更好的解决方法

编辑：根据要求，正在进行的工作可在。

THREE.PointCloudMaterial已重命名为THREE.PointsMaterial

THREE.PointCloud已重命名为THREE.Points

要将精灵图纸与点云一起使用

您可以创建自定义着色器材质，而不是对点使用PointsMaterial

自定义着色器材质可以访问精灵表，并为每个粒子使用不同的子图像

为此，请使用如下着色器：

属性向量2偏移量； 可变vec2偏移量； 真空总管{ vOffset=偏移量； gl_PointSize=25.0； gl_位置=投影矩阵*模型视图矩阵*向量4位置，1.0； } 均匀采样2D spriteSheet； 均匀vec2重复； 可变vec2偏移量； 真空总管{ vec2uv=vec2gl_PointCoord.x，1.0-gl_PointCoord.y； vec4 tex=纹理2D spriteSheet，uv*重复+vOffset； 如果tex.a<0.5，则丢弃； gl_FragColor=tex； } 然后

//几何学 几何体=新的三点几何体； //属性 var Numverties=20； var positions=新Float32Array numvitices*3；//每个点3个坐标 变量偏移量=新Float32Array numvitices*2；//每个点2个坐标 geometry.setAttribute“位置”，新的三个.BufferAttribute位置，3； geometry.setAttribute“offset”，新的三个.BufferAttribute偏移，2； //填充偏移量 var偏移=新的三个矢量2； 对于var i=0，指数=0，l=numvities；i three.js r.126

three.PointCloudMaterial已重命名为three.PointsMaterial

THREE.PointCloud已重命名为THREE.Points

要将精灵图纸与点云一起使用

您可以创建自定义着色器材质，而不是对点使用PointsMaterial

自定义着色器材质可以访问精灵表，并为每个粒子使用不同的子图像

为此，请使用如下着色器：

属性向量2偏移量； 可变vec2偏移量； 真空总管{ vOffset=偏移量； gl_PointSize=25.0； gl_位置=投影矩阵*模型视图矩阵*向量4位置，1.0； } 均匀采样2D spriteSheet； 均匀vec2重复； 可变vec2偏移量； 真空总管{ vec2uv=vec2gl_PointCoord.x，1.0-gl_PointCoord.y； vec4 tex=纹理2D spriteSheet，uv*重复+vOffset； 如果tex.a<0.5，则丢弃； gl_FragColor=tex； } 然后

//几何学 几何体=新的三点几何体； //属性 var Numverties=20； var positions=新Float32Array numvitices*3；//每个点3个坐标 变量偏移量=新Float32Array numvitices*2；//每个点2个坐标 geometry.setAttribute“位置”，新的三个.BufferAttribute位置，3； geometry.setAttribute“offset”，新的三个.BufferAttribute偏移，2； //填充偏移量 var偏移=新的三个矢量2； 对于var i=0，指数=0，l=numvities；i

---

three.js r.126

现在称为点云。您可以创建自己的着色器材质以与PointCloud一起使用，而不是PointCloud材质。这可以接受吗？我可能需要一些着色器的介绍。想回答吗？我写了一个着色器，完全按照你的建议。它适用于网格。对于PointCloud，它保持不可见，WebGL在每次渲染时都会抛出两个无效的_操作错误：drawArrays:缓冲区大小不足和VertexAttributePointer:必须绑定缓冲区。能否提供您的代码和一个简单的实时示例？如果您想查看它，请将其托管。此外，我编写的着色器不进行照明，并且长方体边缘在极端角度下看起来很奇怪，因此对于网格，我将返回到具有纹理偏移的LambertMaterial并重复。仍然想知道为什么你的建议不适用于PointSystems。它现在被称为PointCloud。您可以创建自己的着色器材质以与PointCloud一起使用，而不是PointCloud材质。这可以接受吗？我可能需要一些着色器的介绍。想回答吗？我写了一个着色器，完全按照你的建议。它适用于网格。对于PointCloud，它保持不可见，WebGL在每次渲染时都会抛出两个无效的_操作错误：drawArrays:缓冲区大小不足和VertexAttributePointer:必须绑定缓冲区。能否提供您的代码和一个简单的实时示例？如果您想查看它，请将其托管。此外，我编写的着色器不进行照明，并且长方体边缘在极端角度下看起来很奇怪，因此对于网格，我将返回到具有纹理偏移的LambertMaterial并重复。仍然想知道为什么你的建议对PointSystems不起作用。你能说得更详细一些吗？重复制服在这里扮演什么角色？这似乎表明了每个图像单元的大小-是这样吗？您可以提供的任何详细说明或澄清都将非常有用@duhaime如果你想了解更多，那就太好了，但最好的学习方法是构建简单的示例和实验。阅读three.js文档并学习three.js示例。做你自己的研究。只有在投入大量精力后才发布问题，然后，询问有关代码的特定问题。祝你好运谢谢@WestLangley。自从发布上述内容后，我开始进行实验，并获得了成功，非常感谢这个例子！你能多谈谈这是怎么回事吗？重复制服在这里扮演什么角色？这似乎表明了每个图像单元的大小-是这样吗？您可以提供的任何详细说明或澄清都将非常有用@duhaime如果你想了解更多，那就太好了，但最好的学习方法是构建简单的示例和实验。阅读three.js文档并学习three.js示例。做你自己的研究。只有在投入大量精力后才发布问题，然后，询问有关代码的特定问题。祝你好运谢谢@WestLangley。自从发布上述内容后，我开始进行实验，并获得了成功，非常感谢这个例子！