1

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

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

[更新：我已经设法使立方体顶面的纹理不可见，但我仍然可以看到某种边缘（我不确定它是什么......）在天空中飞行。现在的问题是如何隐藏立方体边缘？]

在此处输入图像描述

仔细看看：

在此处输入图像描述

如果您访问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
    }

谢谢 ：）

4

0 回答 0