javascript - three.js天空盒: obvious corners and lots of distortion

Question

今天我一直在尝试用 three.js 构建我的第一个天空盒。我已经阅读了很多教程，我最终得到的代码是基于这个:http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/ 我确实做了一些更改，以便首先加载图像，并使其与我正在使用的 three.js 版本兼容。

我已经克服了很多小问题才达到我目前所处的位置，但尽管进行了相当艰苦的搜索，但仍找不到我当前问题的任何答案。我的问题是，尽管使用了从互联网上下载的专门构建的天空盒纹理，但很明显我的天空盒是一个有 Angular 和边的立方体。纹理看起来严重扭曲并且一点也不令人信服。

这是我的天空盒的截图:

这是我下载图片的网站链接: http://www.humus.name/index.php?page=Cubemap&item=Yokohama3 如您所见，在他们的预览中它看起来好多了。

我用几个不同的下载纹理进行了尝试，每次都非常明显地看到了立方体的内部。

这是我的代码(我包括了我所有的代码，而不仅仅是创建天空盒的部分):

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

我怀疑我从根本上误解了立方体贴图和天空盒的工作原理——我对此特别陌生，对一般的 javascript 很陌生，我意识到我的知识存在巨大差距。

如果这个问题的答案很明显和/或之前有人问过这个问题，我深表歉意，并先发制人地感谢您的帮助!

Answer 1

您的相机需要位于天空盒的中心——或至少靠近中心。

因此，要么将相机非常靠近移动到框中心，要么每帧更新框位置以匹配相机位置。

或者使天空盒相对于相机从原点偏移大。

或者将天空盒放在一个单独的场景中并有两个摄像机和两个渲染 channel ，如 this example .

three.js r.74