720度全景展示

最新推荐文章于 2021-08-25 12:40:06 发布

梦幻之别

最新推荐文章于 2021-08-25 12:40:06 发布

阅读量377

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43708218/article/details/104001543

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=three|CSS3DRenderer.min&err=0" type="text/BfwJavascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>


    <style>
        body {
            background-color: #000000;
            margin: 0;
            cursor: move;
            overflow: hidden;
        }
        .surface {
            width: 1026px;
            height: 1026px;
            background-size: cover;
            position: absolute;
        }
        .surface .bg {
            position: absolute;
            width: 1026px;
            height: 1026px;
        }

        .m {
            width: 200px;
            padding: 20px;
            position: fixed;
            z-index: 999;
            font-weight: bold;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div class="m">
        720度全景展示
    </div>
    <div>
        <div id="surface_0" class="surface">
            <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posx.jpg" alt="">
        </div>
        <div id="surface_1" class="surface">
            <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negx.jpg" alt="">
        </div>
        <div id="surface_2" class="surface">
            <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posy.jpg" alt="">
        </div>
        <div id="surface_3" class="surface">
            <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negy.jpg" alt="">
        </div>
        <div id="surface_4" class="surface">
            <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posz.jpg" alt="">
        </div>
        <div id="surface_5" class="surface">
            <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negz.jpg" alt="">
        </div>
    </div>
    <script type="text/BfwJavascript">
        var camera, scene, renderer;
        var geometry, material, mesh;
        var target;
        var lon = 90,
        lat = 0;
        var phi = 0,
        theta = 0;
        var touchX, touchY;

        bready(function() {
            target = new THREE.Vector3();
            init();
            animate();
        });

        function init() {
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
            scene = new THREE.Scene();
            var sides = [{
                position: [-512, 0, 0],
                rotation: [0, Math.PI / 2, 0]
            }, {
                position: [512, 0, 0],
                rotation: [0, -Math.PI / 2, 0]
            }, {
                position: [0, 512, 0],
                rotation: [Math.PI / 2, 0, Math.PI]
            }, {
                position: [0, -512, 0],
                rotation: [-Math.PI / 2, 0, Math.PI]
            }, {
                position: [0, 0, 512],
                rotation: [0, Math.PI, 0]
            }, {
                position: [0, 0, -512],
                rotation: [0, 0, 0]
            }];
            for (var i = 0; i < sides.length; i++) {
                var side = sides[i];
                var element = document.getElementById("surface_" + i);
                element.width = 1026;
                var object = new THREE.CSS3DObject(element);
                object.position.fromArray(side.position);
                object.rotation.fromArray(side.rotation);
                scene.add(object);
            }
            renderer = new THREE.CSS3DRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            document.addEventListener('mousedown', onDocumentMouseDown, false);
            document.addEventListener('wheel', onDocumentMouseWheel, false);
            document.addEventListener('touchstart', onDocumentTouchStart, false);
            document.addEventListener('touchmove', onDocumentTouchMove, false);
            window.addEventListener('resize', onWindowResize, false);
        }

        function animate() {
            requestAnimationFrame(animate);
            lat = Math.max(-85, Math.min(85, lat));
            phi = THREE.Math.degToRad(90 - lat);
            theta = THREE.Math.degToRad(lon);
            target.x = Math.sin(phi) * Math.cos(theta);
            target.y = Math.cos(phi);
            target.z = Math.sin(phi) * Math.sin(theta);
            camera.lookAt(target);
            renderer.render(scene, camera);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        function onDocumentMouseDown(event) {
            event.preventDefault();
            document.addEventListener('mousemove', onDocumentMouseMove, false);
            document.addEventListener('mouseup', onDocumentMouseUp, false);
        }

        function onDocumentMouseMove(event) {
            var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
            var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
            lon -= movementX * 0.1;
            lat += movementY * 0.1;
        }

        function onDocumentMouseUp(event) {
            document.removeEventListener('mousemove', onDocumentMouseMove);
            document.removeEventListener('mouseup', onDocumentMouseUp);
        }

        function onDocumentMouseWheel(event) {
            camera.fov += event.deltaY * 0.05;
            camera.updateProjectionMatrix();
        }

        function onDocumentTouchStart(event) {
            event.preventDefault();
            var touch = event.touches[0];
            touchX = touch.screenX;
            touchY = touch.screenY;
        }

        function onDocumentTouchMove(event) {
            event.preventDefault();
            var touch = event.touches[0];
            lon -= (touch.screenX - touchX) * 0.1;
            lat += (touch.screenY - touchY) * 0.1;
            touchX = touch.screenX;
            touchY = touch.screenY;
        }
    </script>
</body>
</html>

梦幻之别

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
720度全景展示

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>BFW NEW PAGE</title>    <script id="bfwone" data="dep=three|CS...
复制链接

扫一扫