Three.js和GLSL：缩放纹理

Question

我使用GLSL进行两个立方体纹理的自定义转换。两种纹理都使用mix函数相互混合。现在我希望我的第一个纹理（tCube0）在转换过程中隐藏自身之前也稍微缩放（缩放）。

见下面的代码。我尝试使用我的JS将scale0更改为值2，但不会发生视觉变化：uniforms['scale0'].value = 2

<script>
uniforms = { mixAlpha: {value: 1}, opacity: {value: 1}, scale0: {value: 1}, scale1: {value: 1}, tCube0: {value: 'CubeTexture'}, tCube1: {value: 'CubeTexture'}, tFlip: {value: -1} }        
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
    uniform samplerCube tCube0;
    uniform samplerCube tCube1;
    uniform float scale0;
    uniform float scale1;
    uniform float tFlip;
    uniform float opacity;
    varying vec3 vWorldPosition;
    #include <common>
    void main() {
        vec3 vWorldPositionScaled0 = vWorldPosition*scale0;
        vec3 vWorldPositionScaled1 = vWorldPosition*scale1;
        vec4 tex0, tex1;
        tex0 = textureCube(tCube0, vec3( tFlip * vWorldPositionScaled0.x, vWorldPositionScaled0.yz ));
        tex1 = textureCube(tCube1, vec3( tFlip * vWorldPositionScaled1.x, vWorldPositionScaled1.yz ));
        gl_FragColor = mix(tex0, tex1, mixAlpha);
    }
</script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
    varying vec3 vWorldPosition;
    #include <common>
    void main() {
        vWorldPosition = transformDirection( position, modelMatrix );
        #include <begin_vertex>
        #include <project_vertex>
    }
</script>

Answer 1

textureCube的纹理坐标是一个3D方向向量，它进行三维查找。多维数据集地图纹理不像2D纹理那样采样。方向偏离立方体的中心，立方体由6个边围绕。被方向向量击中的一侧的纹素被回归textureCube。方向向量的长度不会影响结果。

参见Khronos文档Cubemap Texture Access

  

立方体贴图的采样器类型为gsamplerCube。   立方体贴图的纹理坐标是3D矢量方向。这些是概念上从立方体的中心到您想要出现的纹素的方向。矢量不必标准化。

这意味着缩放纹理坐标不会导致不同的结果。

要实现您想要的效果，您必须更改视野（透视图）。一种可能性是在视线方向上向纹理坐标添加矢量。注意，视线是视线方向，从摄像机位置到摄像机目标的方向。使用从0.0开始并稍微增加的比例因子。

vec3 texCoord3D = normalize(vWorldPosition) + scale * lineOfSight;

或

vec3 texCoord3D = mix(vWorldPosition, lineOfSight, scale)

扩展到答案：

更改制服后，您必须设置needsUpdate的{​​{1}}属性：

ShaderMaterial