renyicun
/
ZhongMianAdmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                overflow: hidden;
            }
            .scene {
                /* height: 100%;
                float: left;
                width: 50%; */
                width: 100%;
                height: 100%;
            }
            .paint {
                position: absolute;
                width: 100%;
                top: 0;
                left: 0;
                z-index: 1000;
            }
            .control {
                pointer-events: all;
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 34px;
                border-radius: 17px;
                background-color: rgba(0, 0, 0, 0.3);
                position: absolute;
                bottom: 10px;
                left: 10px;
                z-index: 1000;
            }
            .control div {
                position: relative;
                margin-left: 20px;
                margin-right: 20px;
                cursor: pointer;
            }
            .control div i {
                font-size: 18px;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="scene" class="scene">
            <div class="control">
                <div>
                    <!-- icon-show_roaming_selected -->
                    <button onclick="changeMode('panorama')" class="iconfont icon-show_roaming_normal">panorama</button>
                </div>
                <div>
                    <button onclick="changeMode('floorplan')" class="iconfont icon-show_plane_normal">floorplan</button>
                </div>
                <div>
                    <button onclick="changeMode('dollhouse')" class="iconfont icon-show_3d_normal">dollhouse</button>
                </div>
            </div>
        </div>
        <div id="scene2" class="scene"></div>
        <div class="paint">
            <button id="show-paint" onclick="paint(true)">开启画笔</button>
            <button id="hide-paint" onclick="paint(false)" disabled>关闭画笔</button>
        </div>
        <script src="./js/socket.io.min.js"></script>
        <script src="../dist/sdk/kankan-sdk-deps.js"></script>
        <script src="../dist/sdk/kankan-sdk.js"></script>
        <script>
            var role = window.location.search.indexOf('leader') != -1 ? 'leader' : 'customer'

            function getURLParams(params) {
                var p = []
                for (let key in params) {
                    p.push(key + '=' + encodeURIComponent(params[key]))
                }
                return p.join('&')
            }

            function paint(show) {
                if (show) {
                    document.getElementById('show-paint').disabled = true
                    document.getElementById('hide-paint').disabled = false
                    kankan.Connect.paint.show({ role, paint: role == 'leader' ? true : false })
                    if (role == 'leader') {
                        socket.emit('action', { type: 'user-paint', open: true })
                    }
                } else {
                    document.getElementById('show-paint').disabled = false
                    document.getElementById('hide-paint').disabled = true
                    kankan.Connect.paint.hide()
                    if (role == 'leader') {
                        socket.emit('action', { type: 'user-paint', open: false })
                    }
                }
            }

            function createSocket(config) {
                var socket = io('https://v4-test.4dkankan.com/', {
                    path: '/ws-sync',
                    transports: ['websocket'],
                })
                return socket
            }

            var kankan = null
            var isJoined = false
            var socket = createSocket()

            socket.on('connect', () => {
                socket.emit('join', {
                    userId: Date.now().toString(),
                    roomId: 'test-room-paint-1',
                    role: role,
                })
            })

            socket.on('join', data => {
                isJoined = true
            })

            socket.on('action', data => {
                if (data.type == 'error') {
                } else if (data.type == 'user-init') {
                    kankan.Connect.follow.sync()
                } else if (data.type == 'user-paint') {
                    paint(data.open)
                }
            })

            socket.on('paint', data => {
                kankan.Connect.paint.receive(data)
            })

            socket.on('sync', data => {
                kankan.Connect.follow.receive(data)
            })

            var kankan = new KanKan({
                dom: '#scene',
                num: 't-JKNqv1o',
            })

            kankan.Scene.on('loaded', () => {
                if (role == 'leader') {
                    kankan.Connect.follow.start()
                } else {
                    kankan.Connect.follow.start({ follow: true })
                    setTimeout(() => {
                        socket.emit('action', { type: 'user-init' })    
                    }, 1000);
                    
                }
            })

            kankan.Connect.follow.on('data', data => {
                if (isJoined) {
                    socket.emit('sync', data)
                }
            })

            kankan.Connect.paint.on('data', data => {
                socket.emit('paint', data)
            })

            kankan.render()

            function changeMode(mode) {
                kankan.Camera[mode]()
            }
        </script>
    </body>
</html>