基于Three.js实现360度全景图片


Posted in Javascript onDecember 30, 2018

Three.js 是一款运行在浏览器中的3D引擎, 处理三维效果。在一些相机的官网首页中,经常有一张图在旋转,图上面悬浮着文字。这种效果是如何做出来的呢?先看效果,再讲解。

基于Three.js实现360度全景图片

1).建立一个java web 工程(或者其他工程), 因为three.js 的全景图要通过服务端浏览(安全的考虑)

基于Three.js实现360度全景图片

2).在上面的结构中,只有css中的index.css是自定义的,其余css和js都属于three.js自带的工具文件。包含图片在内,已经上传资源了,点击此处下载。

3).index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>基于Three.js的360度全景图片</title>
 <link rel="stylesheet" type="text/css" href="css/normalize.css" />
 <link rel="stylesheet" type="text/css" href="css/default.css" >
 <link rel="stylesheet" type="text/css" href="css/index.css" >
 <script src="js/three.min.js"></script>
 <script src="js/photo-sphere-viewer.min.js"></script>
</head>
<body>
 <div class="container">
 <div class="description">
  <h1>苑中遇雪</h1>
  <p> 紫禁仙舆诘旦来,青?缫R型?禾ā?lt;/p>
  <p>不知庭霰今朝落,疑是林花昨夜开。</p>
 </div>
 <div id="my-pano" class="pano"></div>
 </div> 
</body>
<script>
 window.onload = function() {
  var div = document.getElementById('my-pano');
  var PSV = new PhotoSphereViewer({
  // Panorama, given in base 64
  panorama: 'images/snow.jpg',

  // Container
  container: div,

  autoload:true,

  // Deactivate the animation
  time_anim: 2000,

  // Display the navigation bar
  navbar: true,

  // Resize the panorama
  size: {
  width: '70%',
  height: 700
  }
 });
 };
 </script>
</html>

4).index.css

body{ text-align:center} 
.container {
 margin:0 auto;
}
.pano {
 margin:0 auto;
 z-index:1;
}
.description {
 width:400px;
 left:350px;
 margin-top:40px;
 z-index:100;
 position:absolute;
 float:left; 
}
.description h1 {
 font-size:40px;
 color:#FFF
}
.description p {
 font-size:22px;
 color:#FFF
}

5).根据实际应用在浏览器测试,全景图可自动旋转、可鼠标拖拽转动、可全屏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
js的2种继承方式详解
Mar 04 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
three.js实现圆柱体
Dec 30 #Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 #Javascript
Three.js实现3D机房效果
Dec 30 #Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 #Javascript
three.js搭建室内场景教程
Dec 30 #Javascript
Three.JS实现三维场景
Dec 30 #Javascript
Three.js实现简单3D房间布局
Dec 30 #Javascript
You might like
PHP date函数参数详解
2006/11/27 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
js下拉菜单语言选项简单实现
2013/09/23 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
基于Python中的yield表达式介绍
2019/11/19 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
房地产财务部员工岗位职责
2014/03/12 职场文书
自荐信格式范文
2015/03/04 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
详解SQL报错盲注
2022/07/23 SQL Server