three打造720度全景照片体验效果

代码语言:html

所属分类:三维

代码描述:利用6张照片结合three进行合成渲染,形成720度的全景照片,可自由拖拉

代码标签: 全景 照片 体验 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
   
<meta charset="UTF-8">
   
<title>BFW NEW PAGE</title>
   
<script id="bfwone" data="dep=three&err=0" type="text/javascript" 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="">
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0