在three.js中固定位置着色器背景？

// 创建顶点和片元着色器代码
const vertexShader = `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

const fragmentShader = `
    uniform vec3 color;
    uniform sampler2D texture;
    varying vec2 vUv;
    void main() {
        vec4 textureColor = texture2D(texture, vUv);
        gl_FragColor = vec4(color, 1.0) * textureColor;
    }
`;

// 创建着色器材质
const material = new THREE.ShaderMaterial({
    uniforms: {
        color: { value: new THREE.Vector3(1, 0, 0) }, // 设置颜色
        texture: { value: new THREE.TextureLoader().load('texture.jpg') }, // 设置纹理
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
});

// 创建一个平面或立方体作为背景
const geometry = new THREE.PlaneGeometry(2, 2);
const backgroundMesh = new THREE.Mesh(geometry, material);
backgroundMesh.position.z = -1; // 将背景放置到相机前面
scene.add(backgroundMesh);