Three.js立方体透明纹理显示边缘

时间:2013-04-23 01:09:07

标签: three.js transparency cube texture-mapping invisible

我正在尝试使用three.js在游戏演示中创建世界的极限,所以我创建了两个立方体,每个立方体显示一个“透明森林纹理”,将模拟世界限制。

我最初的问题是纹理显示在立方体的所有面上,但我希望它只显示在4个面中。

[更新:我设法使立方体顶面的纹理不可见,但我仍然可以看到某种边缘(我不确定它是什么......)天空。现在的问题是如何隐藏立方体边缘?]

enter image description here

仔细看看:

enter image description here

如果您访问https://googledrive.com/host/0BynsKHbZoT73elJpaUxqTlprVjQ/demos/3dworld/,您将能够看到它的实际效果。

我的代码是 [已更新]

    function createWall(texture,distanceFromMapLimit,wallsHeight,positiony){
        //texture
        var backgroundInteriorTexture = THREE.ImageUtils.loadTexture(texture,distanceFromMapLimit);
        backgroundInteriorTexture.wrapS = backgroundInteriorTexture.wrapT = THREE.RepeatWrapping;
        backgroundInteriorTexture.repeat.set( 10, 1 ); //repeat texture 10 times per face
        backgroundInteriorTexture.needsUpdate = true;
        // materials (for each face of the cube we will add one material)
        var backgroundInteriorMaterials = [];
        for ( var i = 0; i < 6; i ++ ) {
            if((i == 0) || (i == 1) || (i == 4) || (i == 5)) // side faces
            {
                console.log(i,'visible')
                backgroundInteriorMaterials.push(
                    new THREE.MeshBasicMaterial(
                    {
                        map: backgroundInteriorTexture,
                        transparent: true,
                        opacity: 1, //visible
                        side: THREE.BackSide
                    }
                ));
            }
            else //top and bottom faces
            {
                console.log(i,'NOT visible')
                backgroundInteriorMaterials.push(
                    new THREE.MeshBasicMaterial(
                    {
                        map: backgroundInteriorTexture,
                        transparent: true,
                        opacity: 0, //not visible
                        side: THREE.BackSide
                    }
                ));
            }
        }
        //geometry
        var backgroundInteriorGeometry = new THREE.CubeGeometry(
            world.worldWidth + distanceFromMapLimit,
            wallsHeight,
            world.worldDepth + distanceFromMapLimit
        );
        //mesh
        var backgroundInteriorMesh = new THREE.Mesh(
            backgroundInteriorGeometry,
            new THREE.MeshFaceMaterial(backgroundInteriorMaterials)
        );
        backgroundInteriorMesh.position.y = positiony;
        game.scene.add(backgroundInteriorMesh);
    }

    function createBackground(){
        //INTERIOR
        var wallsHeight = 4056;
        var positiony = 1750;
        createWall("Back_01.png", 0, wallsHeight, positiony); //just in ground limits
        //EXTERIOR
        createWall("Back_02.png", 5000, wallsHeight, positiony); //5000 away from ground limits
    }

谢谢:)

0 个答案:

没有答案