三.js - 在由管几何体构造的网格上移动纹理

Question

我有一个问题，我怀疑有一个非常简单的答案（一两行），但到目前为止我尝试过的任何方法都没有奏效。 非常感谢您的任何建议。

我

拥有的是我通过画布绘图制作的管几何形状和纹理。 然后，我制作一个网格（多材质对象，如果这有所作为），其中一个材质将贴图属性指定为我的纹理。 我称这种材料为垫子。

问题是我需要一种方法来围绕管子连续旋转纹理（用圆环术语来说，围绕子午线，而不是赤道）。 有点像揉圆形面包。以前我指定了一个偏移量（0-1），并有一个函数createTexture（offset）用于在画布上重新绘制纹理以模仿环绕，并不断使用代码

Mat.map = new THREE.Texture( createTexture(offset) ); Mat.map.needsUpdate = true; Mat.needsUpdate = true;

从美学上讲，这很好...除了画布绘图太贵了，我的表现因此而受到很大影响。 所以这不是一个合理的解决方案。

我也尝试弄乱Mat.map.offset属性，但这根本不起作用。 似乎保留了原始纹理并仅覆盖了其中的一部分。我无法确切地辨别那里发生了什么，并且想知道这是否是使用TubeGeometry的问题，因为有关Spheres的相关stackExchange问题已通过这种方法解决。

第三个想法是进入TubeGeometry.faceVertexUvs并移动所有面部坐标，修改一个，如下所示：

function transform(n){       
       var faceVertexUvs = tubeGeometry.faceVertexUvs[0];
       for (var i =0; i < faceVertexUvs.length; i++){
               for (var j=0; j< 3; j++){
                        faceVertexUvs[i][j].y = ((faceVertexUvs[i][j].y + n) % 1);     
               }     
        }
        tubeGeometry.uvsNeedUpdate = true;
}

这非常接近工作，但总是留下一条赤道线，一切都出错。 纹理看起来很糟糕，就像它遇到了很大的犹豫不决危机，我正在做的光线投射在这个地方也发疯了。 其中99%工作得很好...也许有办法挽救这最后一次尝试？

不过，我不执着于任何一种方法。 最大的效率是额外的赞赏！

再次感谢您的任何帮助！

Answer 1

您可以使用片段着色器执行此操作：

<script id="fs" type="x-shader/x-fragment">
uniform float iGlobalTime;
uniform sampler2D iChannel0;
varying vec2 vUv;  
void main() {
    vec2 uv = vUv;
    uv.y = uv.y + iGlobalTime;
    if (uv.y > 1.)
        uv.y = uv.y - 1.;
    gl_FragColor = texture2D( iChannel0,  vec2(uv.x, uv.y));
}
</script>

定义着色器材质：

_uniforms = {
    iGlobalTime:    { type: 'f', value: 0.1 },
    iChannel0:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/cat.png') },
};
newMaterial = new THREE.ShaderMaterial( {
        uniforms: _uniforms,
        vertexShader: document.getElementById( 'vs' ).textContent,
        fragmentShader: document.getElementById( 'fs' ).textContent,
} );

然后在渲染循环中设置 iGlobalTime：

_uniforms.iGlobalTime.value += clock.getDelta();
while (_uniforms.iGlobalTime.value > 1.)
    _uniforms.iGlobalTime.value -= 1.;

完整的工作示例在这里：http://rwoodley.org/MyContent/SO/01/

Answer 2

接缝由 % 1 创建。删除 % 1 并在纹理上启用环绕 （map.wrapS = THREE.RepeatWrapping 和/或 map.wrapT）。这将允许您继续增加 UV，纹理将自行包裹。您也可以尝试更改map.offset，这可能只是为您偏移纹理。