Three.js制作360度全景图

这是个基于three.js的插件,预览地址:戳这里

使用方法:

1、这个插件的用法很简单,引入如下2个js

<script src="js/three.min.js"></script>
<script src="js/photo-sphere-viewer.min.js"></script> 

2、初始化一下,(具体各种参数配置根据情况而定)

var PSV = new PhotoSphereViewer({
        // 全景图的完整路径
        panorama: ‘images/360img03.jpg‘,

        // 放全景图的元素
        container: div
})

配置参数

下面是该全景图插件的所有可用配置参数:

panorama:必填参数,全景图的路径。
container:必填参数,放置全景图的div元素。
autoload:可选,默认值为true,true为自动调用全景图,false为在后面加载全景图(通过.load()方法)。
usexmpdata:可选,默认值为true,如果Photo Sphere Viewer必须读入XMP数据则为true。
default_position:可选,默认值为{},定义默认的位置,及用户看见的第一个点,例如:{long: Math.PI, lat: Math.PI/2}。
min_fov:可选,默认值为30,观察的最小区域,单位degrees,在1-179之间。
max_fov:可选,默认值为90,观察的最大区域,单位degrees,在1-179之间。
allow_user_interactions:可选,默认值为true,设置为false则禁止用户和全景图交互(导航条不可用)。
tilt_up_max:可选,默认值为Math.PI/2,向上倾斜的最大角度,单位radians。
tilt_down_max:可选,默认值为Math.PI/2,向下倾斜的最大角度,单位radians。
zoom_level:可选,默认值为0,默认的缩放级别,值在0-100之间。
long_offset:可选,默认值为PI/360,mouse/touch移动时每像素经过的经度值。
lat_offset:可选,默认值为PI/180,mouse/touch移动时每像素经过的纬度值。
time_anim:可选,默认值为2000,全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
theta_offset:过时的选项,可选,默认值为1440,自动动画时水平方向的速度。
anim_speed:可选,默认值为2rpm,动画的速度,每秒/分钟多少radians/degrees/revolutions。
navbar:可选值,默认为false。显示导航条。
navbar_style:可选值,默认为{}。导航条的自定义样式。下面是可用的样式列表:
backgroundColor:导航条的背景颜色,默认值为rgba(61, 61, 61, 0.5)。
buttonsColor:按钮的前景颜色,默认值为transparent。
activeButtonsBackgroundColor:按钮激活状态的背景颜色,默认值为rgba(255, 255, 255, 0.1)。
buttonsHeight:按钮的高度,单位像素,默认值为20。
autorotateThickness:autorotate图标的厚度,单位像素,默认值为1。
zoomRangeWidth:缩放的范围,单位显示,默认值50。
zoomRangeThickness:缩放的范围的厚度,单位像素,默认值1。
zoomRangeDisk:缩放范围的圆盘直径,单位像素,默认值为7。
fullscreenRatio:全屏图标的比例,默认值为3/4。
fullscreenThickness:全屏图标的厚度,单位像素,默认值为2。
loading_msg:可选,默认值为Loading…,图片加载时的提示文字。
loading_img:可选,默认值为null,在加载时显示的图片的路径。
size:可选,默认值null,全景图容器的最终尺寸。例如:{width: 500, height: 300}。
onready:可选值,默认值为null。当全景图准备就绪并且第一张图片显示时的回调函数。

3、上面demo的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>360全景图</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!-- 启用webAPP全屏模式-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 隐藏状态栏或者设置状态栏的颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 禁止缓存访问页面-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="applicable-device" content="mobile">
    <!-- 页面关键词-->
    <link rel="stylesheet" href="css/demo01.css">
    <script src="js/three.min.js"></script>
    <script src="js/photo-sphere-viewer.min.js"></script>
    <!---->
    <script src="js/demo01.js"></script>
    <!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="main">
        <h3 id="title">旋转查看效果</h3>
        <div id="container"></div>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
    border: 0;
    outline: 0;
}
.main{
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}
.main h3{
    text-align: center;
    padding: 10px 0;
}
/**
 * Created by Administrator on 2016/11/29.
 */

//必须在服务器上才能看到效果!
window.onload=function(){
    getTitleHeight();
    loadingAllImg();
}
//让全景图刚好撑满屏幕
var canvasHeight;
function getTitleHeight(){
    var title=document.getElementById(‘title‘);
    var titleHeight=parseFloat(getComputedStyle(title).height);
    var maxHeight=window.innerHeight;
    canvasHeight=parseFloat(maxHeight-titleHeight)+‘px‘;
}
//全景图参数配置函数
function loadingAllImg(){
    var div = document.getElementById(‘container‘);
    var PSV = new PhotoSphereViewer({
        // 全景图的完整路径
        panorama: ‘images/360img03.jpg‘,

        // 放全景图的元素
        container: div,

        // 可选,默认值为2000,全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
        time_anim: false,

        // 可选值,默认为false。显示导航条。
        navbar: true,

        // 可选,默认值null,全景图容器的最终尺寸。例如:{width: 500, height: 300}。
        size: {
            width: ‘100%‘,
            height: canvasHeight
        }
    });
}

同时,在github上面,大家搜索(Photo Sphere Viewer),也能找到!目前这个插件感觉还不是很完善。

提示:转自http://resource.haorooms.com/softshow-29-167-1.html

时间: 2024-10-29 16:10:53

Three.js制作360度全景图的相关文章

基于Three.js的360X180度全景图预览插件

基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1.html 主题 Three.js 简要教程 Photo Sphere Viewer是一款基于Three.js的360X180度全景图预览js插件.该js插件可以360度旋转查看全景图,也可以上下180度查看图片.使用该插件的唯一要求是浏览器支持canvas或WebGL. 查看演示      下载插

基于Three.js的360度全景--photo-sphere-viewer--简介

这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀螺仪: 3.功能比较完善,能满足大多数人的需求了: 4.最主要的是操作简单,提供一长全景图片即可(大多数手机都可以拍摄). 直接上代码: var photosphere = document.getElementById('photosphere'); var PSV = new PhotoSphe

怎么做360度全景图?

1-选择拍摄地点 不过这并不是一个适合初学者的选择.可以选择一些大气的场景,拍好全景照片最关键的一点是选择一个有趣的拍摄地点.令人震撼的全景照片通常都是巍峨的雪山. 只要确保拥有开阔的视野,比如一座山或自己所在乡村.不会被任何东西阻挡就好. 2-正确设置相机 如果你相机有全景拍摄模式,首先.一定要用.这种模式很有帮助,可以保证你照片拥有相同的曝光.如果没有,那么你需要使用手动模式,然后根据情况选定曝光.拍摄中,必需保证每张照片的曝光设置都是相同的 可能需要先做几次尝试,正式开始拍摄前.然后选定一

threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示

最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider 2015-01-06 verison 2.0.5 */ /* http://github.com/vml-webdev/threesixty-slider.git */ !function (a) { "use strict"; a.ThreeSixty = function (b, c)

用一张图片制作skybox图片 (如何制作360全景图、立方体)

我转发的帖子在这里 http://dong2008hong.blog.163.com/blog/static/4696882720140294039205/ 原帖不知道地址 我这里简单整理了下 去掉了写无用的,翻译成了中文 一张图制作360立方体(6面)全景图 首先将图划分为格子 注意必须格子的宽高必须为 2的幂(2 4 8,...256,512,1024这样) 格子最少数量不能少于 宽3 * 高4 然后看下这张图其实就是一个立方体的 六个面 注意这张了,相同颜色的圈意味着他们会挨着,也就是说

怎么样拍摄360度全景?

360全景不是凭空生成的,要制作一个360全景,我们需要有原始的图像素材,原始图像素材的来源可以是: A.在现实的场景中,使用相机的全景拍摄功能得到的鱼眼图像 B.通过建模渲染得到的虚拟图像 下文中的表格对比了在不同的设备.拍摄机位.拼合模式.拍摄难度下所能获得到的鱼眼图像 要拍摄全景素材我们需要用到一些专业设备,如下: 数码单反相机 360全景拍摄硬件配备-数码单反相机 首先让我们来认识一下什么是数码单反相机.说白了,数码单反相机就是使用了单反新技术的数码相机.作为专业级的数码相机,用其拍摄出

政府展示360全景应用,虚拟馆360度展示解决方案

政府需求分析: 1.数字城市.360全景城市风采展示 2.园区规划,招商引资,打造城市和产业园区的电子名片 3.大力发展在线城市管理体系:城市应急系统.城管.消防.安全等电子系统 4.大型经济和文化招商会.博览会.运动会宣传展示 5.非物质文化遗产宣传展示 6.名胜古迹宣传展示,打造低碳绿色旅游产业 360全景的特点: 1.水平垂直各360全景,一共360度视角,没有任何视线盲点,想看哪里就看哪儿; 2.全部是实景拍摄,真实立体; 3.高清晰度,采用专业自改制高像素相机; 4.互动性强,鼠标随意

虚幻UE4中如何采集360度全景图片和VR视频

如何使用虚幻4来制作一个VR视频播放器呢,简单来讲,使用虚幻4的视频采集插件来获取图像,并对图像进行处理,就能获取我们需要的图像了,下一步,你可以把图像投影到一个360度球体上,就能形成球形的播放器了. 1.插件测试-采集单帧双眼图像 打开Epic Games Launcher,启动引擎(我使用的版本为4.14.0).在弹出的对话框中点击New Project标签栏,再选择C++标签页,选择Vehicle Advanced模板,并将项目命名为STEREOSCOPIC.最后点击CreateProj

[JavaScript案例]360度全景照片

案例: 360度全景照片 鼠标在页面上滑动时图片表现的物体会随着移动方向进行旋转,从而呈现360度物体旋转效果 思路: 将所有的图片都放入指定容器内,通过切换相应的照片隐藏与显示来实现旋转效果 代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta id="viewport" name="