web上构建3d效果 基于three.js的实例

web页面上提供3D效果，可以为页面提供不少色彩，H5之后canvas 为webgl提供了基础，使得在web页面使用JS也能写出3D的效果，其中three.js作为封装了图形函数 的框架，为入门提供了方便，效果图如下。

 

以上是官方例子中其中的三个，没接触过的朋友肯定会觉得很神奇，事实上three.js能做的远不止这些，入门容易，如果灵活运用到项目中就只能看各自的发挥了。

下面这个是自己做的一个项目中的效果

 地图JSON如下，自己封装了对室内墙体生成的封装，后期有空会详细讲解。

绘制3D室内 案例

var zallMap2 = [
    {
        title: '',
        floorType:floorTypes[1],
        x: 0,
        y: 80,
        z: 0,
        width: 962,
        height: 866,
        color: "#142B46",
        textcolor: "black",
        bordercolor: "rgba(76, 181, 216, 0.85)",
        imageurl: 'images/Escalator.png',
    },
    {
        title: '',
        x: 480,
        y: 80,
        z: 0,
        width: 2,
        height: 866,
        color: "#30B2BB",
        textcolor: "black",
        bordercolor: "rgba(76, 181, 216, 0.85)",
        bspMesh: [

            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 82,
                width: 38,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 17,
                width: 2,
                height: 73.7,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 120,
                width: 38,
                height: 5,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 187.5,
                width: 2,
                height: 106.5,
                positionY: 0,
            },
             {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 213,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 26.5,
                y: 80,
                z: 213,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 270,
                width: 11.5,
                height: 2,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 26.5,
                y: 80,
                z: 270,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 270,
                width: 2,
                height: 92,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 360,
                width: 36,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 360,
                width: 2,
                height: 59,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 402,
                width: 17,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 66,
                y: 80,
                z: 402,
                width: 2,
                height: 30,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 431,
                width: 2,
                height: 18,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 462,
                width: 36,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 461,
                width: 2,
                height: 69,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 525,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 26.5,
                y: 80,
                z: 525,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 648,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 26.5,
                y: 80,
                z: 648,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 648,
                width: 2,
                height: 106.5,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 738,
                width: 36,
                height: 5,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 779,
                width: 36,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 772,
                width: 2,
                height: 73.5,
                positionY: 0,
            },
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 17,
                width: 2,
                height: 73.5,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 82,
                width: 38,
                height: 2,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 108.5,
                width: 2,
                height: 106.5,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 120,
                width: 38,
                height: 5,
                positionY: 0,
            },  
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 213,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 950.5,
                y: 80,
                z: 213,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 269,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 950.5,
                y: 80,
                z: 269,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
                    {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 269,
                width: 2,
                height: 149,
                positionY: 0,
            },  
                    {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 359,
                width: 38,
                height: 2,
                positionY: 0,
            },  
                    {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 909,
                y: 80,
                z: 401,
                width: 17,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 896,
                y: 80,
                z: 401,
                width: 2,
                height: 30,
                positionY: 0,
            },  
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 430,
                width: 2,
                height: 18,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 460,
                width: 38,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 459,
                width: 2,
                height: 69,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 526,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 950.5,
                y: 80,
                z: 526,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 649,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 950.5,
                y: 80,
                z: 649,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 649,
                width: 2,
                height: 106.5,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 739,
                width: 38,
                height: 5,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 773.5,
                width: 2,
                height: 73.5,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 780,
                width: 38,
                height: 2,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 400,
                y: 80,
                z: 0,
                width: 2,
                height: 42,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 400,
                y: 80,
                z: 40,
                width: 172,
                height: 2,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 570,
                y: 80,
                z: 0,
                width: 2,
                height: 42,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 400,
                y: 80,
                z: 824,
                width: 2,
                height: 42,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 400,
                y: 80,
                z: 824,
                width: 172,
                height: 2,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 570,
                y: 80,
                z: 824,
                width: 2,
                height: 42,
                positionY: 0,
            },
            
            
            
            
            
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 480,
                y: 80,
                z: 141.5,
                width: 2,
                height: 37.6,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 480,
                y: 80,
                z: 374.2,
                width: 2,
                height: 37.6,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 480,
                y: 80,
                z: 454.6,
                width: 2,
                height: 37.6,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 480,
                y: 80,
                z: 686,
                width: 2,
                height: 45,
                positionY: 0,
            }]
    },
    {
        title: '',
        x: 0,
        y: 80,
        z: 432,
        width: 962,
        height: 2,
        color: "#30B2BB",
        textcolor: "black",
        bordercolor: "rgba(76, 181, 216, 0.85)",
        bspMesh: [
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 72.8,
                y: 80,
                z: 432,
                width: 37.8,
                height: 2,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 420,
                y: 80,
                z: 432,
                width: 37.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 502.5,
                y: 80,
                z: 432,
                width: 37.5,
                height: 2,
                positionY: 0,
            }
            ,
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 848,
                y: 80,
                z: 432,
                width: 40,
                height: 2,
                positionY: 0,
            }
        ]
    },
    {
        title: '',//wall 一层北墙体
        x: 0,
        y: 80,
        z: 0,
        width: 962,
        height: 2,
        color: "#30B2BB",
        textcolor: "black",
    },
    {
        title: '',//wall 西
        x: 0,
        y: 80,
        z: 2,
        width: 2,
        height: 864,
        color: "#30B2BB",
        textcolor: "black",
       
    }
    ,
    {
        title: '',//wall 东
        x: 960,
        y: 80,
        z: 0,
        width: 2,
        height: 864,
        color: "#30B2BB",
        textcolor: "black",
    }
    ,
    {
        title: '',//wall 南
        x: 0,
        y: 80,
        z: 864,
        width: 962,
        height: 2,
        color: "#30B2BB",
        textcolor: "black",
   
    }
];