1

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

我已经克服了很多小问题来达到我目前的水平,但是尽管进行了相当艰苦的搜索,但仍然找不到我当前问题的任何答案。我的问题是,尽管使用了从互联网下载的专用天空盒纹理,但很明显我的天空盒是一个有角和边的立方体。纹理看起来严重扭曲,完全没有说服力。

这是我的天空盒外观的屏幕截图: 这是我的天空盒的截图

这是我下载图像的站点的链接: 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 非常陌生,并且我意识到我的知识存在巨大差距。

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

4

1 回答 1

3

你的相机需要在天空盒的中心——或者至少在中心附近。

因此,要么将你的相机移动到非常靠近盒子中心,要么每帧更新盒子位置以匹配相机位置。

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

或者将天空盒放在一个单独的场景中,并有两个摄像机和两个渲染通道,如本例所示

三.js r.74

于 2016-02-29T16:34:03.607 回答