console 命令行工具 X clear

console

var scene, camera, texture, texture1, geometry, material, mesh, renderer, controls
// 加载纹理
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


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
        })

    // 创建平面
    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;
     varying vec2 vUv;
  
    void main(void){
        gl_FragColor =texture2D(texture1, vUv);
    }

    `
    // 自定义shader
    material = new THREE.ShaderMaterial({
        uniforms: {
            texture1: {
                value: texture,
            },
        },
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
        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)


    planeTexture = new THREE.TextureLoader().load(`http://183.192.162.29:18901/mnt1/clipcloud/ftp/cloudxr/icon/48d9658aaf4349dbbc5b8a20da7ec3ba.jpg`)
    //     planeTexture.wrapS = planeTexture.wrapT =
    //       THREE.ClampToEdgeWrapping
    // planeTexture.minFilter = THREE.NearestFilter

    planeGeometry = new THREE.PlaneBufferGeometry(15, 7)
    // planeMaterial = new THREE.MeshBasicMaterial({
    //       side: THREE.DoubleSide,
    //       map: planeTexture,
    //     //   aoMap: planeTexture,
    //     //   specularMap: planeTexture,
    //     //   alphaMap: planeTexture,
    //     })

    // 放开注释鼠标拖动查看planeMaterial投影变化
    planeMaterial = new THREE.ShaderMaterial({
        uniforms: {
            texture1: {
                value: planeTexture,
            },
        },
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
        side: THREE.DoubleSide,
    })

    imgMesh = new THREE.Mesh(planeGeometry, planeMaterial)
    imgMesh.position.set(-20, 5, 10)
    scene.add(imgMesh)

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


    render()
}



function render() {
    window.requestAnimationFrame(render)
    renderer.render(scene, camera)
    imgMesh.lookAt(camera.position)

}

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

<html>

<head>
	<title>ShaderMaterial和MeshBasicMaterial视角画面不一致</title>

</head>

<body>

</body>

</html>

SOURCE

本项目引用的自定义外部资源