3dgallery.js 3d画廊插件-BFW插件库

3dgallery.js 3d画廊插件
3dgallery.js 3d画廊插件,依赖于ge1doot，3dgallery，imageTransform3D
第一步引入bfwone，加载依赖包ge1doot，3dgallery，imageTransform3D
第二步执行插件
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=ge1doot|3dgallery|imageTransform3D&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">

        bready(function() {
            threedgallay.load({
                imgdata: [
                    // north
                    {
                        img: 'girl.png', x: -1000, y: 0, z: 1500, nx: 0, nz: 1
                    },
                    {
                        img: 'girl.png', x: 0, y: 0, z: 1500, nx: 0, nz: 1
                    },
                    {
                        img: 'girl.png', x: 1000, y: 0, z: 1500, nx: 0, nz: 1
                    },
                    // east
                    {
                        img: 'girl.png', x: 1500, y: 0, z: 1000, nx: -1, nz: 0
                    },
                    {
                        img: 'girl.png', x: 1500, y: 0, z: 0, nx: -1, nz: 0
                    },
                    {
                        img: 'girl.png', x: 1500, y: 0, z: -1000, nx: -1, nz: 0
                    },
                    // south
                    {
                        img: 'girl.png', x: 1000, y: 0, z: -1500, nx: 0, nz: -1
                    },
                    {
                        img: 'girl.png', x: 0, y: 0, z: -1500, nx: 0, nz: -1
                    },
                    {
                        img: 'girl.png', x: -1000, y: 0, z: -1500, nx: 0, nz: -1
                    },
                    // west
                    {
                        img: 'girl.png', x: -1500, y: 0, z: -1000, nx: 1, nz: 0
                    },
                    {
                        img: 'girl.png', x: -1500, y: 0, z: 0, nx: 1, nz: 0
                    },
                    {
                        img: 'girl.png', x: -1500, y: 0, z: 1000, nx: 1, nz: 0
                    }],
                structure: [{
                    // wall
                    fill: {
                        r: 255, g: 255, b: 255, light: 1
                    },
                    x: [-1001, -490, -490, -1001],
                    z: [-500, -500, -500, -500],
                    y: [500, 500, -500, -500]
                }, {
                    // wall
                    fill: {
                        r: 255, g: 255, b: 255, light: 1
                    },
                    x: [-501, 2, 2, -500],
                    z: [-500, -500, -500, -500],
                    y: [500, 500, -500, -500]
                }, {
                    // wall
                    fill: {
                        r: 255, g: 255, b: 255, light: 1
                    },
                    x: [0, 502, 502, 0],
                    z: [-500, -500, -500, -500],
                    y: [500, 500, -500, -500]
                }, {
                    // wall
                    fill: {
                        r: 255, g: 255, b: 255, light: 1
                    },
                    x: [490, 1002, 1002, 490],
                    z: [-500, -500, -500, -500],
                    y: [500, 500, -500, -500]
                }, {
                    // shadow
                    fill: {
                        r: 0, g: 0, b: 0, a: 0.2
                    },
                    x: [-420, 420, 420, -420],
                    z: [-500, -500, -500, -500],
                    y: [150, 150, -320, -320]
                }, {
                    // shadow
                    fill: {
                        r: 0, g: 0, b: 0, a: 0.2
                    },
                    x: [-20, 20, 20, -20],
                    z: [-500, -500, -500, -500],
                    y: [250, 250, 150, 150]
                }, {
                    // shadow
                    fill: {
                        r: 0, g: 0, b: 0, a: 0.2
                    },
                    x: [-20, 20, 20, -20],
                    z: [-500, -500, -500, -500],
                    y: [-320, -320, -500, -500]
                }, {
                    // shadow
                    fill: {
                        r: 0, g: 0, b: 0, a: 0.2
                    },
                    x: [-20, 20, 10, -10],
                    z: [-500, -500, -100, -100],
                    y: [-500, -500, -500, -500]
                }, {
                    // base
                    fill: {
                        r: 32, g: 32, b: 32
                    },
                    x: [-50, 50, 50, -50],
                    z: [-150, -150, -50, -50],
                    y: [-500, -500, -500, -500]
                }, {
                    // support
                    fill: {
                        r: 16, g: 16, b: 16
                    },
                    x: [-10, 10, 10, -10],
                    z: [-100, -100, -100, -100],
                    y: [300, 300, -500, -500]
                }, {
                    // frame
                    fill: {
                        r: 255, g: 255, b: 255
                    },
                    x: [-320, -320, -320, -320],
                    z: [0, -20, -20, 0],
                    y: [-190, -190, 190, 190]
                }, {
                    // frame
                    fill: {
                        r: 255, g: 255, b: 255
                    },
                    x: [320, 320, 320, 320],
                    z: [0, -20, -20, 0],
                    y: [-190, -190, 190, 190]
                },
                    {
                        img: true
                    },
                    {
                        // ceilingLight
                        fill: {
                            r: 255, g: 128, b: 0
                        },
                        x: [-50, 50, 50, -50],
                        z: [450, 450, 550, 550],
                        y: [500, 500, 500, 500]
                    }, {
                        // groundLight
                        fill: {
                            r: 255, g: 128, b: 0
                        },
                        x: [-50, 50, 50, -50],
                        z: [450, 450, 550, 550],
                        y: [-500, -500, -500, -500]
                    }],
                options: {
                    imagesPath: "http://editor.bfw.wiki/bfwrepo/image/"
                }
            });
        });
    </script>

    <style type="text/css">
        html {
            overflow: hidden;
            -ms-touch-action: none;
            -ms-content-zooming: none;
        }
        body {
            position: absolute;
            margin: 0px;
            padding: 0px;
            background: #fff;
            width: 100%;
            height: 100%;
        }
        #canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #fff;
        }
    </style>
</head>
<body>
    <canvas id="canvas">你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。</canvas>
</body>
</html>
3dgallery.js 3d画廊插件

网友评论0

zturn.js

PicCarousel.js

jquery.flipster.js

SliceBox.js

slideBox.js

slick.js

bxslider.js

caroursel.js

windy.js

impress.js
