Three.js 等距矩形图像的 Y 轴偏移不起作用

Question

我混合了两种质地的糊状物。每个纹理都是全景等距矩形图像。我只需通过提供 X 或 Y 轴的度数来偏移两个纹理之一。

// usage: applyOffset(90, 90);
const applyOffset = (xAngle, yAngle) => {
  const offsetXradians = xAngle * (Math.PI / 180.0);
  const offsetYradians = yAngle * (Math.PI / 180.0);
  uniforms['offset0'].value.set(offsetXradians, offsetYradians, 0);
};
// definition: uniforms['offset0'] = { type: "v3", value: new THREE.Vector3(0, 0, 0) }

我实现了X轴旋转以向左或向右偏移。但 Y 轴不会向上或向下移动 - 它而是顺时针旋转。我尝试调整 XYZ 顺序但没有成功。

mat3 rotationMatrix3(vec3 angles) {
    mat3 rotationX = mat3(1, 0, 0, 0, cos(angles.x), sin(angles.x), 0, -sin(angles.x), cos(angles.x));
    mat3 rotationY = mat3(cos(angles.y), 0, -sin(angles.y), 0, 1, 0, sin(angles.y), 0, cos(angles.y));
    mat3 rotationZ = mat3(cos(angles.z), sin(angles.z), 0, -sin(angles.z), cos(angles.z), 0, 0, 0, 1);
    return rotationX * rotationY * rotationZ;
}

这是片段着色器：

  void main() {
    vec3 vWorldPositionScaled0 = mix(vWorldPosition, tCubePosition0, scale0);
    vWorldPositionScaled0.x *= -1.0;

    vec3 vWorldPositionScaled1 = mix(vWorldPosition, tCubePosition1, scale1);
    vWorldPositionScaled1.x *= -1.0;

    vec4 tex0, tex1;
    
    mat3 rotationMatrix0 = rotationMatrix3(offset0);
    vWorldPositionScaled0 = rotationMatrix0 * vWorldPositionScaled0;
    mat3 rotationMatrix1 = rotationMatrix3(offset1);
    vWorldPositionScaled1 = rotationMatrix1 * vWorldPositionScaled1;
    
    tex0 = textureCube(tCube0, vec3( tFlip * vWorldPositionScaled0.x, vWorldPositionScaled0.yz ));
    tex1 = textureCube(tCube1, vec3( tFlip * vWorldPositionScaled1.x, vWorldPositionScaled1.yz ));

    gl_FragColor = mix(tex1, tex0, mixAlpha);
  }

如何正确获取 Y 轴偏移并上下偏移？这是一个带有完整代码示例的 JSFiddle：https://jsfiddle.net/b2yjsp8h/

Answer 1

检查这个：

删除

applyOffset(x,x);

并修改

update

功能

const gui = new dat.GUI();
const controls = {
    offsetX: 0,
    offsetY: 0
};
gui.add(controls, 'offsetX', -180, 180).onChange(() => updateCameraAngles());
gui.add(controls, 'offsetY', -180, 180).onChange(() => updateCameraAngles());

const updateCameraAngles = () => {
    const offsetX = THREE.Math.degToRad(controls.offsetY);
    const offsetY = THREE.Math.degToRad(controls.offsetX);
    
    applyOffset(offsetX, offsetY);
};

//---

const update = () => {

    const distX = coords.current.x - coords.delta.x;
    const distY = coords.current.y - coords.delta.y;

    coords.delta.x += distX / 7;
    coords.delta.y += distY / 7;

    coords.phi = THREE.Math.degToRad(90 - coords.delta.x);
    coords.theta = THREE.Math.degToRad(coords.delta.y);

    coords.target.x = 500 * Math.sin(coords.theta) * Math.cos(coords.theta);
    coords.target.y = 500 * Math.cos(coords.phi);
    coords.target.z = 500 * Math.sin(coords.phi) * Math.sin(coords.theta);

    camera.lookAt(coords.target);
    renderer.render(scene, camera);

};