Javascript Three.js和GLSL：缩放纹理

我使用GLSL对两个立方体纹理进行自定义转换。两种纹理通过

mix

功能相互混合。现在，我想让我的第一个纹理（

tCube0

）在过渡期间隐藏自身之前也稍微缩放（缩放）

请参阅下面的代码。我试图用我的JS将

scale0

更改为value

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>

统一={mixAlpha:{value:1}，不透明度：{value:1}，缩放0:{value:1}，缩放1:{value:1}，tCube0:{value:'CubeTexture'}，tCube1:{value:'CubeTexture'}，tFlip:{value:-1}
均匀取样器立方体tCube0；
均匀取样器立方体tCube1；
均匀浮标0；
均匀浮标1；
均匀浮力；
均匀浮动不透明度；
可变vec3位置；
#包括
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=混合（tex0，tex1，mixAlpha）；
}
可变vec3位置；
#包括
void main（）{
vWorldPosition=变换方向（位置，模型矩阵）；
#包括
#包括
}
纹理坐标是一个三维方向向量，它进行三维查找。立方体贴图纹理不像二维纹理那样采样。方向超出立方体的中心，立方体由6条边包围。被方向向量击中一侧的纹理由
textureCube
返回。方向向量的长度不会影响结果


见Khronos文件

cubemaps的采样器类型为
gsamplerCube
。
立方体贴图的纹理坐标是三维矢量方向。这些是从立方体中心到要显示的纹理的概念方向。向量不必规格化

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



为了达到你想要的效果，你必须改变视野（透视图）。一种可能是将视线方向上的向量添加到纹理坐标。注意，视线是视图方向，即从相机位置到相机目标的方向。使用从0.0开始并略微增加的比例因子

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

或



对答案的扩展：

更改制服后，您必须设置
ShaderMaterial
的
needsUpdate
属性：

uniforms = {
    tCubePosition0: {type: "v3", value: new THREE.Vector3()},
    tCubePosition1: {type: "v3", value: new THREE.Vector3()},
    ..... };

materials = new THREE.ShaderMaterial( { uniforms: uniforms, ..... } );

.....

uniforms['tCubePosition0'].value = camera.getWorldDirection();
uniforms['tCubePosition1'].value = camera.getWorldDirection();
.....
materials.needsUpdate = true;    

您可以在ShaderProgram上测试frag/vert着色器，那么如何缩放纹理？谢谢，如何准确计算视线？我已经设置了一个摄像头，用户可以平移方向。我用了
新的三视角相机（FOV，（window.innerWidth/window.innerHeight），近距离，远距离）
初始设置，然后用户可以平移。@Vad视线是视图矩阵的负Z轴。您可以从透视摄像头中获取tihs vectror，我尝试了
vec3 vWorldPositionScaled0=vWorldPosition+scale0*tCubePosition0其中
制服['tCubePosition0']=camera.getWorldDirection（）
和
scale0
从0增加到0.5，但不发生缩放。仍然没有效果。也许我做错了一些简单的事情：。
uniforms = {
    tCubePosition0: {type: "v3", value: new THREE.Vector3()},
    tCubePosition1: {type: "v3", value: new THREE.Vector3()},
    ..... };

materials = new THREE.ShaderMaterial( { uniforms: uniforms, ..... } );

.....

uniforms['tCubePosition0'].value = camera.getWorldDirection();
uniforms['tCubePosition1'].value = camera.getWorldDirection();
.....
materials.needsUpdate = true;