Javascript three.js skybox：明显的拐角和大量变形

今天我一直在尝试用three.js构建我的第一个skybox。我已经阅读了很多教程，最后的代码基于以下内容： 我确实做了一些更改，以允许首先加载图像，并使其与我正在使用的three.js版本兼容

我已经克服了很多小问题，达到了我目前所处的阶段，但是尽管我已经非常努力地搜索了，但仍然找不到我当前问题的任何答案。我的问题是，尽管使用了从互联网下载的特制skybox纹理，但很明显，我的skybox是一个有棱角的立方体。这些纹理看起来严重扭曲，根本无法令人信服

以下是我的skybox外观的屏幕截图：

这是我下载图片的网站的链接： 正如你所看到的，在他们的预览中，它看起来好多了

我试过使用一些不同的下载纹理，每次都很明显地看到立方体的内部

这是我的代码（我包括了我所有的代码，而不仅仅是创建skybox的部分）：

我怀疑我从根本上误解了立方体映射和Skybox是如何工作的——我对这一点特别陌生，对javascript也很陌生，并且意识到我的知识存在巨大差距

---

如果这个问题的答案是显而易见的和/或之前有人问过这个问题，我表示歉意，并首先感谢您的帮助

您的相机需要位于skybox的中心，或者至少靠近中心

因此，要么将相机移动到离长方体中心非常近的位置，要么每帧更新长方体位置以匹配相机位置

或者使skybox相对于摄影机相对于原点的偏移更大

或者将skybox放置在单独的场景中，并具有两个摄影机和两个渲染过程，如中所示

3.js r.74

    var scene;
    var camera;
    var renderer;

    function createRenderer () {
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0)
        renderer.setSize(window.innerWidth, window.innerHeight)
        renderer.shadowMapEnabled = true;
        //renderer.shadowCameraNear = 0.5;
        //renderer.shadowCameraFar = 500;
    }

    function createCamera () {
        camera = new THREE.PerspectiveCamera(
            45, 
            window.innerWidth/window.innerHeight,
            0.1, 1000
        );
        camera.position.x = 50;
        camera.position.y = 30;
        camera.position.z = 40;
        camera.lookAt(scene.position);
    }

    function createPlane () {
        var material = new THREE.MeshLambertMaterial({
            color: 0xcccccc,
        })
        var geometry = new THREE.PlaneGeometry(40, 40)

        var plane = new THREE.Mesh(geometry, material)
        plane.receiveShadow = true;
        plane.rotation.x = -Math.PI/2
        plane.position.y = -6;
        scene.add(plane)
    }

    function createLight () {
        var spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set( 0, 50, 20 );
        spotLight.shadowCameraVisible = true;
        spotLight.shadowDarkness = 0.5
        spotLight.shadowCameraNear = 0;
        spotLight.shadowCameraFar = 100;
        spotLight.shadowCameraLeft = -50;
        spotLight.shadowCameraRight = 50;
        spotLight.shadowCameraTop = 50;
        spotLight.shadowCameraBottom = -50;
        spotLight.castShadow = true;
        scene.add(spotLight);
    }

    function createSkyboxAndSphere () { 

        var urlPrefix = "Yokohama3/";
        var urls = [ urlPrefix + "posx.jpg", urlPrefix + "negx.jpg",
            urlPrefix + "posy.jpg", urlPrefix + "negy.jpg",
            urlPrefix + "posz.jpg", urlPrefix + "negz.jpg" ];
        var textureCube = THREE.ImageUtils.loadTextureCube( urls , undefined, function () {;

            var shader = THREE.ShaderLib["cube"];
            var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
            shader.uniforms['tCube'].value = textureCube;   // textureCube has been init before
            var material = new THREE.ShaderMaterial({
                fragmentShader    : shader.fragmentShader,
                vertexShader  : shader.vertexShader,
                uniforms  : shader.uniforms,
                depthWrite : false,
                side: THREE.BackSide,
            });


            var geometry = new THREE.BoxGeometry(100, 100, 100)
            var skybox = new THREE.Mesh(geometry, material)
            scene.add(skybox)


            var material = new THREE.MeshPhongMaterial({
                color: "red",
                envMap: textureCube,
                reflectivity: 0.3,
            })
            var geometry = new THREE.SphereGeometry(6, 30, 15)

            var sphere = new THREE.Mesh(geometry, material)
            sphere.castShadow = true;
            sphere.receiveShadow = true;
            scene.add(sphere)

            });
    }

    function init () {

        scene = new THREE.Scene();
        createRenderer();
        createCamera();
        createLight();
        createPlane ();
        createSkyboxAndSphere ();

        document.getElementById("container").appendChild(renderer.domElement)

        render ()
    }

    function render () {
        renderer.render(scene, camera)
        requestAnimationFrame(render);
    }

    window.onload = function () {
        init ();
    }