var C3D = require('css3d')
var Touch = require('touch')
class Page3D {
    constructor() {
        this.init()
        this.touchEvent()
    }

    init() {
        //创建场景
        var s = new C3D.Stage({
             el: $("#main")[0]
        });
        s.size(window.innerWidth, window.innerHeight).material({
            color: "#cccccc"
        }).update();
        // document.getElementById('').appendChild(s.el);

        //创建1个立方体放入场景
        var panoRect = { w: 2586, h: 1170 };
        var panoIRect = { w: 2586, h: 400 }
        var bgData = [
            { url: './img/zwj/p1.png' },
            { url: './img/zwj/p2.png' },
            { url: './img/zwj/p3.png' },
            { url: './img/zwj/p4.png' },
            { url: './img/zwj/p5.png' },
            { url: './img/zwj/p6.png' },
            { url: './img/zwj/p7.png' },
            { url: './img/zwj/p8.png' },
            { url: './img/zwj/p9.png' },
            { url: './img/zwj/p10.png' },
            { url: './img/zwj/p11.png' },
            { url: './img/zwj/p12.png' },
            { url: './img/zwj/p13.png' },
            { url: './img/zwj/p14.png' },
            { url: './img/zwj/p15.png' },
            { url: './img/zwj/p16.png' },
            { url: './img/zwj/p17.png' },
            { url: './img/zwj/p18.png' },
            { url: './img/zwj/p19.png' },
            { url: './img/zwj/p20.png' },
        ];

        // var itemData = [
        // ]

        function createPanoBg(imgs, rect) {
            var _len = imgs.length;//平面数量
            var _step = rect.w / _len;//每个平面的水平宽度
            var _radius = Math.floor(_step / 2 / Math.tan(Math.PI / _len)) - 1;//观察点（圆心）到每个平面的距离

            /*先平移后旋转*/
            var _sp = new C3D.Sprite();

            for (var i = 0; i < _len; i++) {
                var _p = new C3D.Plane();
                var _r = 360 / _len * i;//角度和
                var _a = Math.PI * 2 / _len * i;

                _p.size(_step, rect.h).position(Math.sin(_a) * _radius, 0, -Math.cos(_a) * _radius).rotation(0, -_r, 0).material({
                    image: imgs[i].url,
                    repeat: 'no-repeat',
                    bothsides: false,
                }).update();
                _sp.addChild(_p);
            }

            return _sp;
        }

        function createPanoItem(imgs, rect) {
            imgs = [0, 1]
            var _sp = new C3D.Sprite();

            var _len = imgs.length;//平面数量
            var _step = rect.w / _len;//每个平面的水平宽度
            var _radius = Math.floor(_step / 2 / Math.tan(Math.PI / _len)) - 1;//观察点（圆心）到每个平面的距离

            /*先平移后旋转*/
            var _sp = new C3D.Sprite();

            for (var i = 0; i < _len; i++) {
                var _p = new C3D.Plane();
                var _r = 360 / _len * i;//角度和
                var _a = Math.PI * 2 / _len * i;
                _p.size(500, rect.h).position(Math.sin(_a) * _radius, 0, (i == 0 ? 1 : -1) * -200).rotation(5.125, -_r, 0).material({
                    image: './img/zwj/hero_1.png',
                    repeat: 'no-repeat',
                    bothsides: false,
                    size: '100% 100%'
                }).update();
                _sp.addChild(_p);
            }

            return _sp;
        }
        var spMain = new C3D.Sprite;
        spMain.position(0, 0, -100).update();
        s.addChild(spMain);

        var panoBg = createPanoBg(bgData, panoRect);
        var panoItem = createPanoItem(null, panoIRect)

        panoBg.position(0, 0, -100).updateT();
        panoItem.position(0, 0, -100).updateT()

        spMain.addChild(panoBg)
        spMain.addChild(panoItem)

        //响应屏幕调整尺寸
        function resize() {
            s.size(window.innerWidth, window.innerHeight).update();
        }

        window.onresize = function () {
            resize();
        };

        resize();

        //刷新场景
        requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
            function (callback) {
                setTimeout(callback, 1000 / 60);
            };

        function go() {
            panoBg.rotate(0, 0.1, 0).update();

            panoItem.rotate(0, 0.1, 0).update();

            requestAnimationFrame(go);
        }

        requestAnimationFrame(go);
    }

    touchEvent() {
        new Touch({
            selector: '#main',
            touchStart: function (data) {

            },
            touchMove: function (data) {

            },
            touchEnd: function () {

            }
        })
    }
}

$(() => {
    new Page3D
})