threejs视觉漫游/VR

是可爱的大福呀~

已于 2023-02-10 14:41:02 修改

阅读量851

点赞数

文章标签：大数据

于 2022-06-24 09:55:55 首次发布

本文链接：https://blog.csdn.net/henghahouhei/article/details/125439900

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>threejs视觉漫游</title>
    <meta name="viewport" content="initial-scale=1.0" />
    <script src="../../modules/VR/three.min.js"></script>
    <script src="../../modules/VR/photo-sphere-viewer.js"></script>
   
    <style>
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .web-top{
            width: 100%;
            height: 100%;
            margin: 0;
            padding:0;
            overflow: hidden;
            background: rgb(0 80 161 / 80%);
        }

        #container {
            width: 100%;
            height: 100%;
        }
        .closeBox{
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
         .closeImg{
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            margin-right: 20px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
            font-size: 25px;
        }
    </style>
</head>

<body>
<div class="web-top">
    <div class="closeBox">
        <div class="closeImg" onclick="closeImg()">×</div>
    </div>
    <div id="container"></div>
</div>
<script>
    function closeImg() {
       
    }
</script>
<script>
    let imgSrc = "图片路径"
    var div = document.getElementById('container');
    var PSV = new PhotoSphereViewer({
        panorama: imgSrc,
        container: div,
        time_anim: 3000,
        navbar: true,
        usexmpdata: false
    });
</script>
</body>

</html>

所需js请移步至下载块 VR

threejs视觉漫游/VR-Typescript文档类资源-CSDN下载threejs视觉漫游/VR更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/henghahouhei/85758538