Question

我一直在搜索使用单个图像作为纹理贴图创建天空盒的方法。

我找到了一个UV Mapping教程，但结果在框中的positiveY和negativeY平面的边缘生成了黑线，如here和here所示。

我的问题是：可能导致这些背线的原因是什么？这是仅使用单个图像创建天空盒的最佳方法吗？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Using an skybox!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js">        </script>
<style>
    body {margin:0; overflow:hidden}
    canvas {width:100%; height:100%}
</style>
</head>
<body>
<div id="threejs"></div>
<script>
    var scene, renderer;
    var camera, controls;
    var width, height;
    var light, ambient;
    var cube;

    init();

    function init() {
        width = window.innerWidth;
        height = window.innerHeight;

        loadScene();
        loadMeshes();
        loadLights();
        render();
    };

    function loadScene() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 2000);
        camera.position.z = 15;
        camera.lookAt(scene.position);
        renderer = new THREE.WebGLRenderer({antialias:true} );
        renderer.setSize(width, height);
        renderer.setClearColor(0xdfdfdf);
        renderer.shadowMap.enabled = true;
        renderer.shadowMapSoft = true;
        document.getElementById("threejs").appendChild(renderer.domElement);

        controls = new THREE.TrackballControls( camera, renderer.domElement);
    };

    function loadMeshes(){  
        var boxMap = new THREE.TextureLoader().load('skybox3.jpg');

        var material = new THREE.MeshPhongMaterial({
            map: boxMap,
            side: THREE.BackSide        
        });

        var posx = [new THREE.Vector2(0.5,  .666), new THREE.Vector2(0.5,  .333),
                    new THREE.Vector2(0.75, .333),  new THREE.Vector2(0.75, .666)];
        var negx = [new THREE.Vector2(0,    .666), new THREE.Vector2(0,    .333),
                    new THREE.Vector2(0.25, .333),  new THREE.Vector2(0.25, .666)];

        var posz = [new THREE.Vector2(0.25,  .666), new THREE.Vector2(0.25, .333),  
                    new THREE.Vector2(0.5,   .333),  new THREE.Vector2(0.5,  .666)];
        var negz = [new THREE.Vector2(0.75,  .666), new THREE.Vector2(0.75, .333), 
                    new THREE.Vector2(1  ,   .333),  new THREE.Vector2(1,    .666)];

        var posy = [new THREE.Vector2(0.25,  1),    new THREE.Vector2(0.25, .666),
                    new THREE.Vector2(0.5,  .666),  new THREE.Vector2(0.5,   1)];
        var negy = [new THREE.Vector2(0.25, .333), new THREE.Vector2(0.25, 0), 
                    new THREE.Vector2(0.5,  0),     new THREE.Vector2(0.5,  .333)];

        var cubeGeometry = new THREE.BoxGeometry(1000, 1000, 1000);

        cubeGeometry.faceVertexUvs[0] = [];

        cubeGeometry.faceVertexUvs[0][0] = [ posx[0], posx[1], posx[3]];
        cubeGeometry.faceVertexUvs[0][1] = [ posx[1], posx[2], posx[3]];
        cubeGeometry.faceVertexUvs[0][2] = [ negx[0], negx[1], negx[3]];
        cubeGeometry.faceVertexUvs[0][3] = [ negx[1], negx[2], negx[3]];

        cubeGeometry.faceVertexUvs[0][4] = [ posy[0], posy[1], posy[3]];
        cubeGeometry.faceVertexUvs[0][5] = [ posy[1], posy[2], posy[3]];
        cubeGeometry.faceVertexUvs[0][6] = [ negy[0], negy[1], negy[3]];
        cubeGeometry.faceVertexUvs[0][7] = [ negy[1], negy[2], negy[3]];

        cubeGeometry.faceVertexUvs[0][8] = [ posz[0], posz[1], posz[3]];
        cubeGeometry.faceVertexUvs[0][9] = [ posz[1], posz[2], posz[3]];
        cubeGeometry.faceVertexUvs[0][10] = [ negz[0], negz[1], negz[3]];
        cubeGeometry.faceVertexUvs[0][11] = [ negz[1], negz[2], negz[3]];


        cube = new THREE.Mesh(cubeGeometry, material);
        scene.add(cube);

    };

    function loadLights() {
        ambient = new THREE.AmbientLight(0xbbbbbb);
        light = new THREE.SpotLight(0x5555555);
        light.castShadow = true;
        light.shadowCameraNear = 8;
        light.shadowCameraFar = 400;
        light.shadowDarkness = 1;
        light.shadowMapWidth = 2048;
        light.shadowMapHeight = 2048;
        light.position.set(8, 15, 15);

        scene.add(ambient);
        scene.add(light);
    };

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

    window.addEventListener("resize", function() {
        width = window.innerWidth;
        height = window.innerHeight;
        renderer.setSize(width, height);
        camera.aspect = width/height;
        camera.updateProjectionMatrix();
    });
</script>

Answer 1

感谢@WaclawJasper我可以看到它是纹理的过滤问题。因此，不是填充图像边框，而是需要在外部编辑它，我试图执行“编码填充”，增加到纹理的黑色部分的距离。这是我对原始代码的修改：

        var posx = [new THREE.Vector2(0.5,  .665), new THREE.Vector2(0.5,  .334),
                    new THREE.Vector2(0.75, .334), new THREE.Vector2(0.75, .665)];
        var negx = [new THREE.Vector2(0,    .665), new THREE.Vector2(0,    .334),
                    new THREE.Vector2(0.25, .334), new THREE.Vector2(0.25, .665)];

        var posz = [new THREE.Vector2(0.25,  .665), new THREE.Vector2(0.25, .334),  
                    new THREE.Vector2(0.5,   .334), new THREE.Vector2(0.5,  .665)];
        var negz = [new THREE.Vector2(0.75,  .665), new THREE.Vector2(0.75, .334), 
                    new THREE.Vector2(1  ,   .334), new THREE.Vector2(1,    .665)];

        var posy = [new THREE.Vector2(0.251,  1),    new THREE.Vector2(0.251, .665),
                    new THREE.Vector2(0.499,  .665), new THREE.Vector2(0.499,   1)];
        var negy = [new THREE.Vector2(0.251, .334),  new THREE.Vector2(0.251, 0), 
                    new THREE.Vector2(0.499,  0),    new THREE.Vector2(0.499,  .334)];

单个图像天空盒的问题

1 个答案: