1. 首页
  2. three.js

three.jsSprite UV映射

您好n我正在努力解决在手机中使用紫外线的问题精灵几何. 最终,我希望舞台上有很多精灵使用一种纹理(部分纹理)。在平面上,uv变化正常工作,而在精灵上,它始终显示整个纹理sprite.geometry.attributes.uv.data.array更改项目=((ny/特克斯阿特拉斯·努米)+=(ny>nnx,ny是碎片在te纹理图谱网格上的位置。ntexAtlas.numX~Y是网格中的元素数n得克萨斯州网格大小是不是最后sprite.geometry.uv设置是正确的,但您仍然可以看到整个纹理,而不是其元素n您是否能够通过一个实例10演示此问题?n根据修改属性数据的时间,有必要调用sprite.geometry.attributes.uv.needsUpdate到true。否则GPU上的缓冲区数据不会更新。n例如,我已经重写了代码片段。效果或多或少是可见的nhttps://jsfiddle.net/3pqvmdbs/17你好!n这就是你想要的结果吗?nhttps://jsfiddle.net/prisoner849/3hnq09rz/29n您不需要公共偏移量,而是为x和>n分隔,而不是直接使用交错阵列,最好使用缓冲区属性的.setxxx()函数来设置所需项目的值。nsetSprUv(sprite.geometry.attributes.uv,0,1);function setSprUv(uv,nx,ny){uv.setXY(0, nx * texAtlas.offsetX,ny * texAtlas.offsetY);uv.setXY(1,(nx * texAtlas.offsetX) + texAtlas.offsetX,ny * texAtlas.offsetY);uv.setXY(2,(nx * texAtlas.offsetX) + texAtlas.offsetX, (ny * texAtlas.offsetY) + texAtlas.offsetY);uv.setXY(3, nx * texAtlas.offsetX,(ny * texAtlas.offsetY) +>nThe order of vertices you can find in the source code of THREE.Sprite():https://github.com/mrdoob/three.js/blob/159a40648ee86755220491d4f0bae202235a341c/src/objects/Sprite.js26l39谢谢你的回答。这实际上解决了JSFIDLE的问题,但在我的代码中应用之后,我仍然具有相同的效果。在精灵上,您可以看到整个纹理,即使其uv参数不同。n例如,具有uv参数的精灵:n0:-0.5n1:-0.5n2:0n3:0n4:0n5:0.5n6:-0.5n7:0n8:0.0625n9:0n10:0.5n12:0n13:0.0625n14:0.0625n15:0.5n16:0.5n17:0n18:0n18:0n19,尽管它显示了一个纹理的整体大小,但仍应为n刷新参数但>不起作用的问题我不确定,但这些可能有助于计算UV:n几何体:nimage.png985×61621.9kbnUV:nimage.png997×539 37.5 KBn@Keworkian有机会看看你在项目中做了什么和如何做吗?n在这个项目中,我正在创建混凝土面板的三维视图。由于面板不是完美的立方体,我必须根据它们的8个角创建每个面板。同时,由于我们没有任何计算UV的函数,所以正如您所看到的,我手动创建了它。n有几个面板,所以我将它们加载为JSON格式。下面是包含UV的JSON:nvar>n Sprite UV mapingn

three.jsSprite UV映射 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-jssprite-uv%e6%98%a0%e5%b0%84-2/