An example of building 3D effects on the web based on three.js

web Available on page 3D effect , Can provide a lot of colors for the page ,H5 after canvas by webgl Provides the foundation , Make in web Page using JS Can also write 3D The effect of , among three.js As an encapsulated graphic function Framework , Convenient for getting started , The renderings are as follows .

 

These are three of the official examples , Friends who haven't been in touch will definitely feel very magical , in fact three.js There is much more to be done , It's easy to get started , If it is flexibly applied to the project, we can only see their respective play .

The following is the effect of a project made by myself

  Map JSON as follows , I encapsulated the package generated by the indoor wall , I'll explain it in detail later when I'm free .

draw 3D indoor Case study

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',// door
                geometryType: 'box', color: '#fff',

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

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

                x: 480,
                y: 80,
                z: 454.6,
                width: 2,
                height: 37.6,
                positionY: 0,
            },
            {
                type: 'subtract',// door
                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',// door
                geometryType: 'box', color: '#fff',

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

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

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

                x: 848,
                y: 80,
                z: 432,
                width: 40,
                height: 2,
                positionY: 0,
            }
        ]
    },
    {
        title: '',//wall North wall on the first floor
        x: 0,
        y: 80,
        z: 0,
        width: 962,
        height: 2,
        color: "#30B2BB",
        textcolor: "black",
    },
    {
        title: '',//wall In the west
        x: 0,
        y: 80,
        z: 2,
        width: 2,
        height: 864,
        color: "#30B2BB",
        textcolor: "black",
       
    }
    ,
    {
        title: '',//wall In the east
        x: 960,
        y: 80,
        z: 0,
        width: 2,
        height: 864,
        color: "#30B2BB",
        textcolor: "black",
    }
    ,
    {
        title: '',//wall south
        x: 0,
        y: 80,
        z: 864,
        width: 962,
        height: 2,
        color: "#30B2BB",
        textcolor: "black",
   
    }
];