SOURCE

var scene, camera, texture, texture1, geometry, material, mesh, renderer, controls, progress = 0.0
// 加载纹理
const url1 = 'http://183.192.162.3:21451/mnt1/cloudxr/ftp/test.jpg'
const url = 'http://183.192.162.29:18901/mnt1/clipcloud/ftp/cloudxr/cloudxr.jpg'

// 资源链接地址来自 https://gitee.com/zhenghy123/js-tools/tree/main

/** 
 * 创建全景图
 * 参考文档：
 * 相机：https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera
 * 纹理：https://threejs.org/docs/index.html#api/en/loaders/TextureLoader
 * 平面：https://threejs.org/docs/index.html#api/en/geometries/PlaneBufferGeometry
*/
function createImgPano() {
    // 创建场景
    scene = new THREE.Scene()
    // 创建相机
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000)
    camera.position.set(1, 0, 0)

    let loader = new THREE.TextureLoader();
    loader.setCrossOrigin("Anonymous");
    texture = new THREE.TextureLoader().load(url,
        () => {
            texture.image.crossOrigin = 'Anonymous'
            texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping
            texture.minFilter = THREE.NearestFilter
        })

    texture1 = new THREE.TextureLoader().load(url1,
        () => {
            texture.image.crossOrigin = 'Anonymous'
            texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping
            texture.minFilter = THREE.NearestFilter
        })

    // 创建平面
    geometry = new THREE.SphereBufferGeometry(500, 30, 30);
    // 创建材质
    // material = new THREE.MeshBasicMaterial({
    //     map: texture,
    //     side: THREE.DoubleSide
    // })

    var vertexShader = `
        varying vec2 vUv;
        void main()
            {
                vUv = uv;
                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
                //projectionMatrix * mvPosition; 最终得到MVP矩阵
                gl_Position = projectionMatrix * mvPosition;
                gl_Position.x=-gl_Position.x;
            }
    `
    var fragmentShader = `
     //获取纹理
    uniform sampler2D texture1;
    uniform sampler2D texture2;

    //纹理坐标
    varying vec2 vUv;
    uniform float progress; // = 0.04
   
    uniform float smoothness; // = 0.3
    uniform bool opening; // = true

    vec4 getFromColor(vec2 uv){
        return texture2D(texture1, uv);
    }
    // 调用
    vec4 getToColor(vec2 uv){
        return texture2D(texture2, uv);
    }


    const vec2 center = vec2(.5, .8);
    const float SQRT_2 = 1.414213562373;
  
    vec4 transition (vec2 uv) {
       float x=opening?progress:1.-progress;
       float juli=0.0;
       if(uv.y==1.0 && uv.x<=0.25 ){
         juli=distance(center,vec2(0.0,1.0));
       }else if(uv.y==1.0 && uv.x>=0.75){
           juli=distance(center,vec2(1.0,1.0));
       }else{
        juli=distance(center,uv);
       }
       
    float m=smoothstep(-smoothness,0.,SQRT_2*juli-x*(1.+smoothness));
    return mix(getFromColor(uv),getToColor(uv),opening?1.-m:m);

    }

    void main(void){
        gl_FragColor = transition(vUv);
    }

    `
    // 自定义shader
    material = new THREE.ShaderMaterial({
        uniforms: {
            texture1: {
                value: texture,
            },
            texture2: {
                value: texture1,
            },
            opening: {
                type: 'b',
                value: true
            },
            smoothness: {
                type: 'f',
                value: 0.3,
            },
            progress: {
                type: 'f',
                value: progress,
            },
        },
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
        // vertexShader: vertex,
        // fragmentShader: fragment,
        side: THREE.DoubleSide,
    })

    // 创建网格
    mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)
    // 创建渲染器
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(700, 350)
    renderer.setPixelRatio(window.devicePixelRatio)
    document.body.append(renderer.domElement)

    // 视角控制
    controls = new THREE.OrbitControls(camera, renderer.domElement)

    render()
}

function render() {
    window.requestAnimationFrame(render)
    renderer.render(scene, camera)
    if (progress >= 1.0) {
        progress = 0.0
    } else {
        progress += 0.005
    }
    material.uniforms.progress.value = progress
    // console.log(progress)
}

window.onload = function () {
    createImgPano()
}

<html>

<head>
	<title>在 ThreeJs 里添加、更新文字</title>

</head>

<body>

</body>

</html>